Как изменить цвет линии зоны в старших чартах

Question

Я пытаюсь сделать линию, ведущую к точке на линейном графике, «красной», если точка находится ниже цели, а не наоборот (зеленая, пока не достигнет этой точки). Смотрите изображение ниже:

Итак, я говорю, что точка 19 марта правильна, если она зеленая, а линия с 19 марта по 19 апреля должна быть красной. А линия с 19 апреля по 19 мая должна быть зеленой. И линия с 19 мая по июнь должна быть красной и так далее ...

Это json, который я использую для генерации серии и зон:

А вот код для диаграммы (responsejs):

const options = {
      chart: {
        height: 280
      },
      title: {
        text: null
      },

      subtitle: {
        text: null
      },

      xAxis: settings.xAxis,

      yAxis: {
        title: {
          text: null
        },
        labels: {
          formatter: function() {
            let value = '';
            switch (settings.value_type) {
              case 'Percentage':
                value = `${this.value + '%'}`;
                break;
              case 'Numeric':
                value = `${this.value}`;
                break;
              case 'Currency':
                value = `${'$' + this.value}`;
                break;
              default:
                value = '';
                break;
            }
            return value;
          }
        },
        min: 0
      },

      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        enabled: false
      },

      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 0
        }
      },

      series: series,
      responsive: {
        rules: [
          {
            condition: {
              maxWidth: 500
            },
            chartOptions: {
              legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
              }
            }
          }
        ]
      },
      exporting: { enabled: false },
      credits: { enabled: false }
    };

Answer 1

Чтобы маркерная точка приняла цвет предыдущей зоны, вы можете добавить добавить небольшое значение после десятичной точки к каждому value свойству:

series: [{
    data: [23, 42, 52, 47, 64],
    zoneAxis: 'x',
    zones: [{
        value: 1.00001,
        color: 'green'
    }, {
        value: 2.00001,
        color: 'red'
    }, {
        value: 3.00001,
        color: 'green'
    }, {
        color: 'red'
    }]
}]

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/8ga2ce4j/

Справочник по API: https://api.highcharts.com/highcharts/series.line.zones.value