Customization of LabelStyle for Category Axis Label on LabelClicked event

[Joseph Cellucci]

I am plotting month names January, February, etc. in Category Axis. I want to show a month name selected at a time. I want to customize the LabelStyle of the Selected month name to denote that as the selected month (Selection is performed using LabelClicked event). I am not finding a way to change LabelStyle of particular axis labels upon selection (LabelClicked event). Please let me know how can I achieve my requirement with a sample.

[Yuvaraj Palanisamy]

Hi Joseph Cellucci, 

 

Greetings from Syncfusion. 

 

We have achieved your requirement “Change the style of the Selected axis label using LabelClicked event” by workaround with the help of RangeStyle property of ChartAxis in LabelCreated event. Please find the code example below. 

 

CodeSnippet: 

<chart:SfChart.PrimaryAxis> 

    <chart:CategoryAxis LabelClicked="CategoryAxis_LabelClicked"> 

    </chart:CategoryAxis > 

</chart:SfChart.PrimaryAxis> 

 

private void CategoryAxis_LabelClicked(object sender, LabelClickedEventArgs e) 

{ 

    var index = (sender as CategoryAxis).VisibleLabels.FindIndex(b => b.LabelContent == e.LabelContent); 

    ChartAxisRangeStyleCollection rangeStyleCollection = new ChartAxisRangeStyleCollection(); 

 

    ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() 

    { 

        Start = index, End = index, 

        LabelStyle = new ChartAxisLabelStyle() { TextColor = Color.Blue, FontAttributes = FontAttributes.Bold} 

    }; 

 

    rangeStyleCollection.Add(rangeStyle); 

 

    (sender as CategoryAxis).RangeStyles = rangeStyleCollection; 

} 

 

Also, we have attached the sample for your reference, please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165282/ze/ChartSample_CustomAxisLabel-479577788  

  

Output: 

 

 

For more details, please refer the below link. 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#event  

UG: https://help.syncfusion.com/xamarin/charts/axis#customize-individual-axis-elements  

 

Regards, 

Yuvaraj.