Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

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

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

JavaScript

Highcharts.stockChart('container', {

  rangeSelector: {
    selected: 4
  },

  plotOptions: {
    series: {
      dataGrouping: {
        forced: true,
        units: [
          ['week', [1]]
        ]
      }
    }
  },

  series: [{
    name: 'ADBE',
    data: MSFT,
    dataGrouping: {
      approximation: function(arr) {
        var numerator = 0,
          denominator = 0;
        if (arr.length !== 0) {
          var start = this.xData.indexOf(this.processedXData[0]) + this.dataGroupInfo.start,
            slicedArr = this.chart.series[1].yData.slice(start, start + (arr.length));
          for (var i in arr) {
            numerator += arr[i];
            denominator += slicedArr[i];
          };
        };
        return denominator !== 0 ? Math.round((numerator / denominator) * 1000) / 1000 : null;
      },
      forced: true
    },
    tooltip: {
      valueDecimals: 2
    }
  }, {
    name: 'Data point count (confidence)',
    data: ADBE,
    dataGrouping: {
      approximation: function() {
        return this.dataGroupInfo.length;
      },
      forced: true
    },
    type: 'column',
    yAxis: 1,
  }],
  yAxis: [{
    height: '75%',
  }, {
    height: '20%',
    top: '80%',
  }]
});