0👍
The required behaviour is achievable in Highcharts by using zones
, but requires some customization if you want to apply the duration check.
Below is an example of adding zones dynamically, based on point value and trend time length.
chart: {
type: 'line',
events: {
load: function() {
const zones = [];
const sixMinutes = 1000 * 60 * 6;
function updateTime(timeObj, color, timestamp) {
// check time for other colors
for (let key in timeObj) {
if (key !== color && key !== 'passed' && timeObj[key]) {
if (timeObj.passed > sixMinutes) {
zones.push({
color: 'grey',
value: timeObj[key]
}, {
value: timeObj[key] + timeObj.passed,
color: key
});
}
timeObj[key] = 0;
timeObj.passed = 0;
}
}
// save current trend
if (timeObj[color]) {
timeObj.passed = timestamp - timeObj[color];
} else {
timeObj[color] = timestamp;
}
}
this.series.forEach(s => {
const time = {
green: 0,
orange: 0,
red: 0,
passed: 0
};
s.points.forEach(p => {
if (p.y > 50 && p.y < 70) {
updateTime(time, 'green', p.x);
} else if (p.y > 70 && p.y < 90) {
updateTime(time, 'orange', p.x);
} else if (p.y > 90) {
updateTime(time, 'red', p.x);
} else {
updateTime(time, null, p.x);
}
});
s.update({
zones
});
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/jt0p9a3d/
API Reference: https://api.highcharts.com/highcharts/series.line.zones
Docs: https://www.highcharts.com/docs/chart-concepts/series#zones
Source:stackexchange.com