JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="myChartDiv"></div>
<table border="1">
  <tr>
    <th>Series 1</th>
    <th>Series 2</th>
    <th>Series 3</th>
  </tr>
  <tr>
      <td id="val1">N/A</td>
      <td id="val2">N/A</td>
      <td id="val3">N/A</td>
  </tr>
</table>

CSS

#container {
    width:800px;
}
#name-table {
    width:800px;
}
td {
    width:12.5%;
    text-align:center;
    padding:0px;
}
.fa-circle {
    color:#1097D2;
}
.row-border td{
    border-top:1px solid #aaa;
    border-bottom:1px solid #aaa;
}

JavaScript

zingchart.render({
    id:'myChartDiv',
    height:400,
    width:"100%",
    data:{
        "type":"pie",
        "series":[
            {
                "values":[12]
            },
            {
                "values":[32]
            },
            {
                "values":[23]
            }
        ]
    }
});

zingchart.node_click=function(p){
    var aValues = zingchart.exec(p.id,"getseriesvalues");
    $('#val1').html(aValues[0][0]);
    $('#val2').html(aValues[1][0]);
    $('#val3').html(aValues[2][0]);
}