Problem with vertical axis of CartesianChart when running Livecharts in WPF

Question

I have implemented a Line chart in my WPF application. However, when I run my application my vertical Y-axis on my chart doesn't use the whole space it is given. In short: the Y-axis collapses.

The chart when the program isn't run

The code in ProfileWindow.xaml:

<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" Grid.Row="2" Grid.Column="2" Grid.RowSpan="3">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Height" MinValue="0" MaxValue="1000" LabelFormatter="{Binding YFormatter}">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="50"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Samples" Labels="{Binding Labels}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
    </Grid>

I tried using Axis.Separator to use a set step of 50. But as you can see this doesn't work.

The chart when running Visual studio:

The code in Mainwindow.xaml.cs

        public MainWindow()
        {
            InitializeComponent();
            AppWindow = this;
            OpenChildWindow(new DashboardWindow());

            SeriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Title = "Series 1",
                    Values = new ChartValues<double> { 4, 60, 5, 2 ,4 }
                },
                new LineSeries
                {
                    Title = "Series 2",
                    Values = new ChartValues<double> { 6, 7, 30, 4 ,6 },
                },
                new LineSeries
                {
                    Title = "Series 3",
                    Values = new ChartValues<double> { 4,2,700,2,7 },
                }
            };

            Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" };
            YFormatter = value => value.ToString("C");

            DataContext = this;
        }

        public SeriesCollection SeriesCollection { get; set; }
        public string[] Labels { get; set; }
        public Func<double, string> YFormatter { get; set; }

Where is my thinking/implementation fault?

Answer 1

When setting the Axis.MaxValue to a fixed value, then the plot can't scale.

Remove the MaxValue attribute from the y-axis. The range of the axis will be automatically determined by the max value of the data points or series. This way the plot will always use the maximum available space on screen (scale to fit).

<lvc:CartesianChart Series="{Binding SeriesCollection}"
                    Height="300" 
                    LegendLocation="Right" 
                    Grid.Row="2" 
                    Grid.Column="2"                        
                    Grid.RowSpan="3">
  <lvc:CartesianChart.AxisY>
    <lvc:Axis Title="Height" LabelFormatter="{Binding YFormatter}">
      <lvc:Axis.Separator>
        <lvc:Separator Step="50" />
      </lvc:Axis.Separator>
    </lvc:Axis>
  </lvc:CartesianChart.AxisY>
  <lvc:CartesianChart.AxisX>
    <lvc:Axis Title="Samples" Labels="{Binding Labels}" />
  </lvc:CartesianChart.AxisX>
</lvc:CartesianChart>