Highcharts Stock Demo

author(s): Torstein Hønsi

by Yonathan Benitah

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<button id="btn">Annual</button>
<button id="btn2">Monthly</button>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>

JavaScript

$(function() {
  $('#container').highcharts('StockChart', {
    chart: {
      type: 'areaspline',
    },
    xAxis: {
      type: 'datetime',
      endOnTick: true
     /*  tickPositioner: function () {
        const series = this.series[0]
        
        if (series && series.currentDataGrouping && series.currentDataGrouping.unitName === 'year') {
          const tickPositions = series.processedXData.slice()
          tickPositions.info = this.tickPositions.info
          
          return tickPositions
        }
        
        return this.tickPositions
      } */
    },
    rangeSelector: {
      enabled: false
    },
    navigator: {
      enabled: false
    },
    scrollbar: {
      enabled: false
    },
    series: [{
      name: 'Sample Data',
      data: [
        [1357027200000, 10], //Jan '13
        [1359705600000, 20],
        [1362124800000, 30],
        [1364799600000, 40],
        [1367391600000, 30],
        [1370070000000, 20],
        [1372662000000, 10],
        [1375340400000, 20],
        [1378018800000, 30],
        [1380610800000, 40],
        [1383289200000, 30],
        [1385884800000, 20], //Dec '13
        [1388563200000, 10], //Jan '14
        [1391241600000, 20],
        [1393660800000, 30],
        [1396335600000, 40],
        [1398927600000, 30],
        [1401606000000, 20],
        [1404198000000, 10],
        [1406876400000, 20],
        [1409554800000, 30],
        [1412146800000, 40],
        [1414825200000, 30],
        [1417420800000, 20], //Dec '14
      ]
    }]
  });

  $("#btn2").click(function() {
    var chart = $('#container').highcharts();

    chart.series[0].update({
      dataGrouping: {
        forced: true,
        units: [
          ['month', [1]]
        ]
      }
    });
  });

  $("#btn").click(function() {
    var chart = $('#container').highcharts();

    chart.series[0].update({
      dataGrouping: {
        forced: true,
        units: [
          ['year', 1]
        ],
      }
    })
    
  });
});