4👍
✅
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
}
}
}}
/>
3👍
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:
Source:stackexchange.com