JSFiddle - React, Tailwind, and code Playground

Delta MicorChart - mySmartApp

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

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "rotate": true,
  "dataProvider": [{
    "name": "Income A",
    "open": 0,
    "close": 11.13,
    "color": "#54cb6a",
    "balloonValue": 11.13
  }, {
    "name": "Income B",
    "open": 11.13,
    "close": 15.81,
    "color": "#54cb6a",
    "balloonValue": 4.68
  }, {
    "name": "Total Income",
    "open": 0,
    "close": 15.81,
    "color": "#169b2f",
    "balloonValue": 15.81
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }],
  "startDuration": 1,
  "marginTop": 0,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 0,
  "autoMargins": false,
  "graphs": [{
    "balloonText": "<span style='color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]] Mln</b>",
    "colorField": "color",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "labelText": "$[[balloonValue]]",
    "lineColor": "#BBBBBB",
    "openField": "open",
    "type": "column",
    "valueField": "close",
    //"labelPosition": "inside",
    //"labelOffset": 0,
    //"labelAnchor": "start",
    "columnWidth": 0.4,
    "clustered": true,
  },{
  	"clustered": true,
    "balloonText": "<span style='color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]] Mln</b>",
    "colorField": "color",
    "fillAlphas": 0.8,
    //"labelText": "$[[balloonValue]]",
    "lineColor": "#BBBBBB",
    "openField": "open",
    "type": "column",
    "valueField": "close",
    "columnWidth": 0.4,
  }],
  "trendLines": [{
    "dashLength": 3,
    "finalCategory": "Income B",
    "finalValue": 11.13,
    "initialCategory": "Income A",
    "initialValue": 11.13,
    "lineColor": "#888888"
  }, {
    "dashLength": 3,
    "finalCategory": "Income B",
    "finalValue": 15.81,
    "initialCategory": "Total Income",
    "initialValue": 15.81,
    "lineColor": "#888888"
  }],
  "columnWidth": 1,
  "categoryField": "name",
  "categoryAxis": {
  	"inside": true,
    "gridPosition": "start",
   ...