JSFiddle - React, Tailwind, and code Playground
by Nicholas Mastracchio
HTML
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id='zc'></div>
JavaScript
zingchart.MODULESDIR = 'http://www.zingchart.com/playground/lib/zingchart/modules/';
var myChart={
"graphset":[
{
"type":"mixed",
"width":"100%",
"background-color":"#FFFFFF",
"legend":{
"toggle-action":"remove",
"layout":"x2",
"margin-top":"25px",
"margin-right":"50px",
"background-color":"white",
"border-width":1,
"border-radius":"10px 10px 0px 0px",
"border-color":"#D9D7D5",
"padding-left":"30px",
"padding-right":"30px",
"shadow":false,
"marker":{
"fill-offset-y":-115,
"type":"circle",
"border-width":0
},
"max-items":2,
"overflow":"page",
"page-status":{
"visible":false,
"width":"130px"
}
},
"preview":{
"margin-left":"48px",
"margin-right":"50px",
"margin-bottom":"10px",
"border-color":"#D9D7D5",
"height":60
},
"plot":{
"fill-offset-y":-115,
"scroll-step-multiplier":0.5,
"value-box":{
"font-color":"black",
"font-size":"10px",
"rules":[
{
"rule":"%v <= 0",
"visible":false
}
]
},
"marker":{
"border-color":"#FFFFFF",
"border-width":"1px",
"shadow":false,
"rules":[
{
"rule":"%v <= 0",
...