Two panes, candlestick and volume

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.src.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

Highcharts.chart('container', {

  rangeSelector: {
    selected: 1
  },

  yAxis: [{
    height: 1,
    resize: {
      enabled: true
    },
    title: {
      text: ''
    }
  }, {
    resize: {
      enabled: true,
      controlledAxis: {
        prev: 'x1'
      }
    }
  }],

  xAxis: [{
    id: 'x1',

    // load defaults (x axis is not suppoerd by default)
    minLength: '10%',
    maxLength: '100%',
    resize: {
      controlledAxis: {
        next: [],
        prev: []
      },
      enabled: false,
      cursor: 'ns-resize',
      lineColor: '#cccccc',
      lineDashStyle: 'Solid',
      lineWidth: 4,
      x: 0,
      y: 0
    }
  }],

  tooltip: {
    split: true
  },

  series: [{
    type: 'column',
    name: 'Volume',
    yAxis: 1,
    data: [1, 2, 3, 4]
  }]
});