Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 355
Davtho1983 Avatar asked Apr 18 '26 12:04

Davtho1983


1 Answers

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.

like image 61
Pascal Arevalo Avatar answered Apr 21 '26 02:04

Pascal Arevalo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!