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

Question

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) Need only 30 minute labels (maybe my algorithm to calculate step needs adjusting, currently I divide total number of data points by 30) 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

I belive the top pitcute is correct, bottom is incorrect right? — Kaspar, Jan 25 '19 at 16:59
Ok, there are two solution for your problem, once is you change your chartvalues to obseravblepoint, and second, you make empty labels for the points you do not need, I can provide you both solutions but need some time to do so and let me know if you stil need it? — Kaspar, Jan 25 '19 at 17:23
Thank you. Both solutions would help me if you could provide code I'll accept the answer. Not sure about observablepoint, is it somthing that would work with 10,000 data points? — Goku, Jan 25 '19 at 17:42
no probably better stay with second option make empty 99,970 labels and only 30 with numbers 1,30, observablepoint is great option but probably not work with dat big data set properly. — Kaspar, Jan 25 '19 at 17:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187335/discussion-between-kaspar-and-goku). — Kaspar, Jan 25 '19 at 17:57

Kaspar · Accepted Answer · 2019-01-25T17:52:25.347

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" };

Let me try these out then I'll accept the answer. thank you for the help! — Goku, Jan 25 '19 at 18:17

Goku · Answer 2 · 2019-01-25T21:50:21.897

This was the solution to the problem, but Kaspar's answer was educational and helped me arrive at this solution. Therefore, I accepted his answer since he deserves the credit.

The way I solved this problem was to do the following: While creating the charts I would bind to the listOfLableValues; after creating the charts I would edit add to this list as shown in the bottom loop of my code:

private List<string> listOfLableValues = new List<string>();

//... other WPF code
// loop through all charts and to create them
       SeriesCollection = new SeriesCollection
       {
            new StepLineSeries
            {
                Values = listOfChartValues[i],
                PointGeometry = null,
                // Fill = Brushes.Transparent
             },
       };
//... other Livecharts code

        int lableCount = 1;
        for (int i = 0; i < listOfChartValues.Count; i++)
        {
            listOfChartValues[i].AddRange(de.ListOfListPlottedAmpData[i]);


            if (0 == i % (listOfChartValues[i].Count / 30))
                listOfLableValues.Add(lableCount++.ToString());
            else
                listOfLableValues.Add("");
        }

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

2 Answers2