Here is my attempt, please take a look at it: https://jsfiddle.net/BlackLabel/prq563Ly/
We need to add the regression line on the initial chart load:
events: { load() { let chart = this, newData = []; chart.series[0].data.forEach(d => { if (d.category > firstInitialX && d.category < secondInitialX) { newData.push([d.category, d.x]) } }); chart.addSeries({ regression: true, name: 'Test input', color: 'rgba(223, 83, 83, .5)', data: newData, regressionSettings: { enableMouseTracking: false } }) } }
We need to update the regression line data after dragging the annotations:
Highcharts.each(Highcharts.charts, function(chart) { if (chart !== thisChart) { chart.annotations[index].update({ labels: [{ point: { x: newX } }], shapes: [{ points: [{ x: newX, xAxis: 0, y: 0 }, { x: newX, xAxis: 0, y: 1000 }] }] }); } let firstAnnotation = chart.annotations[0].shapes[0].points[0].x; let secondAnnoation = chart.annotations[1].shapes[0].points[0].x chart.series.forEach(s => { if (s.data.length !== 500) { s.remove() } }) chart.series[0].data.forEach(d => { if (d.category > firstAnnotation && d.category < secondAnnoation) { newData.push([d.category, d.x]) } }); chart.addSeries({ regression: true, name: 'Test input', color: 'rgba(223, 83, 83, .5)', data: newData, regressionSettings: { enableMouseTracking: false } }) }); }
Let me know what do you think about this kind of solution. Feel free to improve it.
CLICK HERE to find out more related problems solutions.