Highstock highcharts stacked column jQuery.getJSON array not working

I have developed a very simple column chart from a json three dimensional array:

0: timestamp in millliseconds 1:given recognition 2:received recognition


The array displays timestamp on the xAxis and given recognition on the y axis. How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?

I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.

I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?

How will I achieve a similar column like this CSV column:



<!doctype html>

    <meta charset="UTF-8">

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>

    <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->

    <!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->

    <script src="http://code.highcharts.com/modules/exporting.js"></script>



    <div id="container" style="height: 400px; width: 100%"></div>

        $(function() {


            $.getJSON('http://localhost:3000/recognition', function(data) {

                // Create the chart

                window.chart = new Highcharts.StockChart({

                    chart: {

                         type: 'column',

                        renderTo: 'container'


                    legend: {
                        enabled: true,

                    tooltip: {
                            pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
                            valueSuffix: ' k',
                            shared: true,

                    series: [{

                        name: 'Brands',

                        data: data


                    rangeSelector: {

                        selected: 1,

                        inputDateFormat: '%Y-%m-%d',

                        floating: true,

                        y: -75,

                        verticalAlign: 'bottom'


                    title: {
                        text: 'Team members received and sent recognition'

                    navigator: {
                        margin: 50
                    xAxis: {
                        type: 'datetime',
                        title: {
                            text: 'DATES'

                    yAxis: {
                        title: {
                            text: 'BRANDS'
                    plotOptions: {
                        column: {
                            stacking: 'normal'

                }, function(chart) {

                    // apply the date pickers

                    setTimeout(function() {

                        $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()

                    }, 0)



            // Set the datepicker's date format


                dateFormat: 'yy-mm-dd',

                onSelect: function(dateText) {

                    chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());