JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChartDiv'></div>
JavaScript
zingchart.setModule('toolbar-zoom');
(function () {
zingchart.shape_click = function (p) {
switch (p.shapeid) {
case "zoomin":
zingchart.exec(p.id, "zoomin");
break;
case "zoomout":
zingchart.exec(p.id, "zoomout");
break;
case "viewall":
zingchart.exec(p.id, "viewall");
break;
}
};
zingchart.bind(null, 'dataparse', function (oInfo, oData) {
var oLoader = zingchart.getLoader(oInfo.id);
/* This is 'behavioral' plugin - not bound to a chart type we can detect, so we need to look in the loader's modules */
var aModules = zingchart.getModules(oLoader);
console.log(aModules);
if (aModules.indexOf('toolbar-zoom') != -1) {
for (var i = 0, iLen = oData['graphset'].length; i < iLen; i++) {
var oGraphData = oData['graphset'][i];
oGraphData['shapes'] = [{
"type": "rectangle",
"id": "zoomin",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"x": 50,
"y": 20,
"border-width": 1,
"border-color": "#aaa",
"border-radius-top-left": 5,
"border-radius-bottom-left": 5,
"z-index": 1
}, {
"type": "rectangle",
"id": "zoomout",
"width": 29,
"height": 29,
"background-color": "#ddd",
...