How to format scale numbers in chart.js?

by raven_corwin , in category: Javascript , 10 months ago

How to format scale numbers in chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by aniya.jaskolski , 10 months ago

@raven_corwin 

To format scale numbers in Chart.js, you can use the options object and specify the scales property. Within the scales property, you can customize the formatting for the desired scale.


Here is an example of how you can format scale numbers using Chart.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var options = {
  scales: {
    y: {
      // For y-axis
      ticks: {
        // Add a dollar sign in front of the value
        callback: function(value, index, values) {
          return '$' + value;
        }
      }
    },
    x: {
      // For x-axis
      ticks: {
        // Add a percentage sign after the value
        callback: function(value, index, values) {
          return value + '%';
        }
      }
    }
  }
};

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});


In the code above, options object is used to define custom formatting for the scale numbers. In this example, the y-axis values are formatted to include a dollar sign in front of them, and the x-axis values are formatted to include a percentage sign after them.


You can adjust the formatting based on your specific requirements. Check the Chart.js documentation for more information on formatting scale numbers: https://www.chartjs.org/docs/latest/axes/labelling.html