Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

Question

I'm plotting a revenue-time chart of a company.

Given a list of y-coordinates that represent value of revenue of a company over a period of time, how do I set the labels of the y-axis in a much readable manner than the default?

The revenue data (y-coordinates):

const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];

The corresponding times (x-coordinates):

const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"]; 

Based on the above revenueData the y-axis labels are as seen in the screenshot below:

Instead of displaying labels in the above format 350,000 and 200,000 I would like to display them as 350K and 200K, the format being the abbreviated version. Similar to the drawing below:

How do I achieve this?

Ideally, instead of hard-coding the label values in the mentioned format, the code must be able to configure it based on the y-coordinates given.

Here's my full JS code:

const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];

const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];  

const chartData = {
   labels: xAxisLabels,
   datasets: [{
      yAxisID: 'revenueAxis',              
      label: 'Revenue JPY',
      data: revenueData,
      fill: false,
      borderColor: 'red',
      backgroundColor: 'red'
   }],
};

const chartConfig = {
   type: "line",
   data: chartData,
   options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
         revenueAxis: {
            type: 'linear',
            position: 'left',
            grid: { display: false },
            ticks: { color: 'red', },
            font: { family: "Garamond",},
            title: {
               text: 'Revenue in JPY',
               display: true
            }
         },
         x: {
            grid: { display: false }
         }
      },
      plugins: {
         legend: { display: false },
         title: {
            display: true,
            text: 'Custom Chart Title',
            font: {
               size: 20,
               weight: 'normal',
            },
            padding: {
               top: 10,
               bottom: 30
            }
         }, 
      },
   }
};

const newChart = new Chart(document.getElementById('chartContainer'), chartConfig);

Answer 1

You can customize your y-axis labels like this:

const chartConfig = {
   type: "line",
   data: chartData,
   options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
         revenueAxis: {
            type: 'linear',
            position: 'left',
            grid: { display: false },
            ticks: { 
               color: 'red', 
               callback: (value) => {
                   return value / 1000 + 'k';
               },
            },
            font: { family: "Garamond",},
            title: {
               text: 'Revenue in JPY',
               display: true
            }
         },
         x: {
            grid: { display: false }
         },

...rest of code

The callback function gets the value of each label and returns that divided by 1000 and adds the letter "k" at the end. (If the value somehow gets passed as a string, add a "+" in front of value)