Search code examples
reactjsreact-chartjs

react-chart-js-2 units on y axis


I'm using react-chart-js-2 and I want to add units to the y-axis. There doesn't seem to be much documentation about the full range of options and the tutorials I found don't seem to be working. I want to add a £ sign to every value on the y axis of my line chart? I should just be able to use a callback function and add £ to the value string?

const options = {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Years'
            }
          }],
          yAxes: [{
            ticks: {
                beginAtZero: true,
                callback: value => `£${formatNumberDecimal(value)}`
            }
          }],
        }     
      }

This doesn't work, and when I dynamically change the input data, it crashes. How do I change the units?


Solution

  • I hope it's not too late!

    I don't know much about chart.js api, but i think you can't use ES6 arrow functions inside that callback, try with something like:

    callback: function (value) {
        return `£${value}k`;
    },
    

    Here is a working codesandbox example.