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).
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