score:2

i suggest using this mathematical concept: https://en.wikipedia.org/wiki/line%e2%80%93line_intersection but it works only for straight lines, so if you want to use it, you will have to change the type of your chart from areasplinerange to arearange.

js function that checks intersection coordinates:

function checklineintersection(a1, a2) {
  if (a1 && a2) {
    var sax = a2.x - a1.x,
      say = a2.high - a1.high,
      sby = a2.low - a1.low,
      sabx = a1.plotx - a2.plotx,
      saby = a1.high - a1.low,
      u,
      t;


    u = (-say * sabx + sax * saby) / (-sax * say + sax * sby);
    t = (sax * saby - sby * sabx) / (-sax * say + sax * sby);

    if (u >= 0 && u <= 1 && t >= 0 && t <= 1) {
      return {
        plotx: a1.x + (t * sax),
        ploty: a1.high + (t * say)
      };
    }
  }

  return false;
}

and highcharts approach to calculate the zones and properly update series:

chart: {
  events: {
    load() {
      let chart = this,
        series = chart.series[0],
        data = series.data,
        cross,
        negative = true,
        howmanyintersections = 0,
        zones = [];

      data.foreach((point, i) => {
        if (point.low > point.high && negative) {
          howmanyintersections++;
          negative = !negative;
          cross = checklineintersection(data[i - 1], point)
          zones.push({
            value: cross.plotx,
            fillcolor: 'red'
          })
        } else if (point.low < point.high && !negative) {
          howmanyintersections++;
          negative = !negative;
          cross = checklineintersection(data[i - 1], point)
          zones.push({
            value: cross.plotx,
            fillcolor: 'green'
          })
        }
      })

      if (howmanyintersections % 2) {
        zones.push({
          fillcolor: 'green'
        })
      } else {
        zones.push({
          fillcolor: 'red'
        })
      }

      series.update({
        zones: zones
      })

    }
  }
},

jsfiddle: https://jsfiddle.net/blacklabel/0qzsm83j

i've got the power!


Related Query

More Query from same tag