Highchart, как создать диаграмму типа леденца на палочке с кругом и линией сверху / снизу в разных позициях

Question

Я ищу график, чтобы показать серию с высоким низким и средним. High / Low отражается координатой y значений high / low, а окружность - координатой y среднего значения.

Любые предложения о том, как этого добиться с помощью старших (в reactjs)?

Спасибо, Реувен

Answer 1

Я думаю, что самый простой способ добиться этого - добавить каждую группу категорий в отдельную серию и динамически добавить среднюю точку для группы.

Демонстрация: https://jsfiddle.net/BlackLabel/ytfquvhg/

  chart: {
    events: {
      load() {
        let chart = this;

        chart.series.forEach(s => {
          let avrPoint = s.yData.reduce((a, b) => a + b, 0) / s.yData.length
          s.addPoint({
            y: avrPoint,
            x: s.points[0].x,
            marker: {
              enabled: true
            },
            name: 'average'
          })
        })
      }
    }
  },

API: https://api.highcharts.com/highcharts/chart.events.load