How to Format Axis Labels in Billions Using JavaScript Chart?

This article demonstrates how to format Y-axis labels in billions using the JavaScript Chart component.

When visualizing large numeric values—such as financial data or population figures—it’s often helpful to simplify axis labels for readability. For example, instead of showing 1000000000, we can display 1 billion on the axis, while still showing the full value in the tooltip.

To achieve this, you can use the axisLabelRender event in your chart configuration. This event allows you to intercept and customize each axis label before it’s rendered. In your implementation:

• Check if the label belongs to the primary Y-axis.
• Convert the label value from its raw number to billions by dividing it by 1,000,000,000.
• Format the result using toFixed(0) to round it to the nearest whole number.
• Append the word “billion” to the label for clarity.

Code Example

var chart = new ej.charts.Chart({
       axisLabelRender(args) {
           if(args.axis.name === 'primaryYAxis') {
               const value = Number(args.text);
               if (!isNaN(value)) {
                   const formattedValue = value / 1000000000; // Convert to billion
           args.text = formattedValue.toFixed(0) + ' billion'; // Display as "X billion"
               }
           }
       }
   });
   chart.appendTo('#bar-container'); 

Output

Live Sample

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to format axis labels in billions using JavaScript Chart.

You can refer to our JavaScript Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our JavaScript components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our JavaScript Chart and other JavaScript components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!