Not able to update data for highcharts

Question

I want to update the data on chart on button click. I have tried using addSeries and redraw. Both are not updating my chart with the latest information.

What is going wrong here?

let stacks1 = [{
            linkedTo: 'yo',
        		name:'yo',
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1,
        }, {
            linkedTo:'yo0',
        		name:'yo0',
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1,
        }]
let stacks2 = [{		
        		id: 'yo',
        		name:'yo',
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 2
        }, {
        		id:'yo0',
        		name:'yo0',
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 2
        }]

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five']
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: stacks2
});

$('#btn').on('click', function(){
$('#container').highcharts().addSeries(stacks1);
$('#container').highcharts().redraw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button type="button" id='btn'>Click Me!</button>

As you can see, it is adding a random Series 3 legend. And also not adding my latest data.

It should not be adding the Series 3. Because of the linkedTo I have added to the new stack I am adding. All the stacked charts should be controlled by the 2 legends.

On click, I just want to add a new set of data to the existing chart.

Why is that not happening?

I need a stacked column chart with 2 stacks, The second stack should form on click

Answer 1

You need to use addSeries method twice:

$('#btn').on('click', function() {
    chart.addSeries(stacks1[0], false);
    chart.addSeries(stacks1[1], false);

    chart.redraw();
});

---

Live demo: http://jsfiddle.net/BlackLabel/4aqn02s8/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Answer 2

addSeries expects config options for a single series as the first parameter - https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries.

You are trying to add stacks1, which contains two sets of options. If you add two series separately, it works. You can also redraw the chart with addSeries command by setting the second parameter to true. See code / snippet below.

let stacks11 = {
            linkedTo: 'yo',
        		name:'yo',
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1,
        }
let stacks12 = {
            linkedTo:'yo0',
        		name:'yo0',
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1,
        }

let stacks2 = [{		
        		id: 'yo',
        		name:'yo',
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 2
        }, {
        		id:'yo0',
        		name:'yo0',
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 2
        }]

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five']
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: stacks2
});

$('#btn').on('click', function(){
$('#container').highcharts().addSeries(stacks11);
$('#container').highcharts().addSeries(stacks12,true);
//$('#container').highcharts().redraw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button type="button" id='btn'>Click Me!</button>