He intentado cambiar el color de varios puntos de mi gráfica creada con Chart.js pero no lo he conseguido. Lo que quiero es destacar en color ROJO los puntos que superen un valor dado. El color por defecto es el verde.
<div align='center'><canvas id='grafico' name='grafico' width='250vw' height='80vw'></canvas></div>
El codigo donde genero el grafico es el siguiente:
var ctx_gp = document.getElementById("grafico");
var chart_datlog = new Chart(ctx_gp, {
type: 'line',
data: {
labels : ["18:21:00","18:26:00","18:31:00","18:36:00","18:41:00","18:46:00","18:51:00","18:56:00","19:01:00","19:06:00","19:11:00","19:16:00","19:21:00","19:26:00","19:31:00","19:36:00","19:41:00","19:46:00","19:51:00",
datasets: [{
type: 'line',
label: "Temperatura",
yAxisID: 'A',
data :[21.4,21.3,20.7,20.5,20.3,20.2,20.2,20.1,20,19.9,19.7,19.5,19.3,19.2,19,18.8,18.7,18.5,18.4,18.3],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255,99,132,1)'],
hoverBackgroundColor: ['rgba(255,99,132,0.4)'],
borderWidth: 1
}, {
type: 'line',
label: "Humedad",
yAxisID: 'B',
data: [76.9,59.8,61.9,62.4,63,62.9,63.1,63.1,63.2,63.2,63.4,64.1,64.7,65.1,65.6,65.8,66.2,66.4,66.7,67],
fill: false,
borderColor: '#71B37C',
pointBorderColor: '#71B37C',
pointHoverBackgroundColor: '#71B37C',
pointHoverBorderColor: '#71B37C'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'ºC'
}
}, {
id: 'B',
type: 'linear',
position: 'right',
}]
}
}
});
Para cambiar el color de los puntos que cumplan la condicion, he creado esta funcion:
for (i = 1; i < chart_datlog.data.datasets[0].data.length - 1; i++) {
if (chart_datlog.data.datasets[0].data[i] > 20) {
chart_datlog.data.datasets[0].pointBackgroundColor = "#ea042a";
chart_datlog.data.datasets[0].pointRadius = 5;
chart_datlog.update();
}
}
Lo unico que consigo es cambiar todos los puntos al mismo color (rojo), y lo que yo quiero cambiar son los puntos cuyo valor sea mayor de 20
Gracias a todos por la ayuda.