How To Show An Empty Chart In Beginning And Populate Values On Button Click

I have code from this post. I want to populate the chart on click of a button instead of initializing it and provide only 3 values e.g.22286,12286,9286 ( these values would be dyna

Solution 1:

All you need to do is to create series with empty data array and use chart.update method to add data. Example:

varchart=Highcharts.chart('container', {
    ...,
    series: [{
        data: []
    }, {
        data: []
    }, {
        data: []
    }]
});document.getElementById('chartInit').addEventListener('click',function(){chart.update({series: [{
            data: [4457, 13371, 22286]
        }, {
            data: [2457, 9371, 12286]
        }, {
            data: [1457, 5371, 9286]
        }]
    });});

---

Live demo:https://jsfiddle.net/BlackLabel/8pL6hr3w/

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