Category / Section
How to display the modified axis labels in Xamarin.Forms Charts
1 min read
Axis labels in Xamarin.Forms Chart has been generated based on the provided data points. Consider the use case, to modify the UI with your desired labels in axis instead of its actually generated label text, then it has been achieved by changing the content of desired indexed VisibleLabels as shown in the following code sample.
VisibleLabels of axis has been obtained by using the extended chart axis of OnCreateLabels override method.
MainPage.xaml
<syncfusion:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False"/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<local:NumericalAxisExt ShowMajorGridLines="False" Interval="8" ShowMinorGridLines="False"/>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:LineSeries ItemsSource="{Binding Data}" Color="#036c6e" XBindingPath="Category" YBindingPath="Value" >
</syncfusion:LineSeries>
</syncfusion:SfChart>
NumericalAxisExt class
public class NumericalAxisExt:NumericalAxis
{
protected override void OnCreateLabels()
{
base.OnCreateLabels();
VisibleLabels[0].LabelContent = "Low";
VisibleLabels[VisibleLabels.Count / 2].LabelContent = "Average";
VisibleLabels[VisibleLabels.Count - 1].LabelContent = "High";
}
}
Output
See also
How to customize the axis label format based on the culture in Xamarin.Forms Chart
How to replace the axis labels with image in Xamarin.Forms Chart
How to display fixed number of data points in Chart
