Search code examples
c#wpfwpftoolkitcharts

How to refresh WPF chart after updating the Y Axis Maximum value?


I 'm creating a Line chart using WPFToolKit.

The chart comes up fine but i want to change the Maximum property of the Y Axis upon button click of a modal window after loading the chart for the first time. And the chart should be refreshed with the updated Y Axis Max value

Below line shows how Chart is defined in xaml.

<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart" VerticalAlignment="Stretch"/>

I'm calling below code in windows.xaml.cs constructor and it is setting Y-Axis Max to 200

mcChart.Axes.Add(new LinearAxis()
        {
            Minimum = 0,
            Maximum = YMax > 0 ? YMax : 200,
            Orientation = AxisOrientation.Y,
            ShowGridLines = true,               
        });

        mcChart.UpdateLayout(); 

How can i change the Y-Axis Max value from a modal window's button click event and refresh chart to display with new YMax.

I'm not sure if i have to do something with RegisteredListeners. I'm new to WPF and any help is appreciated!

Please note that i'm looking to achieve this from the C# code behind and not in xaml.

Thanks, Sujay


Solution

  • If you have access to the chart, you can find the neccessary axis and change the Maximum property without updating layout. Here is an example with a linear Y axis:

    var yAxis = this.mcChart.ActualAxes.OfType<LinearAxis>().FirstOrDefault(ax => ax.Orientation == AxisOrientation.Y);
    if (yAxis != null)
        yAxis.Maximum = 300;
    

    The complete version of this example:

    MainWindow.xaml

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Content="Set max value = 300" HorizontalAlignment="Center" Click="Button_Click"/>
        <charting:Chart Grid.Row="1" x:Name="mcChart">
            <charting:Chart.Series>
                <charting:LineSeries ItemsSource="{Binding LineItems}" IndependentValuePath="Date" DependentValuePath="Value"/>
            </charting:Chart.Series>
        </charting:Chart>
    </Grid>
    

    MainWindow.xaml.cs

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
    
            //Add a linear Y axis
            int YMax = 150;
            mcChart.Axes.Add(new LinearAxis()
            {
                Minimum = 0,
                Maximum = YMax > 0 ? YMax : 200,
                Orientation = AxisOrientation.Y,
                ShowGridLines = true,
            });
    
            //Create and set a view model
            var items = Enumerable.Range(0, 50).Select(i => new ChartItemModel { Date = new DateTime(2010, 1, 1).AddDays(i), Value = 30 + i }).ToList();
            this.DataContext = new MainViewModel { LineItems = items };
        }
    
        //Set Maximum=300
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var yAxis = this.mcChart.ActualAxes.OfType<LinearAxis>().FirstOrDefault(ax => ax.Orientation == AxisOrientation.Y);
            if (yAxis != null)
                yAxis.Maximum = 300;
        }
    }
    
    public class MainViewModel
    {
        public List<ChartItemModel> LineItems { get; set; }
    }
    
    public class ChartItemModel
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }