cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

How to format yAxis.labels and series.dataLabels with zero fill to the left?

On a column chart I need to format yAxis.labels and series.dataLabels to a maximum of three whole digits and when the value is less than three digits, it must be zero filled to the left.
E.g.:
22 should be 022
1 should be 001
343 should be 343

I have used format: "{value:.0f}" set on yAxis.labels and get no decimal places as expected.
However, using format: "{value:03.0f}" does not zero fill but still renders no decimal places.

Also, setting format: "{value:.0f}" or format: "{value:03.0f}", on the series.dataLabels object just removes the data labels completely.


What am I missing?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to format yAxis.labels and series.dataLabels with zero fill to the left?

Hello cosmokenney!
We appreciate you reaching out to us!

Sadly, leading zeros are not support in format property. You can achieve this look of labels and data labels using the formatter property with a custom function, like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/k5gbfdwc/
API Reference: https://api.highcharts.com/highcharts/x ... .formatter
https://www.highcharts.com/docs/chart-c ... 1649064166

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”