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

セットのX軸minPadding、maxPaddingプロパティ：

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

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

あなたがナビゲーターを使用する場合は別のアプローチが必要になることをお勧めすること - ナビゲーターは、両極端を設定し、パディングはリセットされます。