Background:
Wijmo's FlexChart is highly customizable, and this pertains to the axis labels as well. Many times, the values associated with the axis labels are large and users may want these values abbreviated.
Steps to Complete:
1. Add the itemFormatter property on your flex chart axis element
2. Use the itemFormatter function to format the label into an abbreviated value
Getting Started:
Add the itemFormatter property on your flex chart axis element
To start off have your flexChart created and data binded to it. The first step to abbreviating the label value is to add the itemFormatter property of the Axis class to your <wj-flex-chart-axis> element.
<wj-flex-chart
[header]="'Tasty Food Awards'"
[bindingX]="'country'"
[selectionMode]="'Point'"
[itemsSource]="data"
[palette]="[
'rgba(42,159,214,1)',
'rgba(119,179,0,1)',
'rgba(153,51,204,1)',
'rgba(255,136,0,1)',
'rgba(204,0,0,1)',
'rgba(0,204,163,1)',
'rgba(61,109,204,1)',
'rgba(82,82,82,1)',
'rgba(0,0,0,1)'
]"
>
<wj-flex-chart-legend [position]="'Bottom'"> </wj-flex-chart-legend>
<wj-flex-chart-axis
wjProperty="axisY"
[itemFormatter]="itemFormatter"
></wj-flex-chart-axis>
<wj-flex-chart-series [name]="'2014'" [binding]="'2014'">
</wj-flex-chart-series>
<wj-flex-chart-series [name]="'2015'" [binding]="'2015'">
</wj-flex-chart-series>
<wj-flex-chart-series [name]="'2016'" [binding]="'2016'">
</wj-flex-chart-series>
<wj-flex-chart-animation></wj-flex-chart-animation>
</wj-flex-chart>
Use the itemFormatter function to format the label into an abbreviated value
Then, use the itemFormatter function and check if the label's value is greater than 1000, and if it is we take the label's value and divide it by 1000 and use the toFixed method to ensure that the result has one decimal place. This value is the set as a template literal as the label's text. For more info on customizing axis labels, please see our custom axis label demo.
<wj-flex-chart-axis
wjProperty="axisY"
[itemFormatter]="itemFormatter"
></wj-flex-chart-axis>
itemFormatter(
_: any,
label: { val: any; text: string; pos: Point; cls: string }
) {
if (label.val >= 1000) {
label.text = `${(label.val / 1000).toFixed(1)}k`; // Abbreviate large numbers with 'k'
}
return label;
}
And that's it! Your label's text values should be abbreviated to show k values. This approach can be used to abbreviate any large values that you like. You just need to adjust the expression to convert the value. If you would like to see the code used you can find an example application showcasing how to abbreviate large values to k values here.
Happy coding!

Andrew Peterson