Chart JS Axis Labels

Chart JS Axis Labels

With Chart.js we can customize the axis labels. This can be very useful if we need to modify the text for better user experience. By default the ticks can values or string text.

However, if we work with currencies we might want to add currency symbols such as a dollar sign ($) or text to either the X axis or Y axis.

Let’s explore how to do this both on the X axis scale and the Y axis scale in Chart.js.

Video Chart JS X Axis Labels

This video shows you how to modify the in Chart.js the X Axis Labels. To do this we use the boiler template from the Chart.js getting started page.

Snippets X Axis Labels in Chart.js

This is the snippet used in the video for changing the X Axis Labels in Chart.js. Which is slightly different compare to adjusting the Y Axis labels.

scales: {
  x: {
    title: {
      display: true,
      text: 'Earnings Per Day',
      color: 'blue'
    },
    ticks: {
      callback: function(value, index, values){
        return `Sales: ${this.chart.data.labels[index]}`;
        }
      }
    }
  }
}

Video Chart JS Y Axis Labels

This second video shows you how to modify the in Chart.js the Y Axis Labels. To do this we use again the boiler template from the Chart.js getting started page.

Snippets Y Axis Labels in Chart.js

This is the snippet used in the video for changing the Y Axis Labels in Chart.js. Specifically adjusting the title of the y scale and adding a $ currency sign in front of each tick label.

scales: {
  y: {
    beginAtZero: true,
    title: {
      display: true,
      text: 'Values in $'
    },
    ticks: {
      callback: ((value, index, values) => {
        return `$ ${value}`
      })
    }
  }
}