I have a single dataset for line chart and I need to conditionally color the line based on Y value to show if thresholds are exceeded (from both top and bottom). And I can't figure out a proper approach to do so and I start to think that might not be possible without complex algorithm. I can't find any plugins, either.
What I have tried:
1) First approach is I've created an extension for line chart like this:
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
draw: function (ease) {
const
meta = this.getMeta(),
points = meta.data || [],
colorss = this.getDataset().colorss,
area = this.chart.chartArea,
originalDatasets = meta.dataset._children
.filter(function (data) {
return !isNaN(data._view.y);
});
function _setColor(newColor, meta) {
meta.dataset._view.borderColor = newColor;
}
for (let i = 0; i < meta.dataset._children.length; i++) {
const slicer = i + 2;
if (meta.dataset._chart.config.data.datasets[0].data[i].y < 5) {
_setColor('yellow', meta);
} else {
_setColor('red', meta);
}
meta.dataset._children = originalDatasets.slice(i, slicer);
meta.dataset.draw();
meta.dataset._children = originalDatasets;
}
points.forEach(function (point) {
point.draw(area);
});
},
});
and overall it SORTA do what it's supposed to but the problem with this approach is that it's CHART POINT related and often the change should be between the points so on the part of line where I have no measurement for Y value. So I've given up the idea and tried another one.
2) This approach is based on creating separate dataset for every changed color on the line so I just iterate over the dataset and if threshold is changed then I create another dataset e.g.:
[-3,-2,-1,0,1,2,3]
threshold is value has to be between [-1,1]
so I create 3 datasets:
[-3,-2], [-1,0,1], [2,3]
and I attach the correct color to every dataset. The problem with this approach is that the chart is empty between the measured points. The X axis is datetime and let's assume that -2 is 04/05/2020 and -1 is 05/05/2020 then there is an empty space between 04/05/2020 and 05/05/2020. And even if there would be an option to artificially approximate the missing line, there would be again the same problem, the approximated line would have to be 50% green and 50% red which is just the assumption of where crossing the edge condition should be.
My question is should I just give up the Chart.Js and use something different? If so then what library provides such functionality preferably out of the box? And if it's doable what would be the correct approach?
The app is latest angular webapp that gets the data from .net core REST API. We need support for current browsers.