score:2

Accepted answer

Tooltips can be modified thus

    <Line
      data={{
<snip>
      options={{
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "Hello",
          fontSize: 20
        },
        plugins: {
          tooltip: {
              callbacks: {
                  label: function(context) {
                      var label = context.dataset.label || '';
                      if (context.parsed.y !== null) {
                          label += ' ' +context.parsed.y + '%';
                      }
                      return label;
                  }
              }
          }
      },
        scales: {
          y: {
            min: 0,
            max: 100,
            ticks: {
              stepSize: 20,
              callback: function (value, index, values) {
                return value + " %";
              }
            }
          }
        },
        legend: {
          labels: {
            fontSize: 25
          }
        }
      }}
    />

score:1

You can edit the ticks property like this:

scales: {
    y: {
        min: 0,
        max: 100,
        ticks: {
            stepSize: 20,
            callback: function(value, index, values) {
                return value + " %";
            }            
        }
    }
},

Found that here: https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

Seems to do the trick:

enter image description here


Related Query

More Query from same tag