I am trying to display to my users the number of videos recorded per day with each one of their cameras. To do so I would like to use a stacked back (each stack showing the # of videos recorded with a given camera). Here are the options I am passing in:
var options = {
"title": {
"text": null
},
"legend": {
"layout": "vertical",
"style": { },
"enabled": false
},
"xAxis": {
"type": "datetime",
"minTickInterval": 86400000
},
"yAxis": {
"stackLabels": { "enabled": true },
"title": { "text": null }
},
"tooltip": { "enabled": true },
"credits": { "enabled": false },
"plotOptions": {
"column": { "stacking": "normal" }
},
"chart": {
"defaultSeriesType": "column",
"height": 200,
"borderRadius": 0,
"renderTo": "monthy_chart"
},
"subtitle": { },
"colors": [ "#c7084b","#089fbf","#00d047","#d300d1","#f48400","#f6f400" ],
"series": [
{
"name": "Camera",
"data": [ [ 1362614400000,6 ],[ 1362528000000,2 ] ]
},
{
"name": "NewCamera2",
"data": [ [ 1362614400000,1 ] ]
}
]
};
The graph displays the data correctly but is rendering the columns extremely narrowly even when there are only 2 days of data (image below). Is there a way for me to deine the scale of the x-axis so the widths of the columns will display a bit better?
You can set pointWidth and startOnTick / endOfTick
"xAxis": {
startOnTick:true,
endOnTick:true,
"type": "datetime",
"minTickInterval": 86400000
http://api.highcharts.com/highcharts#xAxis.startOnTick http://api.highcharts.com/highcharts#xAxis.endOnTick http://api.highcharts.com/highcharts#plotOptions.column.pointWidth