Chart.js tooltip format number with commas

Chart.js V2.0 is a useful javascript charting library. It looks great, has ton of features though it is new enough that there is still some work to find out how to get some relatively simple things done.

In this case I wanted to format the chart’s tooltip. Tooltips are the pop-ups that show when you hover mouse over a bar or line in a chart and show the yAxis value along with any other information you want to include.

By default Chart.js tooltips do not format numbers with commas and there was no simple option to do this.

Instead after some Googling about I found out it required using Chart.js callbacks feature which can be used to format chart elements. Note V1 used a different method that modified tooltip template but that is deprecated in V2.0.

The callback is in the Options’ tooltips section. You put function into the callback that uses regex to insert commas.

callbacks: {
    label: function(tooltipItem, data) {
        return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
},

This can be done as a global change to all charts in the page or just to a specific chart which is what I used and is shown in the example below.

The result is that the tooltip now has a commas.

chartjs tooltip number comma




7 thoughts on “Chart.js tooltip format number with commas”

  1. Add this in order show the label name before the value, when you have multiple datasets:

    tooltips: {
    mode: ‘index’,
    label: ‘myLabel’,
    callbacks: {
    label: function(tooltipItem, data) {
    return data.datasets[tooltipItem.datasetIndex].label + ‘: ‘+ tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “.”);
    }
    }
    }

  2. HI, thank you for the great / helpful article.
    In the article you mentioned that the callback function can be “done as a global change to all charts in the page or just to a specific chart”.
    Can you please share how it can be done globally?
    Thank you.

    1. Hey Guntar, glad it was helpful!

      Chart.js has a concept called “global parameters” that allows you to specify chart options as separate functions and they will apply to all charts. This is nice feature so you do not have to repeat same function in multiple charts.

      The ‘global parameters’ options are described in documentation

      I haven’t tested this but I think this should be global definition for the tool tip option in my example:

      Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
      return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      },

      1. Thank you Curtis for help!
        I got it working, below is my version on how to set, in my case, Tooltip options globally and format as Currency
        “`
        import Chart from ‘chart.js’
        Chart.defaults.global.tooltips.backgroundColor = ‘rgba(50,50,50,0.8)’;
        Chart.defaults.global.tooltips.titleFontSize = 14;
        Chart.defaults.global.tooltips.bodyFontSize = 14;
        Chart.defaults.global.tooltips.xPadding = 10;
        Chart.defaults.global.tooltips.titleMarginBottom = 8;
        Chart.defaults.global.tooltips.position = ‘nearest’;
        Chart.defaults.global.tooltips.displayColors = false;
        Chart.defaults.global.tooltips.callbacks.label = (tooltip) => this.currency(tooltip.value);

        currency(value){
        return ‘$’+value.replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
        }
        “`

Leave a Reply to Paulo Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.