Category / Section
How to add custom axis label in Xamarin.Forms Charts
1 min read
Axis labels in Xamarin.Forms Chart has been generated based on the provided data points. The chart supports to change the entire axis labels text with your desired text.
Actual axis labels are maintained in the collection of VisibleLabels in axis, which has been obtained by having extended axis with OnCreateLabels override method as shown in the following code sample.
[XAML]
<syncfusion:SfChart Margin="30" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False">
<syncfusion:CategoryAxis.LabelStyle>
<syncfusion:ChartAxisLabelStyle FontAttributes="Bold"/>
</syncfusion:CategoryAxis.LabelStyle>
</syncfusion:CategoryAxis>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<local:NumericalAxisExt Interval="20" EdgeLabelsDrawingMode="Fit" ShowMinorGridLines="False" ShowMajorGridLines="False" >
<local:NumericalAxisExt.LabelStyle>
<syncfusion:ChartAxisLabelStyle FontAttributes="Bold"/>
</local:NumericalAxisExt.LabelStyle>
</local:NumericalAxisExt>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
</syncfusion:SfChart>
[C#]
public class NumericalAxisExt:NumericalAxis
{
protected override void OnCreateLabels()
{
base.OnCreateLabels();
for(int position = 0; position<VisibleLabels.Count;position++)
{
int axisValue = int.Parse(VisibleLabels[position].LabelContent);
if (axisValue < 380)
{
VisibleLabels[position].LabelContent = "Very Low";
}
else if(axisValue >= 380 && axisValue < 420)
{
VisibleLabels[position].LabelContent = "Low";
}
else if (axisValue >= 420 && axisValue < 430)
{
VisibleLabels[position].LabelContent = "Average";
}
else if (axisValue >= 430 && axisValue < 460)
{
VisibleLabels[position].LabelContent = "High";
}
else if (axisValue >= 460)
{
VisibleLabels[position].LabelContent = "Very High";
}
}
}
}
