Question

I’ve a case when I can’t understand highcharts behavior.

When plotting raw series of data, I get a graph with a strange x-axis (wrong start/end ticks) and zooming behavior. If I complete the series so that each data point exists in both series (i.e. add date of 1st serie to the second one with a 0 value), everything goes back to normal.

If you look at this sample jsFiddle the starting date is 2 dec. 2012 midnight and end date is 31 janv. 2013 midnight however, the top graph show an x-axis ending in february. If you try to zoom, ticks text gets garbled. On the bottom graph, same datas are plotted but this time with “data-padding”, x-Axis is fine and zoom is working as expected.

So my question is, does anyone know what the problem is, does data need padding?

---

Code:

$(function () {
  var chart1, chart2;
  $(document).ready(function () {
    var opts = {
      chart: {
        "alignTicks": true,
          "animation": true,
          "backgroundColor": "#FFFFFF",
          "borderColor": "#4572A7",
          "borderRadius": 5,
          "borderWidth": 0,
          "ignoreHiddenSeries": true,
          "inverted": false,
          "plotBorderColor": "#C0C0C0",
          "plotBorderWidth": 0,
          "plotShadow": false,
          "reflow": true,
          "resetZoomButton": {
          "position": {
            "verticalAlign": "bottom",
              "y": 30.0
          },
            "relativeTo": "plot"
        },
          "selectionMarkerFill": "rgba(69,114,167,0.25)",
          "shadow": false,
          "showAxes": false,
          "spacingBottom": 15,
          "spacingLeft": 10,
          "spacingRight": 10,
          "spacingTop": 10,
          "type": "column",
          "zoomType": "x"
      },
      credits: {
        "enabled": false
      },
      legend: {
        "align": "center",
          "borderColor": "#909090",
          "borderRadius": 5,
          "borderWidth": 1,
          "enabled": true,
          "floating": false,
          "itemMarginBottom": 0,
          "itemMarginTop": 0,
          "layout": "horizontal",
          "lineHeight": 16,
          "margin": 15,
          "padding": 8,
          "reversed": false,
          "rtl": false,
          "shadow": false,
          "symbolPadding": 5,
          "symbolWidth": 30,
          "useHtml": false,
          "verticalAlign": "bottom",
          "x": 0,
          "y": 0
      },
      plotOptions: {
        "column": {
          "allowPointSelect": false,
            "animation": true,
            "colorByPoint": false,
            "enableMouseTracking": true,
            "grouping": true,
            "selected": false,
            "shadow": true,
            "showCheckbox": false,
            "showInLegend": true,
            "stacking": "normal",
            "stickyTracking": true,
            "visible": true
        }
      },
      title: {
        "align": "center",
          "floating": false,
          "useHTML": false,
          "verticalAlign": "top",
          "x": 0.0,
          "y": 15.0
      },
      xAxis: {
        "type": "datetime"
      },
      yAxis: {
        "title": {
          "text": "Number"
        }
      },
      tooltip: {
        "animation": true,
          "enabled": true,
          "shadow": true,
          "shared": false,
          "useHTML": false,
          "xDateFormat": "%d/%m/%Y"
      }
    };
    chart1 = new Highcharts.Chart($.extend(true, {
      chart: {
        "renderTo": "aU8Q_4"
      },
      title: { text: 'bad' },
      series: [{
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          1],
          [
          1358118000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Emit."
      }, {
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Recpt."
      }]
    }, opts));
    chart2 = new Highcharts.Chart($.extend(true, opts, {
      chart: {
        "renderTo": "aU8Q_5"
      },
      title: { text: 'good' },
      series: [{
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          1],
          [
          1358118000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Emit."
      }, {
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          0],
          [
          1358118000000,
          0],
          [
          1359673199000,
          0]
        ],
          "name": "Recpt."
      }]
    }, opts));
  });
});

Answer 1

Adding pointRange, fixes the behavior:

plotOptions: {
    series: {
      pointRange: 24 * 3600 * 1000 // one day
    },
// ...

(source)