How to show time values in stacked column using High stock

Question

I am trying to created stacked columns in Highstock. in following js fiddle. The code is

    //http://jsfiddle.net/nishants/y0t130f3/2/

    $(function () {
        $('#container').highcharts('StockChart',{
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '' + this.x + '
' +
                        this.series.name + ': ' + this.y + '
' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
            }]
        });
    });

The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is very straight forward => How to put the dates on x axis of highstock.

runTarm runTarm · Accepted Answer · 2014-08-09T18:21:53

Unlike HighCharts, I don't think HighStock support the xAxis.categories config.

However, you could specify the dates directly in serie.data like this:

{
    name: 'John',
    data: [
        [new Date(2014, 5, 11).getTime(), 5],
        [new Date(2014, 5, 12).getTime(), 3],
        [new Date(2014, 5, 13).getTime(), 4],
        ...
    ]
}

And the dates must be in ascending order, otherwise the chart will be broken.

Another thing is you might want to set this to make columns align with date labels correctly.

plotOptions: {
    column: {

        ...

        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['day', [1]]
            ]
        }
    }
},

Example JSFiddle: http://jsfiddle.net/1xLny72q/2/

Hope this helps.

How to show time values in stacked column using High stock

2 Answers