How to Format Number in ChartJS?

Last Updated : 23 Jul, 2025

Chart.js is a popular open-source JavaScript library. It helps to represent data in an easy-to-understand manner. Chart.js provides various ways to customize the number formats in tooltips, axis labels, and data points, such as using callbacks within Chart.js itself or integrating external libraries like Numeral.js for advanced formatting options.

Below are the different approaches to format numbers in Chart.js:

Table of Content

Basic Formatting with Callbacks
Using external libraries

Basic Formatting with Callbacks

Set up the basic HTML and CSS structure.
Include the Chart.js CDN and the data labels plugin using <script> tags.
Create a new Chart object with the desired chart type (e.g., bar or line).
After that define the data and configuration for the chart, specifying labels and corresponding values.
Then implement the callback function to format numbers in the y-axis or tooltips.

Example: This illustrates a responsive bar chart using Chart.js with basic number formatting in the y-axis using callbacks.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Number Formatting - Basic Approach</title>
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
          rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Approach 1: Basic Formatting with Callbacks</h1>
        <div class="example">
            <canvas id="chart1"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx1 = document.getElementById('chart1').getContext('2d');
        const chart1 = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [1200, 1900, 300, 500, 2000, 3000],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        ticks: {
                            callback: function (value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

CSS

/* Write CSS Here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: #11f505;
    text-align: center;
}

.container {
    width: 90%;
    max-width: 800px;
}

.example {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
}

Output:

compressed_callback — Output : Using Callbacks

Using external libraries

Set up the basic HTML and CSS structure.
Include the Chart.js CDN and Numeral.js using <script> tags.
Create a new Chart object with the context, specifying the chart type (line in this case).
Define the data for the chart.
Use the Numeral.js library in the tooltips callbacks to format the numbers as currency.

Example: This code creates a responsive line chart using Chart.js with custom tooltip formatting that displays revenue values in currency format using the Numeral.js library.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Chart.js Number Formatting - Advanced Approach</title>
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
          rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Approach 2: Formatting with Numeral.js</h1>
        <div class="example">
            <canvas id="chart2"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js">
    </script>
    <script>
        const ctx2 = document.getElementById('chart2').getContext('2d');
        const chart2 = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May'],
                datasets: [{
                    label: 'Revenue',
                    data: [2500, 4000, 1200, 8000, 15000],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                return numeral(tooltipItem.parsed.y).format('$0,0.00');

                            }
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

CSS

/* Write CSS Here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: #11f505;
    text-align: center;
}

.container {
    width: 90%;
    max-width: 800px;
}

.example {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
}

Output:

compressed_Library — Output : Using external libraries

skaftafh

Improve

Article Tags :

How to Format Number in ChartJS?

Basic Formatting with Callbacks

Using external libraries

Explore

JavaScript Basics

Array & String

Function & Object

OOP

Asynchronous JavaScript

Exception Handling

DOM

Advanced Topics

Thank You!

What kind of Experience do you want to share?