Site icon Puneet Sharma – Freelance Web Developer

Format the tick labels on the axis to add ‘k’ to the numbers that are above 1000

Format the tick labels on the axis to add 'k' to the numbers that are above 1000

In Chart.js, if you want to format the tick labels on the axis to add ‘k’ to the numbers that are above 1000, you can achieve this using the callback function in the ticks options of the chart’s configuration.

Here’s an example of how you can do it for a linear scale (y-axis) using Chart.js:

// Sample data
var data = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [
    {
      label: "Sample Data",
      data: [500, 1200, 800, 2500, 300],
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    },
  ],
};

// Chart configuration
var config = {
  type: "bar",
  data: data,
  options: {
    scales: {
      y: {
        ticks: {
          callback: function (value, index, values) {
            if (value >= 1000) {
              return value / 1000 + "k";
            } else {
              return value;
            }
          },
        },
      },
    },
  },
};

// Create the chart
var myChart = new Chart(document.getElementById("myChart"), config);
Exit mobile version