Выровнять xAxis через диаграммы строк/столбцов

Question

Я не могу получить свое общее datetime xAxis, чтобы визуально выстроить линию по диаграммам линий и столбцов. Я хочу, чтобы перекрестие двигалось взад-вперед.

Вот строки и столбца диаграммы с синхронизированными перекрестия, чтобы продемонстрировать:

https://jsfiddle.net/aadhoc331/9xodqw4u/

(Примечание: Я на самом деле с помощью текущей версии Highstock, но скрипку минимальный пример)

Обязательный код (перейти на скрипку, а):

$('<div class="chart">') 
    .appendTo('#container') 
    .highcharts({ 
     title: { 
      text: 'Chart A', 
     }, 
     chart: { 
      type: 'line' 
     }, 
     xAxis: { 
      type: 'datetime', 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: undefined 
      }, 
      labels: { 
       enabled: false, 
      }, 
     }, 
     series: [ 
      { 
       name: 'Line', 
       type: 'line', 
       data: [ 
        [1072915200000, 8000], 
        [1104537600000, 9000], 
        [1136073600000, 10000], 
        [1167609600000, 11000], 
        [1199145600000, 12000], 
        [1230768000000, 13000], 
        [1262304000000, 14000], 
        [1293840000000, 15000], 
       ] 
      } 
     ] 
    }); 

$('<div class="chart">') 
    .appendTo('#container') 
    .highcharts({ 
     title: { 
      text: 'Chart B', 
     }, 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      type: 'datetime', 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: undefined 
      }, 
      labels: { 
       enabled: false, 
      }, 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
      } 
     }, 
     series: [ 
      { 
       type: 'line', 
       name: 'The Line', 
       data: [ 
        [1072915200000, 800], 
        [1104537600000, 900], 
        [1136073600000, 1000], 
        [1167609600000, 1100], 
        [1199145600000, 1200], 
        [1230768000000, 1300], 
        [1262304000000, 1400], 
        [1293840000000, 1500], 
       ] 
      }, 
      { 
       type: 'column', 
       name: 'The Columns', 
       data: [ 
        [1072915200000, 800], 
        [1104537600000, 900], 
        [1136073600000, 1000], 
        [1167609600000, 1100], 
        [1199145600000, 1200], 
        [1230768000000, 1300], 
        [1262304000000, 1400], 
        [1293840000000, 1500], 
       ] 
      } 
     ] 
    }); 

Answer 1

Set XAxis' minPadding, maxPadding свойства:

xAxis: { 
      type: 'datetime', 
      crosshair: true, 
      minPadding: 0.08, 
      maxPadding: 0.08 
     } 

https://jsfiddle.net/9xodqw4u/1/

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