Временная диаграмма Highcharts с несколькими осями

Question

Я пытаюсь реализовать диаграмму Highcharts timeline с двумя xAxis - одним типом timeline и другим типом datetime, показывающими те же данные. Мне удалось это сделать, но у меня проблемы с позицией dataLabels на timeline xAxis.

1. Я не хочу, чтобы метки чередовались, поэтому я использовал alternate: false, но я хочу, чтобы они отображались сверху xAxis, а не снизу - что, по-видимому, поведение по умолчанию с alternate: false.
2. Мне бы хотелось связать два xAxis - когда пользователь наводит курсор на точку на одном из xAxis, точка должна быть выделена на обеих осях.
3. Можно ли увеличить высоту ящиков по оси timeline и показать dataLabels внутри ящиков?

После этого вы можете увидеть скриншот текущего версия и jsFiddle живое демо:

Живое демо: - https://jsfiddle.net/wyek8t09/

Answer 1

1. Установить для свойства distance какое-либо отрицательное значение

---

series: [{
  dataLabels: {
    alternate: false,
    distance: -90
  },
  ...
}, ...]

Изменить внешний вид в state свойствах. Используйте события mouseOver и mouseOut для соединения точек и метод setState для изменения их состояния.

---

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1
      }
    },
    marker: {
      states: {
        hover: {
          fillColor: 'red'
        }
      }
    },
    point: {
      events: {
        mouseOver: function() {
          var secondSeriesI = this.series.index ? 0 : 1,
            secondSeries = this.series.chart.series[secondSeriesI];

          secondSeries.points[this.index].setState('hover');
        },
        mouseOut: function() {
          var secondSeriesI = this.series.index ? 0 : 1,
            secondSeries = this.series.chart.series[secondSeriesI];

          secondSeries.points[this.index].setState('');
        }
      }
    }
  }
}

Увеличить значение в marker.height свойстве:

---

series: [{
  dataLabels: {
    alternate: false,
    distance: 0,
    marker: {
      height: 150
    }
  },
  ...
}, ...]

---

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

Справочник по API:

https://api.highcharts.com/highcharts/series.timeline.marker

https://api.highcharts.com/highcharts/series.timeline.marker.states.hover

https://api.highcharts.com/highcharts/series.timeline.states.inactive

https://api.highcharts.com/class-reference/Highcharts.Point#setState

https://api.highcharts.com/highcharts/series.timeline.dataLabels.distance