Соедините точки серии Highcharts x-range

Question

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

Я бы не хотел использовать SVGRenderer от Highchart, поэтому я ищу какое-либо другое решение для соединения стержней на моем xряд рядов

До сих пор я придумал следующую скрипку: jsFiddle

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
  },
  series: [{
    data: [{
      x: Date.UTC(2014, 10, 21, 7, 10),
      x2: Date.UTC(2014, 10, 21, 9, 25),
      y: 0,
      color: '#83d6e7'
    }, {
      x: Date.UTC(2014, 10, 21, 9, 25),
      x2: Date.UTC(2014, 10, 21, 10, 40),
      y: 1,
      color: '#669aab'
    }, {
      x: Date.UTC(2014, 10, 21, 10, 40),
      x2: Date.UTC(2014, 10, 21, 11, 41),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 11, 41),
      x2: Date.UTC(2014, 10, 21, 14, 14),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 14, 14),
      x2: Date.UTC(2014, 10, 21, 15, 13),
      y: 1,
      color: '#669aab'
    }]
  }]
});

Answer 1

Я придумала решение, которое удовлетворяет мои требования.Я буду использовать line series и просто скрою его за x-range series, используя zIndexes.

jsFiddle из вопроса был соответствующим образом обновлен.