Highcharts – linear regression that changes according to vertical line

Here is my attempt, please take a look at it: https://jsfiddle.net/BlackLabel/prq563Ly/

  1. 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
            }
          })
        }
      }
    
  2. 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.

Leave a Comment

Your email address will not be published.

Scroll to Top