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 ?
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>