How can I have a label on every column in a barchart using livecharts

Question

Using LiveCharts(https://lvcharts.net/) and C# I want to have a barchart where every column has a label on the x-axis. However I am only getting a label on every second column. The labels exists datawise, as I can see them in a popup when I hover over the columns.

I have tried messing around with the various label properties on the axis as well as my labelformatter but I only ever get a label on every second column.

My XAML implementation of my chart:

<lvc:CartesianChart Name="CartesianChart" Series="{Binding Series}" MinHeight="400" MinWidth="800" >

    <lvc:CartesianChart.AxisX>
        <lvc:Axis MinValue="0" Labels="{Binding XAxisLabels}" ShowLabels="True" LabelsRotation="50">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="{Binding AxisStrokeColor}">/lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>

    <lvc:CartesianChart.AxisY>
        <lvc:Axis MinValue="0"   MaxValue="10" LabelFormatter="{Binding LabelFormatter}">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="{Binding AxisStrokeColor}">/lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

My code for instantiating my chart:

public partial class Chart : UserControl
{
    public SolidColorBrush AxisStrokeColor { get; set; }
    public SeriesCollection Series { get; set; }
    public string[] XAxisLabels { get; set; }
    public Func<double, string> LabelFormatter { get; set; }

    public Chart()
    {
        Series = new SeriesCollection();
        InitializeComponent();
        AxisStrokeColor = Brushes.Transparent;
        CartesianChart.DataContext = this;
        CartesianChart.LegendLocation = LegendLocation.Right;
    }

    public void addBarSeries(List<KeyValuePair<string, double>> data, string title)
    {
        ChartValues<ObservableValue> values = new ChartValues<ObservableValue>();
        string[] labels = new string[data.Count];

        for (int i = 0; i < data.Count; i++)
        {
            values.Add(new ObservableValue(data[i].Value));
            labels[i] = data[i].Key;
        }

        Series.Add(new ColumnSeries
            {
                Title = title,
                Values = values,
                DataLabels = true,
            });

        XAxisLabels = labels;
        LabelFormatter = value => value.ToString("N");
    }
}

The function that i use to populate the chart with test data

Chart.addBarSeries(seedData3(), "myTitle");

public List<KeyValuePair<string, double>> seedData3()
        {
            var returnCollection = new List<KeyValuePair<string, double>>();

            for (int i = 0; i < 10; i++)
            {

                returnCollection.Add(new KeyValuePair<string, double>("Timmy " + i, i));
            }

            return returnCollection;
        }

How can I make sure that a label is shown for every column ?

I tried your code exaclty as it is, and it works fine for me. Are you sure the problem is not in how you call addBarSeries and the data list you pass? — farfetched, Jul 03 '19 at 10:42
Might be, i´ve edited the post to include the way i populate the chart. How did you populate the chart ? — Thor Giversen, Jul 03 '19 at 11:03

farfetched · Accepted Answer · 2019-07-03T11:52:24.393

3

The number of labels shown on the axis is calculated automatically in order to fit the view without overlapping.

If you want to force the value of rendered labels, just add the Step property on the Separator:

<lvc:Separator Step="1" Stroke="{Binding AxisStrokeColor}"></lvc:Separator>

edited Jul 03 '19 at 11:52

answered Jul 03 '19 at 10:26

farfetched

192
12

How can I have a label on every column in a barchart using livecharts

1 Answers1