JSFiddle - React, Tailwind, and code Playground

by Rohit Boggarapu

HTML

<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts.js&quot;"></script>
<div id="donut-chart">Donut chart is coming!</div>
<div id="event-demo"></div>

CSS

#event-demo {
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
  line-height: 3;
}

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: "doughnut2d",
    renderAt: "donut-chart",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      "chart": {
        "caption": "Acme Inc's 2015 Revenue Split",
        "numberPrefix": "$",
        "use3DLighting": "0",
        "showPercentValues": "1",
        "showLegend": "1",
        "defaultCenterLabel": "Total revenue: $64.08K",
        "centerLabel": "Revenue from $label: $value",
        "decimals": "0",
      },
      "data": [{
        "label": "Food",
        "value": "28504"
      }, {
        "label": "Apparels",
        "value": "14633"
      }, {
        "label": "Electronics",
        "value": "10507"
      }, {
        "label": "Household",
        "value": "4910"
      }]
    },
     "events": {
        "dataPlotClick": function(eventObj, dataObj) {
          var a = document.getElementById('event-demo');
          a.innerHTML = "You clicked on: " + dataObj.categoryLabel;
        }
      }
  });
  revenueChart.render();
});