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

Answer 1

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.