Develop Reference

Is is possible to make Highcharts stacked column skip empty date values?

Is is possible to make Highcharts skip empty date values?
I have a stacked column chart with amounts on the Y axis and dates on the X axis. But the dates are very much spread making the chart extremely wide if all values are to be seen clearly.
See this example: http://jsfiddle.net/8j1ar44L/13/
If all values are in 2016 it looks nice, but to demonstrate the problem I changed the last dataset to 2017. In the real use case, it is actually much worse as we span several years.
Setting ordinal true doesn't work:
xAxis: {
type: "datetime",
tickInterval: 24 * 3600 * 1000,
ordinal: true
},
How can I make Highcharts simply ignore missing dates and thus ignore white space between the columns?

Grouping of data in amcharts

I am using maxseries to disable grouping of data for that I have set its value to 0 so that it will not group data in any groups. But for one month view my axis scale is not consistent see image. Is this is because of grouping of data or there in any other issue.
My main motive to make the gap b/w two lines consistent , if there is no value in db for particular date then scale must shifted to next date so that gap remains same

data point and ticks are not aligned in highstock line graph

The data point plotted is not matching exactly with the tick or the ticks are not placed at the data points. when I reduce the range with the navigator I having this problem seen very clearly. Is there any way so that i can set that ticks will be coming for Saturdays or any day which i specify?

You can set tickInterval http://api.highcharts.com/highcharts#xAxis.tickInterval and define pointStart http://api.highcharts.com/highcharts#plotOptions.series.pointStart. You can also use other solution by using http://api.highcharts.com/highcharts#xAxis.tickPositioner

Highchart js max 15 plots to be plotted

I have been trying a lot in Highchart js and still cant find a way to reduce the number of elements in the series.
If i get more than 15 days data i have to reduce it back and show to user as 15 days data so that user can see the data without crowding of data. Max 90 days will be given in the series which i have to reduce to 15 days.
check my current code here in http://jsfiddle.net/MULZL/
can any one give me a solution for it ?
P.S: I dont want to reduce it to first 15 days or last 15 days. I want to do it just because getting 90days in the chart looks crowded and i dont want zoom functions to apply. I want the solution for ignoring some data (days) to make it 15days if it is more than 15 days

You can programmatically zoom into the required time range using the Axis.setExtremes method. In your case you may want to do it on load
Here is how you would do it, if you want to zoom into the 1st 15 days of the given data, you can easily modify to zoom into last 15 days.
function zoomTo15Points(chart){
var points=chart.series[0].points;
if(points.length<15) return;
var min=points[0].x;
var max=points[14].x;
// If you wish to zoom to 15 days and not 15 points, you can modify max as
// var max=min + 1000*60*60*24*14
chart.xAxis[0].setExtremes(min,max);
chart.showResetZoom();
}
If you do not want to let the user zoom out, you can disable the last line, but you also will have to disable zooming, else the button would appear if user zooms inside the 15 days.
Highchart Zoom on Load # jsFiddle

You can try dataGrouping feature of highStock
var dataGrouping = {
groupPixelWidth: 40,
units: [[
'day',
[1, 2, 3,4,5,6]
]]
};
Highcharts would make sure all your columns are at least the specified width (40), if the number of coulmns is large, such that it's not possible to have that width, it will group data using the units, so it will group data of 1 day into 1 column or 2 days into 1 column and so on.
Not sure if you really want exactly 15 plots, but I think you concern was to avoid crowding of data, this does exactly that, but the number of columns will vary based on the width you specify, the width of the plotArea and allowed units and its multiples. Tweak the values as per your data and width of your chart.
jsFiddle

Highcharts data off by one day

I have a Highchart that I cannot seem to fix. The dates on the xAxis are correct but the dates on the labels are off by one day. No matter what data I pass to my chart it is always off by one day. I have been pulling my hair out trying to figure this out. Any tips would be appreciated.
You can see my code here:
http://jsfiddle.net/brenjt/zxBTG/2/

Just found your question... I think the solution to your problem is to set up the UTC timezone option to false. This will set up the chart timezone to be local and not UTC.
Highcharts.setOptions({
global : {
useUTC : false
}
});
See: http://api.highcharts.com/highcharts#global.useUTC

Well, I added time info to the axis and tooltip see http://jsfiddle.net/gATfu/
It looks like your timestamps are from 10pm but the axis labels are showing 0am ... thats why the points look about one day shifted.

it's because of the timezone. You should convert you date in UTC format with Date.UTC(..). It will work

The global HighCharts option for UTC worked quite good. I cannot yet vote that one up :(
I also figured out that HighCharts moves my bar chart according to the exact time stamp as described by dgw. I.e. a date from the 1st of May can be shown in the near of 30th of April depending on the scaling. That confused me because there were two 30th of April entries and no 1st of May.