Dynamic label size for X Axis

[Gabriel Alva]

Hi. I have a chart with label (labelStyle) text size 15px for my X Axis. The thing is I need to set the size based on conditions. It could be some value I'll get from a rest api or checking the user resolution (like media queries). 

I couldn't find a way to do this in the documentation. Is there a way to actually do this? Like adding an style class to the label so I can actually work with media queries in my style sheet.

Project sample:

https://stackblitz.com/edit/angularchartannotation-7q89kr

Kind regards,

Gabriel

[Durga Gopalakrishnan]

Hi Gabriel, 

Greetings from Syncfusion. 

We have analysed your query and suggest you to use axisLabelRender event to customize the axis labels dynamically. We have specified different sizes for axis labels based on the chart width within the axisLabelRender event. Also, we have modified your provided sample and attached the same for your reference. Please check with the below snippet and sample. 

Code Snippet 

 

<ejs-chart #chart (axisLabelRender)="axisLabelRender($event)" > 

</ejs-chart> 

public axisLabelRender(args: IAxisLabelRenderEventArgs): void { 

       if(args.axis.name =="primaryXAxis"){ 

         if(this.chart.availableSize.width <= 200) 

              args.labelStyle.size  = "8px"; 

         //… 

         else 

             args.labelStyle.size  = "20px"; 

       } 

} 

Sample 

https://stackblitz.com/edit/angularchartannotation-1rnpuz 

UG 

https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#labels-customization 

Kindly revert us, if you have any further queries. 

Regards, 

Durga G