Highcharttable.js date format x-axis

Question

I am using highchartTable to create my chart. I am feeding the x-Axis on highchartTable with dates and this is how it currently displays

I would like to format the x-axis in such a way that it only show 'Month year', then 'year' when the result set gets bigger.

Someone suggested I do it like:

$('#hidden-highchart-table').bind('highchartTable.beforeRender', function (event, highChartConfig) {
            highChartConfig.xAxis.type = 'datetime',
            highChartConfig.xAxis.dateTimeLabelFormats = { month: '%b \'%y',year: '%Y'}     
     }).highchartTable();  

But this still does not work.

Answer 1

Instead of setting type of axis through highChartConfig object, use data-graph-xaxis-type attribute in table tag. Take a look at the example below.

Example:
http://jsfiddle.net/m8h5oo76/