JSFiddle - React, Tailwind, and code Playground

Comparison Chart

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		: 95px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "year",
  "rotate": true,
  "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": [ {
    /**
     * These two graphs are just here for labels
     * They're basically invisible, save for the label itself,
     * but underneath they're just stacked column graphs
     */
    "labelText": "[[year]]",
    "labelPosition": "inside",
    "labelOffset": 0,
    "labelAnchor": "start",
    "fontSize": 12,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Income",
    "type": "column",
    "columnWidth": 1,
    //"fixedColumnWidth": '14px',
    "valueField": "income","fixedColumnWidth": '14px',
    "showBalloon": false,
    "visibleInLegend": false
  }, {
    "labelText": "[[value]]",
    "labelPosition": "right",
    "labelOffset": 0,
    "labelAnchor": "end",
    "fontSize": 12,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Expenses",
    "type": "column",
    "columnWidth": 1,
    "valueField": "expenses",
    "showBalloon": false,
    "visibleInLegend": false
  }, {
    /**
     * We start a new stack with this graph
     */
    "newStack": true,
    "balloonText": "Income:[[value]]",
    //"labelText": "[[value]]",
    //"labelPosition": "inside",
    //"color": "#fff",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "columnWidth": 0.4,
    "valueField": "income"
  }, {
    "balloonText": "Expenses:[[value]]",
    //"labelText": "[[value]]",
    //"labelPosition": "inside",
    //"color": "#fff",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "title": "Expenses",
    "type": "column",
    "columnWidth": 0.4,
   ...