How to limit chart xAxis date range in HighCharts?

0
votes

The data series in my HighCharts chart only includes dates from the past few days, but the chart's x-axis and zoom bar show a date range all the way back to 1970.

How can I limit the presented date range so it only goes back as far as the first date present in the series data?

Example

enter image description here

HTML

<div id="chart_container" style="height: 500px></div>

JavaScript

$(function () {
  var timestamps = [1481000484000,1481108510000,1481215541000,1481316568000,1481417583000];
  var series_raw_data = [100,300,750,400,200];

  // prepare data
  var points = [[],[]];
  for (var i = 0; i < timestamps.length; i++) {
    points.push([timestamps[i], series_raw_data[i]]);
  }

  // create chart
  $('#chart_container').highcharts('StockChart', {
    series: [{
      data: points
    }]
  });
});

Here's Fiddle1 which shows the behavior.

I also tried setting the xAxis 'min' option to the first timestamp, and setting the axis type to 'datetime', but those didn't help - Fiddle2.

1
javascripthighcharts

1 Answers

1
votes

The reason why it happens is your points array.

If fact, after filling, it looks like this:

points = [ [], [], [x, y], [x, y]]

Those two empty arrays create unwanted behaviour.

Fix the initial array and it works

var points = [];

example: https://jsfiddle.net/hbwosk3o/3/