Highcharts: Using JS arrays to populate series and x-axis categories

Question

I am trying to populate a stacked bar highchart from JS arrays set in my page. I want to use each array (set as a var) to populate the series and the x-axis categories respectively.

Here is my data:

    <script type="text/javascript">
    var distroDates = [
        {
            name: 'exShortDate',
            data: [
                '06/2013',
                '12/2012',
                '06/2012',
                '12/2011',
                '06/2011',
                '12/2010',
                '06/2010',
                '12/2009',
                '06/2009',
                '12/2008',
                '06/2008',
                '12/2007',
                '12/2006',
                '12/2005',
                '12/2004',
                '12/2003',
                '12/2002',
            ]
        },
        {
            name: 'exLongDate',
            data: [
                '06/25/2013',
                '12/17/2012',
                '06/20/2012',
                '12/19/2011',
                '06/21/2011',
                '12/20/2010',
                '06/21/2010',
                '12/21/2009',
                '06/22/2009',
                '12/22/2008',
                '06/23/2008',
                '12/24/2007',
                '12/21/2006',
                '12/23/2005',
                '12/23/2004',
                '12/22/2003',
                '12/23/2002',
            ]
        },
        {
            name: 'Record Date',
            data: [
                '06/27/2013',
                '12/19/2012',
                '06/22/2012',
                '12/21/2011',
                '06/23/2011',
                '12/22/2010',
                '06/23/2010',
                '12/23/2009',
                '06/24/2009',
                '12/24/2008',
                '06/25/2008',
                '12/27/2007',
                '12/26/2006',
                '12/28/2005',
                '12/28/2004',
                '12/24/2003',
                '12/26/2002',
            ]
        },
        {
            name: 'Payable Date',
            data: [
                '07/02/2013',
                '12/24/2012',
                '06/27/2012',
                '12/29/2011',
                '06/27/2011',
                '12/30/2010',
                '06/25/2010',
                '12/31/2009',
                '06/26/2009',
                '12/31/2008',
                '06/27/2008',
                '01/04/2008',
                '12/28/2006',
                '12/30/2005',
                '12/30/2004',
                '01/02/2004',
                '01/02/2003',
            ]
        }
    ]
    var distroData = [
        {
            name: 'Distro Income',
            data: [
                0.3908,
                0.4948,
                0.2311,
                0.3342,
                0.245,
                0.2213,
                0.19,
                0.1404,
                0.2014,
                0.2266,
                0.2131,
                0.2328,
                0.1288,
                0.0044,
                0.6248,
                0,
                0,
            ]
        },
        {
            name: 'Distro StCapGain',
            data: [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
            ]
        },
        {
            name: 'Distro LtCapGain',
            data: [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
            ]
        },
        {
            name: 'Distro ReturnOnCapital',
            data: [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0.0202,
                0,
                0,
                0,
            ]
        }
    ]
</script>

and here are my highcharts options:

    renderStackColumnChart: function(distroDates, distroData, chartContainer) {
    var stackColumnOptions={
        chart: {
            renderTo: chartContainer,
            type: 'column',
            width: 600
        },

        legend: {
            enabled: true,
            floating: false
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            },
            series: {
                showInLegend: true
            }
        },

        series: distroData,

        tooltip: {
            backgroundColor: "#ffffff",
            enabled: true,
            formatter: false,
            headerFormat: '<h5>{point.name}</h5>',
            pointFormat: '<p>{point.y}</p>',
            valueDecimals: 2,
            valuePrefix: '$'
        },

        xAxis: {
            categories: distroDates
        },

        yAxis: {
            title: {
                text: 'Total Distribution'
            }
        }
    };
    chartContainer.chart(stackColumnOptions);
}

I want the exShortDate values to display along the x-axis. Instead I seem to be getting indices, i.e. 4, 5, 6, etc. Moreover, the first four values along the x-axis are "[Object]". So it looks like: [Object] [Object] [Object] [Object] 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16.

I'd also like to know how to get the "name" values to display in the tooltip. Right now I get the "point.y" values only; "{point.name}" displays verbatim.

Thanks.

Answer 1

exShortDate values are first element in distroDates array. try code below.

xAxis: {
    categories: distroDates[0].data
},