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": {
    "caption": "New Store Opening - Project Plan",
    "dateformat": "dd/mm/yyyy",
    "outputdateformat": "ddds mns yy",
    "ganttwidthpercent": "60",
    "ganttpaneduration": "40",
    "ganttpanedurationunit": "d",
    "useverticalscrolling": "0",
    "plottooltext": "<b>$label</b><br>Start: <b>$start</b><br>End: <b>$end</b>",
    "theme": "fusion"
  },
  "connectors": [
    {
      "connector": [
        {
          "fromtaskid": "1-1",
          "totaskid": "2-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "2-1",
          "totaskid": "3-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "3-1",
          "totaskid": "4-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "4-1",
          "totaskid": "5-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "5-1",
          "totaskid": "6-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "6-1",
          "totaskid": "7-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "7-1",
          "totaskid": "8-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "8-1",
          "totaskid": "9-1",
          "color": "#F2726F",
          "thickness": "2"
        },
        {
          "fromtaskid": "9-1",
          "totaskid": "10-1",
          "color": "#F2726F",
          "thickness": "2"
        }
      ]
    }
  ],
  "trendlines": [
    {
      "line": [
        {
          "start": "14/4/2018",
          "displayvalue": "AC Testing",
          "color": "5D5D5D",
          "thickness": "1",
          "dashed": "1"
        }
      ]
    }
  ],
  "milestones": {
    "milestone": [
      {
        "date":...