HighCharts wrong xAxis label

Question

I converted all dates to epoch milliseconds before getting here. Originally the date is in the format "2017-12-31T00:00:00". I cannot seem to figure out why x-axis label is incorrectly showing Jan 2018 whereas data point tooltip says Dec 2017. I am expecting x-axis labels from Jan 2017 to Dec 2017. Please let me know if I am missing anything. Thanks.

Highcharts.chart('container', {
  "credits": {
    "text": "",
    "href": ""
  },
  "chart": {},
  "title": {
    "text": ""
  },
  "plotOptions": {
    "series": {
      "cursor": "pointer",
      "animation": false
    }
  },
  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "month": "%b %Y"
    },
    //format: "{value:%Y-%m-%d}",
    "labels": {
      "useHTML": true
    },
    "tickInterval": 2592000000
  },
  "yAxis": [{
    "labels": {
      "format": "{value:.0f}",
      "style": {
        "color": "#BB5B55"
      }
    },
    "lineWidth": 1,
    "title": {
      "text": "Total",
      "style": {
        "color": "#BB5B55"
      }
    }
  }, {
    "title": {
      "text": "Trend (%)",
      "style": {
        "color": "#5187B9"
      }
    },
    "lineWidth": 1,
    "labels": {
      "format": "{value}%",
      "style": {
        "color": "#5187B9"
      }
    },
    "opposite": true
  }],
  "tooltip": {
    "shared": true,
    "useHTML": true
  },
  "legend": {
    "align": "center",
    "verticalAlign": "bottom",
    "backgroundColor": "#FFFFFF"
  },
  "series": [{
    "name": "Total",
    "type": "column",
    "yAxis": 0,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
      [1506747600000, null],
      [1509426000000, null],
      [1512021600000, null],
      [1514700000000, null]
    ],
    "tooltip": {
      "valueSuffix": "",
      "valueDecimals": 0
    }
  }, {
    "name": "Trend (%)",
    "type": "spline",
    "yAxis": 1,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
      [1506747600000, null],
      [1509426000000, null],
      [1512021600000, null],
      [1514700000000, 0.8005]
    ],
    "tooltip": {
      "valueSuffix": " %",
      "valueDecimals": 2
    }
  }]
});

HIghcharts' default axis rendering will display the nearest node, based on *start*. So, if you are showing a label for every month, the nearest *month start* for December 31, is January. I have generally solved this by making sure that if I want a label per month, and I am sending a data point per month, the date values that I provide in my data are the *first* day of the month instead of the last. — jlbriggs, Feb 22 '18 at 20:42
@jlbriggs Thanks for the suggestion. Is there any temporary fix for this problem until I change the data in that format? — Anil Vangari, Feb 22 '18 at 22:21
temporary fix is to update `"tickInterval": 1728000000,` changed to 20 days in xAxis — Deep 3015, Feb 23 '18 at 07:18
You can also change your timestamps to the midnight of the first of the month using the solution proposed here: https://stackoverflow.com/questions/13571700/get-first-and-last-date-of-current-month-with-javascript-or-jquery — Kamil Kulig, Feb 23 '18 at 12:30
@jlbriggs Please post it as answer, so that I can mark it as answer. Thanks. — Anil Vangari, Feb 23 '18 at 16:19

score 1 · Accepted Answer · answered Feb 27 '18 at 05:20

Highcharts' default axis rendering will display the nearest node, based on start.

So, if you are showing a label for every month, the nearest month start for December 31, is January.

I have generally solved this by making sure that if I want a label per month, and I am sending a data point per month, the date values that I provide in my data are the first day of the month instead of the last.

If you don't want to change the data at the source, you can just add a pre-processing function to update your dates in javascript before sending to the chart.

HighCharts wrong xAxis label

1 Answers1