How to change axis text
Hi,
You can achieve the mentioned requirement by formatting the text using either the axisLabelFormatter callback or the numberFormat property. As the mentioned range is very high, we have used the LogarithmicAxis as the primaryYAxis. Similarly, you can achieve the expected output by using the NumericAxis or LogarithmicAxis as the primaryYAxis, based on your requirement.
If you need to format the text for only the 1000 and 100000 values specifically or you need to format the text of the y-axis based on some conditions, then you can use the axisLabelFormatter callback of the primaryYAxis as shown in the code snippet below.
|
primaryYAxis: LogarithmicAxis( axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) { if (axisLabelRenderArgs.text == '1000') { return ChartAxisLabel( '1 thousand', axisLabelRenderArgs.textStyle, ); } else if (axisLabelRenderArgs.text == '1000000') { return ChartAxisLabel( '1 million', axisLabelRenderArgs.textStyle, ); } else { return ChartAxisLabel( axisLabelRenderArgs.text, axisLabelRenderArgs.textStyle, ); } }, ), |
Snapshot :
Formatting the text which has 1000 and 1000000 using axisLabelFormatter callback.
If you need to format the text of all the y-axis, then you can achieve it by setting the NumberFormat.compactLong to the numberFormat property of the primaryYAxis as shown in the code snippet below.
|
primaryYAxis: LogarithmicAxis( numberFormat: NumberFormat.compactLong(), ), |
Snapshot :
Formatting all the text of the y axis using numberFormat property.
Note : You need to import intl package for formatting the labels using the NumberFormat class.
Shared the User Guide Documentation links below regarding the axisLabelFormatter callback and numberFormat property for your reference.
Axis Label Formatter – https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter.
Number Format - https://help.syncfusion.com/flutter/cartesian-charts/axis-types#formatting-the-labels.
Also attached the sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: 185130_fc6e5fdf.zip
Hi Melvin Baker,
You can achieve the mentioned requirement by formatting the text using either the axisLabelFormatter callback or the numberFormat property. If you need to format the text based on some conditions, then you can use the axisLabelFormatter callback of the primaryYAxis. Otherwise, If you need to format the text of all the y-axis, then you can achieve it by setting the NumberFormat.compactLong to the numberFormat property of the primaryYAxis.
Note : You need to import intl package for formatting the labels using the NumberFormat class.
Shared the User Guide Documentation links below regarding the axisLabelFormatter callback and numberFormat property for your reference.
Axis Label Formatter – https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter.
Number Format - https://help.syncfusion.com/flutter/cartesian-charts/axis-types#formatting-the-labels.
Kindly refer the code snippet below :
|
primaryYAxis: LogarithmicAxis( // numberFormat: NumberFormat.compactLong(), axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) { if (axisLabelRenderArgs.text == '1000') { return ChartAxisLabel( '1 thousand', axisLabelRenderArgs.textStyle, ); } else if (axisLabelRenderArgs.text == '1000000') { return ChartAxisLabel( '1 million', axisLabelRenderArgs.textStyle, ); } else { return ChartAxisLabel( axisLabelRenderArgs.text, axisLabelRenderArgs.textStyle, ); } }, ), |
Snapshot :
Using axisLabelFormatter callback based on some conditions.
Formatting all the text of the y axis using numberFormat property.
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
