JSFiddle - React, Tailwind, and code Playground

by Gagan Sikri

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container"></div>

JavaScript

const dataSource = {
  "chart": {
    "dateformat": "mm/dd/yyyy",
    "caption": "Project Schedule for Operation BigHead",
    "subcaption": "",
    "theme": "fusion",
    "canvasborderalpha": "40",
    "ganttlinealpha": "50",
    "plottooltext": "$PercentComplete complete"
  },
  "tasks": {
    "color": "#008000",
    "task": [
      {
        "start": "11/30/2016",
        "end": "12/07/2016",
        "percentcomplete": "100",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/05/2016",
        "end": "12/16/2016",
        "percentcomplete": "100",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/05/2016",
        "end": "01/08/2017",
        "percentcomplete": "75",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/05/2016",
        "end": "01/09/2017",
        "percentcomplete": "80",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/10/2016",
        "end": "01/20/2017",
        "percentcomplete": "60",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/14/2016",
        "end": "12/28/2016",
        "percentcomplete": "35",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/26/2016",
        "end": "01/10/2017",
        "percentcomplete": "40",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "12/26/2016",
        "end": "01/10/2017",
        "percentcomplete": "50",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "01/10/2017",
        "end": "01/17/2017",
        "percentcomplete": "20",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start": "01/18/2017",
        "end": "02/02/2017",
        "percentcomplete": "5",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "start":...