mercredi 9 juin 2021

ChartJS 2.9.3 change background color when the curve passes over an axis

I wanted to know if it was possible to change background color over some dataset values. I've seen that this guy

Here is what I want. The upper part in green (above the line) and the bottom part in red (under the line).

enter image description here

I saw that this person managed to do almost what I wanted but my concern is that I would like the background color to change depending on two values. The one of the "CA" and the other one with the "objectif".

Thanks you !

Chart.defaults.mygraph = Chart.defaults.line;
Chart.controllers.mygraph = Chart.controllers.line.extend({
update: function(reset) {

        console.log("Values DATASET 1 : " + this.chart.data.datasets[0].data);
        console.log("Values DATASET 2 : " + this.chart.data.datasets[1].data);

        for (i = 0; i < this.chart.data.datasets[1].data.length; i++) {
            var goal = this.chart.data.datasets[1].data[i];

            var yAxis = this.chart.scales['y-axis-0'];
            var max = Math.max.apply(null, this.chart.data.datasets[0].data);
            var yTop = yAxis.getPixelForValue(max);
            var yGoal = yAxis.getPixelForValue(goal);
            var min = Math.min.apply(null, this.chart.data.datasets[0].data);
            var yBottom = yAxis.getPixelForValue(min);

            // build a gradient that changes the color at the goal
            var ctx = this.chart.chart.ctx;
            var gradient = ctx.createLinearGradient(0, yTop, 0, yBottom);
            var ratio = Math.min((yGoal - yTop) / (yBottom - yTop), 1);
            gradient.addColorStop(0, 'green');
            gradient.addColorStop(ratio, 'green');
            gradient.addColorStop(ratio, 'red');
            gradient.addColorStop(1, 'red');
            this.chart.data.datasets[0].backgroundColor = gradient;
        }

        return Chart.controllers.line.prototype.update.apply(this, arguments);
    }
});

var options = {
    type: 'mygraph',
    data: {
        labels: monthLabel,
        datasets: [{
                label: "CA",
                fill: "+1",
                backgroundColor: "rgba(244,68,54,0.25)",
                borderColor: "rgba(244,68,54,0.85)",
                data: CA,
            },
            {
                label: "Objectif",
                fill: "-1",
                borderWidth: 1 / ratioResp,
                borderColor: "rgba(179, 179, 179,1)",
                data: objectif,
            }
        ]
    }
}

var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);



Aucun commentaire:

Enregistrer un commentaire