Search code examples
chart.jsnumber-formattingseparator

Charts.js is automatically adding comma as thousands separator when it shouldn't

Charts.js is abusively adding comma separator between thousands while is nowhere set to do this. To all floats. To the axis, labels, tooltips, everywhere possible and on all types of charts. enter image description here

I am in EU, so the computer, browser, locales have nothing to do with EN/US. Nowhere in the code is specified to add these commas to numbers. The underlying data does not contain commas either:

[{continent:"Africa",value:14802.32},{continent:"Asia",value:6783.37},...]

This is very annoying, unacceptable for my (French) customer.

Is it a bug ? Or please be kind and provide the way how to remove comma everywhere.

Solution

  • You must be doing something wrong because by default the data is seperated by dots, so you must have specified it somewhere. But you can configure it by using the locale property:

    var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12000.5, 19000, 3000, 5000, 2000, 3000],
      borderColor: 'pink'
    }]
  },
  options: {
    //locale: 'en-EN' // Uncomment this line for "wrong" options
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
    <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>