JSFiddle - React, Tailwind, and code Playground
by Nicholas Mastracchio
HTML
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>
JavaScript
var oData={
"graphset":[
{
"chartdescription":"Style Exposure Quartiles-100-550",
"title":{
},
"legend":{
"layout":"x3",
"item":{
"marker-style":"circle",
"border-color":"black"
},
"position":"50% 85%"
},
"scale-x":{
"label":{
},
"labels":[],
"values":["Book to Price","Dividend Yield","IBES DivYld","Earnings Yld","IBES Engs Yld","CFlow Yield","Sales to Price","EBITDAto Price","Rtn on Equity","Earnings Growth","Income/Sales","SalesGrowth","IBES 12Mth Gr","IBES 1Yr Rev","Market Cap","Market Beta","MomentumST","Momentum MT","Debt/Equity","Foreign Sales"],
"item":{
"font-angle":340,
"offset-x":15,
"offset-y":-8,
"auto-align":true,
"rules":[]
},
"items-overlap":true,
"max-items":200,
"max-labels":50,
"markers":[],
"exact":true
},
"scale-y":{
"label":{
},
"item":{
"rules":[]
},
"values":"-4:4:1"
},
"plot":{
"bar-width":"100%",
"tooltip-text":"%data-tooltips-1",
"rules":[
{
"rule":"(%p==0 && (%i==0 || %i==1 || %i==2 || %i==3 ||%i==4 || %i==5 || %i==6 || %i==7))||(%p==3 && (%i==0 || %i==1 || %i==2 ||%i==3 || %i==4 || %i==5 || %i==6 || %i==7))",
"background-color":"#67F9FF"
},
{
"rule":"(%p==1 && (%i==0 || %i==1 || %i==2 || %i==3 ||%i==4...