Highstock highcharts irregular data gets wrong x-scale

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.