How to notify when clicking the axis label of Xamarin.Forms Charts?
In Xamarin.Forms Charts, the major division has been marked by axis labels. It provides support to notify an action while clicking that. Here, using that support, we are going to add an image annotation on the segment position as shown below.
This has been achieved by using the LabelClicked of the chart’s axis. It has been invoked when the axis label is clicked. It has arguments like LabelContent and Position. By adding the annotation on its corresponding position as shown in the following code sample.
<syncfusion:SfChart x:Name="chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<syncfusion:SfChart.Title>
<syncfusion:ChartTitle Text="CROP YEILD FORECASTING" FontAttributes="Bold"/>
</syncfusion:SfChart.Title>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis LabelClicked="CategoryAxis_LabelClicked"/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis Minimum="0" Maximum="50"/>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:ColumnSeries Color="#bcdbb7" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
</syncfusion:SfChart>
private void CategoryAxis_LabelClicked(object sender, Syncfusion.SfChart.XForms.LabelClickedEventArgs e)
{
chart.ChartAnnotations.Clear();
ViewAnnotation viewAnnotation = new ViewAnnotation()
{
VerticalAlignment = ChartAnnotationAlignment.Start,
View = new Image()
{
Source = imageSource[(int)e.Position],
Aspect = Aspect.AspectFit,
HeightRequest = 90,
WidthRequest=90
},
X1 = e.Position,
Y1 = (BindingContext as ViewModel).Data[(int)e.Position].YValue1
};
chart.ChartAnnotations.Add(viewAnnotation);
}
View the complete sample in GitHub.
See also
How to customize the axis label format based on the culture in Xamarin.Forms Charts
How to view corner segments without cutting in the edge of Xamarin.Forms Charts
How to replace the axis labels with an image in Xamarin.Forms Charts
Conclusion
I hope you enjoyed learning about how to notify when clicking the axis label of Xamarin.Forms Charts.
You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data.
For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Chart and other Xamarin components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
