Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    events: {
      load() {
        const chart = this,
          series = chart.series,
          xAxis = chart.xAxis,
          yAxis = chart.yAxis;
        chart.loadRange = chart.xAxis[0].getExtremes().max - chart.xAxis[0].getExtremes().min;
      }
    },
		zoomType: 'x'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    gridLineWidth: 1,
    //I need to set categories to timeData, as this timeData comes from Json
    // categories: timeData, 
    type: "datetime",
    labels: {
      rotation: 270
    },
    tickPositioner: function(min, max) {
      const chart = this.chart,
        tickPositions = [];

      let tick = Math.round(min);

      if (max - min < chart.loadRange) {
        const increment = 1000 * 10;

        for (tick; tick - increment <= max; tick += increment) {
          tickPositions.push(tick);
        }
      } else {
        const increment = 1000 * 60;
				tick = this.dataMin;

        for (tick; tick - increment <= max; tick += increment) {
          tickPositions.push(tick);
        }
      }
      return tickPositions;
    }
  },
  yAxis: [{
    gridLineWidth: 1,
    title: {
      text: 'Chart1'
    },
    lineWidth: 2,

  }],
  series: [{
    type: 'line',
		pointInterval: 1000 * 60,
    data: [2, 4, 6, 10, 14, 5, 1],
    yAxis: 0
  }]
});