chart

chart.markdown

chart

A Pen by Abhishek on CodePen.

License.

index.html

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


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

script.js

// Create the chart
Highcharts.stockChart("container", {
  rangeSelector: {
    selected: 1
  },

  title: {
    text: "AAPL Stock Price"
  },

  yAxis: [
    {
      labels: {
        align: "right",
        x: -3
      },
      title: {
        text: "OHLC"
      },

      lineWidth: 2,
      resize: {
        enabled: true
      }
    },
    {
      labels: {
        align: "right",
        x: -3
      },
      title: {
        text: "Volume"
      },
      opposite: false,

      offset: 0,
      lineWidth: 2
    }
  ],

  series: [
    {
      name: "AAPL Stock Price",
      type: "area",
      data: [
        [1516631400000, 177],
        [1516717800000, 245],
        [1516804200000, 174.22],
        [1516890600000, 171.11]
      ],
      step: true,
      plotOptions: {
        series: {
          fillColor: "blue"
        }
      },
      tooltip: {
        valueDecimals: 2
      },
       yAxis: 0
    },
    {
      type: "column",
      name: "Volume",

      data: [
        [1516631400000, 137],
        [1516717800000, 132],
        [1516804200000, 124.22],
        [1516890600000, 121.11]
      ],
      yAxis: 1,
      step: true,
      plotOptions: {
        series: {
          fillColor: "blue"
        }
      },
      tooltip: {
        valueDecimals: 2
      }
    }
  ]
});