JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var dataProvider = [{
            "year": 2009,
            "income": 23.5,
            "expenses": 18.1,
            "color":"#ff0000",
            "ballooncolor":"#7897df"
        }, {
            "year": 2010,
            "income": 26.2,
            "expenses": 22.8,
            "color":"#56da53",
            "ballooncolor":"#0f710d"
        }, {
            "year": 2011,
            "income": 30.1,
            "expenses": 23.9,
            "color":"#54a5ca",
            "ballooncolor":"#35687f"
        }, {
            "year": 2012,
            "income": 29.5,
            "expenses": 25.1,
            "color":"#daa055",
            "ballooncolor":"#8f5d1d"
        }, {
            "year": 2013,
            "income": 30.6,
            "expenses": 27.2,
            "dashLengthLine": 5,
            "color":"#d46818",
            "ballooncolor":"#754929"
        }, {
            "year": 2014,
            "income": 34.1,
            "expenses": 29.9,
            "dashLengthColumn": 5,
            "alpha": 0.2,
            "additional": "(projection)",
            "color":"#a60cd2",
            "ballooncolor":"#650980"
        }];

var chart = new AmCharts.AmSerialChart();
chart.dataProvider = dataProvider;
chart.categoryField = "year";
chart.plotAreaFillAlphas = 0.2;
chart.marginRight = 0;
chart.marginTop = 0;
chart.rotate = true;
chart.startDuration = 1;

// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.gridPosition = "start";

// value axis
var valueAxis = new AmCharts.ValueAxis();
// Trick this line makes chart 3D stacked 
//  (columns are placed one behind another)
valueAxis.stackType = "3d";
valueAxis.dashLength = 5;
chart.addValueAxis(valueAxis);

// budget            
var budgetGraph = new AmCharts.AmGraph();
budgetGraph.type = "step";
//budgetGraph.color = "#c0504d";
budgetGraph.lineColor = "#7b8592";
budgetGraph.balloonColor = "#ffff00";
budgetGraph.noStepRisers = true;
budgetGraph.lineAlpha =...