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": "dd/mm/yyyy",
    "caption": "Planned vs Actual",
    "subcaption": "For BigHead v3",
    "plottooltext": "<b>$label</b><br>Start: <b>$start</b><br>End: <b>$end</b>",
    "theme": "fusion"
  },
  "legend": {
    "item": [
      {
        "label": "Planned",
        "color": "#0000AA"
      },
      {
        "label": "Actual",
        "color": "#88D8B0"
      },
      {
        "label": "Slack (Delay)",
        "color": "#e44a00"
      }
    ]
  },
  "tasks": {
    "task": [
      {
        "label": "Planned",
        "processid": "1",
        "start": "5/4/2018",
        "end": "12/4/2018",
        "id": "1-1",
        "color": "#0000AA",
        "alpha": "100",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "label": "Actual",
        "processid": "1",
        "start": "5/4/2018",
        "end": "12/4/2018",
        "id": "1",
        "color": "#88D8B0",
        "alpha": "100",
        "height": "27%",
        "toppadding": "65%"
      },
      {
        "label": "Planned",
        "processid": "2",
        "start": "10/4/2018",
        "end": "20/4/2018",
        "id": "2-1",
        "color": "#0000AA",
        "alpha": "100",
        "height": "27%",
        "toppadding": "32%"
      },
      {
        "label": "Actual",
        "processid": "2",
        "start": "10/4/2018",
        "end": "22/4/2018",
        "id": "2",
        "color": "#88D8B0",
        "alpha": "100",
        "height": "27%",
        "toppadding": "65%"
      },
      {
        "label": "Delay",
        "processid": "2",
        "start": "20/4/2018",
        "end": "22/4/2018",
        "id": "2-2",
        "color": "#FF6F69",
        "alpha": "100",
        "height": "27%",
        "toppadding": "65%",
        "tooltext": "Delayed by 2 days."
      },
      {
        "label": "Planned",
        "processid": "3",
        "start": "21/4/2018",
        "end": "30/4/2018",
        "id": "3-1",
        "color":...