Thousand separator in pie chart of charts.js

Question

I 'm using Chart.js to draw pie chart.

To draw graph I used

var ctx = document.getElementById("myChart").getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: #{raw @labels.to_json},
          datasets: [{
          backgroundColor: #{raw @colors.to_json},
            data: #{@followers}
          }]
        }
      });

To clarify this data thing is like this

data: {
      labels: ["FAISAL","muhammadfaisali","faisaliqbal3699"],
      datasets: [{
      backgroundColor: ["#00b638","#efaa30","#50c8ea"],
        data: [500000, 75000, 100000]
      }]
    }

I need to show these data: [500000, 75000, 100000] as thousand separator like ["500,000", "75,000", "100,000"]

I tried different

things including writing this method

function separator(numbers)
      { data = []
        for (i = 0; i < numbers.length; ++i) {
          data.push(numbers[i].toLocaleString())
        }
        data
      }

and tried to use it like this

data: separator(#{@followers})

it format data as I want but gives error like Cannot read property 'custom' of undefined

What is the way to show data in thousand separator here

Can you check first [here](http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript)? You usually format your data right before rendering. Not sure when/if that happens in charts.js. The property error can occur when not all your data are integers? — Tim Vermaelen, Mar 31 '17 at 14:01

score 10 · Accepted Answer · answered Mar 31 '17 at 14:10

In order to do this in chart.js, you need to use the tooltips.callbacks.label callback property. The value returned from this callback is what is used to generate the tooltip text.

Here is your chart configured with a tooltip callback that uses the local string representation for your data value.

var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["FAISAL","muhammadfaisali","faisaliqbal3699"],
    datasets: [{
      backgroundColor: ["#00b638","#efaa30","#50c8ea"],
      data: [500000, 75000, 100000]
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Employee Overview',
      fontStyle: 'bold',
      fontSize: 20
    },
    tooltips: {
      callbacks: {
        // this callback is used to create the tooltip label
        label: function(tooltipItem, data) {
          // get the data label and data value to display
          // convert the data value to local string so it uses a comma seperated number
          var dataLabel = data.labels[tooltipItem.index];
          var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

          // make this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]])
          if (Chart.helpers.isArray(dataLabel)) {
            // show value on first line of multiline label
            // need to clone because we are changing the value
            dataLabel = dataLabel.slice();
            dataLabel[0] += value;
          } else {
            dataLabel += value;
          }

          // return the text to display on the tooltip
          return dataLabel;
        }
      }
    }
  }
});

You can see it in action at this codepen.

Thousand separators should be driven by localisation, this solution, albeit correct for non-localised scenarios, does not take this into consideration. I.e en = 1,000.00, pt = 1.000,00 — Pedro Borges, Nov 21 '18 at 15:54

Thousand separator in pie chart of charts.js

1 Answers1