Search code examples
c#wpfchartslivecharts

Live Charts WPF need to always show hardcoded steps in X axis


I'm trying to do something that I believe should be easy. I want to show the values 1 through 30, evenly spaced, because I do a run of data that represents 30 minutes of data. Sometimes there are 500 data points, but sometimes there are thousands (I can easily determine the number of points though).

Basically, my code for the Xaxis looks like this, but it is not doing what I want. Below the code is a screenshot of what is happening, and below that is a screenshot of what I want.

        cartChart.AxisX.Add(new Axis
        {
            // TODO fix this to acutally show real time
            Title = "Minutes",
            //Labels= { "1", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24", "26", "28", "30" },
            Separator = new LiveCharts.Wpf.Separator
            {
                Step = listOfChartValues[i].Count / 30 > 0 ? listOfChartValues[i].Count / 30 : 1, // this is making the assumtion that data arrivals follow uniform distribution
                IsEnabled = false
            }
        });

Current Bug chart (trying to put a minute label for every data point) Bug Chart Need only 30 minute labels (maybe my algorithm to calculate step needs adjusting, currently I divide total number of data points by 30) Desired I looked at these two posts, but this is a different issue LiveChart doesn't show all Labels on x-axis WPF

Force all axis labels to show


Solution

  • The issues, is that live chart produces for each point labels, and the numbers of labels need to be the number of the points. There are two solutions for the problem.

    First You change the ChartValues<double> to ChartValues<ObservablePoint>

    chart.Series = new LiveCharts.SeriesCollection()
    {
        new LineSeries()
        {
            Title = "Some series",
            Values = new ChartValues<ObservablePoint>
            {
                new ObservablePoint(1,5),
                new ObservablePoint(1.5,7.6),
                new ObservablePoint(2,21),
                new ObservablePoint(5,25),
                new ObservablePoint(10,30),
                new ObservablePoint(17,30),
                new ObservablePoint(19.6,30),
                new ObservablePoint(30,40),
    
            }
        }
    };
    chart.AxisX = new LiveCharts.Wpf.AxesCollection()
    {
        new LiveCharts.Wpf.Axis()
        {
            Title= "Minutes",
            Separator = new LiveCharts.Wpf.Separator()
            {
                Step = 1.0,
                IsEnabled = false
            }
    
        }
    };
    

    See that in the obserablepoint you specify X and Y. Point could have different distance between each other (irregular intervals)

    The second solution could be that you got label array define in following way, so you make labels array as big as your count of points but you declare it that you got only 30 items, rest of them are empty.

    chart.AxisX.First().Labels = new List<string>() { "1", "","2","","","3",.... "30" };