I need to draw icon 'Attention' instead x-axis value on the ChartJS diagram.
Here is example, how i want to do: https://i.stack.imgur.com/XSsTM.jpg
Is that possible to draw something by conditional in options?
I can change number, return text, but i realy don't know how to draw icon instead value
this.datacollection = {
labels: [
{label: 16, flag: false},
{label: 17, flag: false},
{label: 18, flag: true},
{label: 19, flag: true},
{label: 20, flag: false},
{label: 21, flag: false},
],
datasets: [
{
label: 'Something',
data: [4, 4, 3, 5, 4, 3, 4, 3, 4, 4, 5, 6, 3, 3],
backgroundColor: 'rgba(37,255,63,0.2)',
borderColor: 'rgba(37,255,63,1)',
borderWidth: 2
},
{
label: 'wrong',
data: [2, 2, 3, 5, 3, 6, 4, 2, 2, 5, 5, 6, 7, 7],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2
}
],
};
...
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
userCallback: function (label, index, labels) {
if (label.flag) {
return 'here i need an icon'
} else {
return label.label;
}
}
}
}],
}