Question

I have irregular data. Chart draws well when I use highcharts:

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart'
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    name: 'Volume',
    data: chart_arr,
  }]
});
});

http://jsfiddle.net/KnTaw/9/

But I have a lot of data so I need to zoom on the date and choose highstock. Then a strange thing happens: the x-axis become non-linear.

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: 'chart2'
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: 'val',
      data: chart_arr,
      type : 'area',
    }]
  });
});

http://jsfiddle.net/Mc3mW/1/

Please note that the data for half an hour range Jan 6 20:00-20:30 allocates more space than 2 days Jan 11-13. (Of course the data is the same.)

How can I force x-axis at highstock to become linear? Or How can I enable a bottom zoom tool for highcharts? Thank you.

Answer 1

You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time

xAxis: {       
    ordinal: false
}

Linear x-axis | Highstock @ jsFiddle