JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn1.zingchart.com/scripts/zingchart/html5_scripts/zingchart-html5-min.js"></script>
<button onclick="addChart();">Add Chart Object</button>
<button onclick="removeChart();">Remove Chart Object</button>

<div id="divId"></div>

JavaScript

//Array of chart objects to be used within render() and setdata() calls.
var chartArray=[{
        "type":"bar",
        "series":[
            {
                "values":[11,26,7,44,11]
            },
            {
                "values":[42,13,21,15,33]
            },
            {
                "values":[23,24,13,4,18]
            }
        ]
    }];

//Adds an additional chart object to chartArray, and sets data to include new array
function addChart(){
    var obj={
        "type":"bar",
        "series":[
            {
                "values":[67,53,82,6,9]
            },
            {
                "values":[89,76,52,35,7]
            },
            {
                "values":[98,67,5,34,56]
            }
        ]
    };
    chartArray.push(obj);
    zingchart.exec('divId','setdata',{
        data:{"graphset":chartArray}
    });
};

//Pops the last object off of the array, but you can choose to remove an object at a specific index
function removeChart(){
    chartArray.pop();
    zingchart.exec('divId','setdata',{
        data:{"graphset":chartArray}
    });
};

var data={
"graphset":chartArray
}

$(function(){
    zingchart.render({
        id : 'divId',
        output : 'svg',
        width  : '100%',
        height : 800,
        data : data,
        autoResize : true
    });
    
});