0

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.

1 respuesta 1

0

He conseguido el resultado que quería, incluyendo una función de control para pointBackgroundColor:

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)'],
    pointBackgroundColor: function(context) {
        var index = context.dataIndex;
        var value = context.dataset.data[index];
        if (value > 20) {
            return 'red'                    
        }
    },
    hoverBackgroundColor: ['rgba(255,99,132,0.4)'],
    borderWidth: 1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.