JSFiddle - React, Tailwind, and code Playground

by ashishsingh

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></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: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  "name": "Jan",
  "2014-startTime": 4,
  "2014-endTime": 8,
    "2014-step": 6.5,
    "2015-startTime": 4.2,
  "2015-endTime": 7.8,
    "2015-step": 6.15,
  "color": "#A0C23A"
}, {
  "name": "Feb",
  "2014-startTime": 5.5,
  "2014-endTime": 6.7,
    "2014-step": 6.3,
    "2015-startTime": 6,
  "2015-endTime": 6.5,
    "2015-step": 6.2,
  "color": "#A0C23A"
}, {
  "name": "March",
  "2014-startTime": 4.5,
  "2014-endTime": 7,
    "2014-step": 5.2,
    "2015-startTime": 4.85,
  "2015-endTime": 6.7,
    "2015-step": 5.8,
  "color": "#A0C23A"
}, {
  "name": "Apr",
  "2014-startTime": 5.5,
  "2014-endTime": 7,
    "2014-step": 6,
    "2015-startTime": 5.9,
  "2015-endTime": 6.7,
    "2015-step": 6.1,
  "color": "#A0C23A"
}, {
  "name": "May",
  "2014-startTime": 5,
  "2014-endTime": 6.5,
    "2014-step": 5.8,
    "2015-startTime": 5.2,
  "2015-endTime": 6.2,
    "2015-step": 5.6,
  "color": "#A0C23A"
}, {
  "name": "Jun",
  "2014-startTime": 5.2,
  "2014-endTime": 7.1,
    "2014-step": 6.2,
    "2015-startTime": 5.5,
  "2015-endTime": 6.8,
    "2015-step": 6.3,
  "color": "#A0C23A"
}, {
  "name": "Jul",
  "2014-startTime": 4,
  "2014-endTime": 7,
    "2014-step": 4.6,
    "2015-startTime": 3.9,
  "2015-endTime": 5.2,
    "2015-step": 4.1,
  "color": "#A0C23A"
}, {
  "name": "Aug",
  "2014-startTime": 5.5,
  "2014-endTime": 7,
    "2014-step": 5.8,
    "2015-startTime": 5,
  "2015-endTime": 6,
    "2015-step": 5.5,
  "color": "#A0C23A"
}, {
  "name": "Sep",
  "2014-startTime": 6,
  "2014-endTime": 7,
    "2014-step": 6.2,
    "2015-startTime": 6.2,
 ...