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

CSS

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "autoMargins": false,
  "marginTop": 10,
  "marginBottom": 30,
  "marginLeft": 50,
  "marginRight": 0,
  "dataProvider": [{
    "months": "Jan",
    "YTD_variance": -3.5,
    "monthly_budget": 1.2,
    "actual_for_months": 3.2
  }, {
    "months": "Feb",
    "YTD_variance": -3.5,
    "monthly_budget": 4.2,
    "actual_for_months": 4.2
  }, {
    "months": "Mar",
    "YTD_variance": -3.5,
    "monthly_budget": 3.2,
    "actual_for_months": 1.2
  }, {
    "months": "Apr",
    "YTD_variance": -2.5,
    "monthly_budget": 2.2,
    "actual_for_months": 3.2
  }, {
    "months": "May",
    "YTD_variance": -1.5,
    "monthly_budget": 4,
    "actual_for_months": 2.2
  }, {
    "months": "Jun",
    "YTD_variance": 1.5,
    "monthly_budget": 5,
    "actual_for_months": 2.6
  }, {
    "months": "Jul",
    "YTD_variance": 3,
    "monthly_budget": 2,
    "actual_for_months": 0.2
  }, {
    "months": "Aug",
    "YTD_variance": -1,
    "monthly_budget": 4.5,
    "actual_for_months": 2.6
  }, {
    "months": "Sep",
    "YTD_variance": -3,
    "monthly_budget": 4.1,
    "actual_for_months": 2.4
  }, {
    "months": "Oct",
    "YTD_variance": -3.5,
    "monthly_budget": 4,
    "actual_for_months": 2,
    "actual_remaining_budget": 2.5
  }, {
    "months": "Nov",
    "YTD_variance": -1.6,
    "monthly_budget": 6.3,
    "actual_for_months": 4.2,
    "actual_remaining_budget": 1.2
  }, {
    "months": "Dec",
    "YTD_variance": -3.8,
    "monthly_budget": 4.4,
    "actual_for_months": 3.2,
    "actual_remaining_budget": 4.2
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "YTD_variance",
    "title": "YTD_variance"
  }, {
    "balloonText": "[[category]]:...