JSFiddle - React, Tailwind, and code Playground

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chardiv_parent">
  <div id="chartdiv">
  </div>
  <div id="option">
    <select id="group_selection">
  <option value="grp1">Group 1</option>
  <option value="grp2">Group 2</option>
  <option value="grp3">Group 3</option>
  <option value="grp4">Group 4</option>
</select>
  </div>
</div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 400px;
}

#chardiv_parent {
  position: relative;
}

#option {
  position: absolute;
  top: 10px;
  right: 10px;
}

JavaScript

var jsonData = [{
    "group_1": [{
        "date": "2014-02-01",
        "cummulative": 4833.74,
        "curr1": 1678.2,
        "curr2": 1073.39,
        "curr3": 1582.9,
        "curr4": 2536.63,
        "curr5": 1281.92,
        "curr6": 3450.91
      },
      {
        "date": "2014-02-02",
        "cummulative": 3294.7,
        "curr1": 3874.33,
        "curr2": 2197.85,
        "curr3": 1394.36,
        "curr4": 2704.66,
        "curr5": 3983.95,
        "curr6": 2933.04
      },
      {
        "date": "2014-02-03",
        "cummulative": 3962.7,
        "curr1": 1711.62,
        "curr2": 2469.43,
        "curr3": 3020.7,
        "curr4": 1209.16,
        "curr5": 2297.29,
        "curr6": 2462.85
      },
      {
        "date": "2014-02-04",
        "cummulative": 4437.83,
        "curr1": 2648.55,
        "curr2": 2416.87,
        "curr3": 3260.51,
        "curr4": 2407.13,
        "curr5": 2562.91,
        "curr6": 2287.84
      },
      {
        "date": "2014-02-05",
        "cummulative": 3673.64,
        "curr1": 3024.14,
        "curr2": 3088.87,
        "curr3": 1717.65,
        "curr4": 2589.17,
        "curr5": 3019.37,
        "curr6": 3031.41
      },
      {
        "date": "2014-02-06",
        "cummulative": 3174.42,
        "curr1": 1629.52,
        "curr2": 1950,
        "curr3": 1016.04,
        "curr4": 2677.97,
        "curr5": 1889.66,
        "curr6": 3797.16
      },
      {
        "date": "2014-02-07",
        "cummulative": 4781.5,
        "curr1": 3534.53,
        "curr2": 3905.36,
        "curr3": 2024.26,
        "curr4": 1347.12,
        "curr5": 2230.14,
        "curr6": 2580.61
      },
      {
        "date": "2014-02-08",
        "cummulative": 4730.31,
        "curr1": 3130.13,
        "curr2": 3149.09,
        "curr3": 3964.46,
        "curr4": 2155.51,
        "curr5": 1765.24,
        "curr6": 3727.92
      },
      {
        "date": "2014-02-09",
        "cummulative": 4819.7,
        "curr1": 2569.03,
       ...