JSFiddle - React, Tailwind, and code Playground

by Chloe B

HTML

<html>
	<head>
		<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
		<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
		ZC.LICENSE = ['569d52cefae586f634c54f86dc99e6a9','ee6b7db5b51705a13dc2339db3edaf6d'];</script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

JavaScript

zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson){
  /* 
  * If the 'labels' array of objects already exists, do nothing.
  * If it does not exist, initialize it as an empty array.
  * We do this to avoid obliteration of any existing labels.
  */
  chartJson.labels = chartJson.labels ? chartJson.labels : [];
  
  /* Push the toolbar label objects */
  chartJson.labels.push({ 
	  "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",
	  "margin-top":10,
	  "margin-left":50,
	  "margin-right":"auto",
	  "border-width": 1,
	  "border-color": "#aaa",
	  "border-radius-top-left": 5,
	  "border-radius-bottom-left": 5,
	  "z-index": 1
	}, 
	{
		"type": "rectangle",
	  "id": "zoomout",
	  "width": 30,
	  "height": 30,
	  "background-color": "#ddd",
	  "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
	  "background-repeat": "no-repeat",
	  "cursor": "hand",
	  "margin-top":10,
	  "margin-left":80,
	  "margin-right":"auto",
	  "border-width": 1,
	  "border-color": "#aaa",
	  "z-index": 1
	}, 
	{
		"type": "rectangle",
	  "id": "viewall",
	  "width": 30,
	  "height": 30,
	  "background-color": "#ddd",
	  "background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
	  "background-repeat": "no-repeat",
	  "cursor": "hand",
	  "margin-top":10,
	  "margin-left":110,
	  "margin-right":"auto",
	  "border-width": 1,
	  "border-color": "#aaa",
	  "border-radius-top-right": 5,
	  "border-radius-bottom-right": 5,
	  "z-index": 1
  });
  
  /*
  * Add label_click event listener, use the clicked label's 
  * id in a switch
  */
  zingchart.label_click = function (p) {
    switch (p.labelid) {
      case "zoomin":
        zingchart.exec(p.id, "zoomin");
        break;
      case...