Highchart Stacked Column w/ Datetime X-axis Columns Too Thin

cdanzig picture cdanzig · Mar 7, 2013 · Viewed 8.3k times · Source

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?

http://i.stack.imgur.com/NSSYg.png

Answer

Sebastian Bochan picture Sebastian Bochan · Mar 8, 2013

You can set pointWidth and startOnTick / endOfTick

http://jsfiddle.net/bLrah/

 "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