Help with Zing Chart custom editing (JS and advanced HTML/CSS)

gtx1060=value · December 4, 2016

<!DOCTYPE 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>
	
  <h1> Multiple Pie Charts</h1>
  
  <body>
		<div id='myChart'></div>
	</body>
</html>

h1 { text-align: center}

var myConfig = {
  "type":"pie", //"pie", "pie3d", "ring", or "ring3d"
  "title":{
    "text":""
  },
  "scale":{
    "layout":"3x2", //specify the layout by rows and columns
    "size-factor": 1//provide a decimal or percentage value
  },
  "plot":{
    "value-box":{
      "font-size":15,
      "font-weight":"normal",
      "placement":"in"
    }
  },
  "series":[
    {"values":[59,60,50,40,61,58]},
    {"values":[55,40,40,55,35,57]},
    {"values":[30,35,30,49,31,39]},
    {"values":[28,30,20,40,28,36]},
    {"values":[15,20,10,16,14,32]}
  ]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 800, 
	width: "100%" 
});

Just copy paste this jumble of code into codepen.io or something - the result works, but the pie charts are so close to each other - and since it's in JS, i can't find a way to edit it with CSS - i don't really have that much time to write a bunch of html to be able to add padding or something - any help would be appreciated - my first time doing a BI report, im used to doing SQL so im really stuck here