JSFiddle - React, Tailwind, and code Playground

Area MicoChart

by ashishsingh

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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

body {
  background: white;
}
#chartdiv {
	width		: 200px;
	height		: 85px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "date",
  "rotate": false,
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start",
    "position": "left",
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  },
  "columnSpacing": 0,
  "columnWidth": 1,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 5,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [{
    //"labelText": "[[value]]",
    //"labelPosition": "inside",
    //"color": "#fff",
    "fillAlphas": 0.3,
    "lineAlpha": 1,
    "lineThickness": 3,
    "type": "line",
    "valueField": "duration"
  } ],
  "valueAxes": [ {
    "position": "top",
    "axisAlpha": 0,
    "gridAlpha": 0
  } ],
  "dataProvider": [ {
        "lineColor": "#b7e021",
        "date": "2012-01-01",
        "duration": 408
    }, {
        "date": "2012-01-02",
        "duration": 482
    }, {
        "date": "2012-01-03",
        "duration": 562
    }, {
        "date": "2012-01-04",
        "duration": 379
    }, {
        "lineColor": "#fbd51a",
        "date": "2012-01-05",
        "duration": 501
    }, {
        "date": "2012-01-06",
        "duration": 443
    }, {
        "date": "2012-01-07",
        "duration": 405
    }, {
        "date": "2012-01-08",
        "duration": 309,
        "lineColor": "#2498d2"
    }, {
        "date": "2012-01-09",
        "duration": 287
    }, {
        "date": "2012-01-10",
        "duration": 485
    }, {
        "date": "2012-01-11",
        "duration": 890
    }, {
        "date": "2012-01-12",
        "duration": 810
    }],
  "creditsPosition": "bottom-right"

} );