X axis tick not centering on column series in highcharts (jsFiddle)

Question

Stack,

For some reason highcharts seems to not want to place x axis ticks centered underneath stacked column charts when the chart is a DateTime type chart.

As you can see in this jsFiddle (http://jsfiddle.net/4Mngx/2/ and you can also look that this one with null stuffed data points http://jsfiddle.net/4Mngx/1/), the x axis tick marks are staggered to the left of each column.

Removing the "stacked" property of the columns seems to resolve the issue, but the columns have to be stacked in order to have the appropriate thickness, otherwise the columns are made thin in order to fit all the series into each tick mark even though only one series actually has real data per tick mark.

$(function () {
    $('#container').highcharts({
  "title": {
    "text": "This is a title"
  },
  "subtitle": {
    "text": "7 Days (01/16/2014 - 01/22/2014)"
  },
  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "day": "%b %e"
    }
  },
  "yAxis": {
    "title": {
      "text": "Y axis title"
    },
    "min": -1,
    "max": 7
  },
  "plotOptions": {
    "column": {
      "showInLegend": true,
      //"stacking": "stacking"
    }
  },
  "series": [
    {
      "name": "Green",
      "color": "#4CB158",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1389848400000,
          "y": 2,
        }
      ],
      "threshold": -10
    },
    {
      "name": "Yellow",
      "color": "#FFA93C",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
      ],
      "threshold": -10
    },
    {
      "name": "Red",
      "color": "#EA494A",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1390280400000,
          "y": 4
        }
      ],
      "threshold": -10
    },
    {
      "name": "Grey",
      "color": "#cccccc",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1389934800000,
          "y": 0
        },
        {
          "x": 1390021200000,
          "y": 0
        },
        {
          "x": 1390107600000,
          "y": 0
        },
        {
          "x": 1390194000000,
          "y": 0
        },

        {
          "x": 1390366800000,
          "y": 0
        }
      ],
      "threshold": -10
    }
  ]
});
});

Mark Mark · Accepted Answer · 2014-01-23T18:45:19

Taking your first time,

GMT: Thu, 16 Jan 2014 05:00:00 GMT
Your time zone: 1/16/2014 12:00:00 AM GMT-5

I'm assuming it's localtime not GMT and highcharts is shifting the label 5 hours. If you shift your time do it's 16 Jan 2014 00:00:00 GMT, the label will be centered.

Updated fiddle.

OR

If you want to use local time adjust highcharts global option.

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

New fiddle with this option.

X axis tick not centering on column series in highcharts (jsFiddle)

2 Answers