I try to create a line-chart with numbers for the x-axis (the ‘kw’ value), but it only works if the value is in string format. I use a callback function to add a string to the value in the legend. How can I create the chart with numbers from the data and add a string to it for the legend?
I hope you can see in my example what I mean.
With String:
var dString = [{
kw: '1',
wert: 120
},
{
kw: '2',
wert: 125
},
{
kw: '3',
wert: 110
}
];
var dNumber = [{
kw: 1,
wert: 120
},
{
kw: 2,
wert: 125
},
{
kw: 3,
wert: 110
}
];
dia(dString, 'dia');
dia(dNumber, 'dia2');
function dia(d, id) {
var configDia = {
data: {
datasets: [{
type: 'line',
label: 'Ist',
data: d,
parsing: {
xAxisKey: 'kw',
yAxisKey: 'wert'
}
}]
},
options: {
scales: {
x: {
ticks: {
display: true,
callback: function(value, index, ticks) {
return `KW ${this.getLabelForValue(value)}`;
}
}
},
y: {
ticks: {
callback: function(value, index, ticks) {
return value + '%';
}
}
}
}
}
};
var ctx = document.getElementById(id);
var myChart = new Chart(ctx, configDia);
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas id="dia"></canvas>
<canvas id="dia2"></canvas>