Highcharts X-axis graph for different date ranges

Question

I wrote the code below that generates an area graph for selected dates (from and to dates).

$(document).ready(function() { var options = { "series": [{ "showInLegend": false, "color": "#D0D0D0", "name": "Revenue", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}], "credits": { "enabled": false }, "chart": { "renderTo": "highchart_id", "defaultSeriesType": "area", "shadow": true }, "title": { "text": null, "align": "center", "x": 0, "y": 20 }, "xAxis": { "type": "datetime", "dateTimeLabelFormats": { "month": "%e. %b", "year": "%b" }, "labels": { "enabled": "false" } }, "legend": { "enabled": true }, "yAxis": { "title": { "text": "" }, "labels": { "enabled": true } }, "plotOptions": { "area": { "stacking": "normal", "lineColor": "#3E3E3E", "lineWidth": 3, "marker": { "lineWidth": "1", "lineColor": "#3E3E3E", "states": { "hover": { "enabled": true, "radius": 1 } } } }, "series": { "pointStart": 1335823200000, "pointInterval": 86400000 } } }; var chart = new Highcharts.Chart(options); });​ 

The date range on the x axis is approaching one day less. here the value of series 2 is 10, while the graph shows the value 9 maybe.

I am new to this highchart, can anyone advise a solution, please, and let me know if you need more clarification on this issue.

Answer 1

Try adding this code before declaring the schedule.

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

By default, UTC is used in highchart mode. By adding the code above, it will use the browser time zone.