JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chart" align="center">&nbsp; </div>

CSS

#chart{height:350px; width:95%; margin:30px auto; cursor: pointer;}

JavaScript

var chartcf;

var chartDatacf = 
[
	{
	month: "Jan",
	income: 8123,
	expenses: -1651,
	cashflow: 6472,
	}, 
	
	{
	month: "Feb",
	income: 4652,
	expenses: -2165,
	cashflow: 2487,
	}, 
	
	{
	month: "Apr",
	income: 2561,
	expenses: -2165,
	cashflow: 3296,
	},
	
	{
	month: "May",
	income: 2345,
	expenses: -1565,
	cashflow: 1231,
	}, 
	
	{
	month: "Jun",
	income: 3235,
	expenses: -2510,
	cashflow: 3220,
	},
	
	{
	month: "Jul",
	income: 1224,
	expenses: -2575,
	cashflow: 2110,
	}, 
	
	{
	month: "Aug",
	income: 4325,
	expenses: -3165,
	cashflow: 4396,
	},
	
	{
	month: "Sep",
	income: 4123,
	expenses: -151,
	cashflow: 3972,
	}, 
	
	{
	month: "Oct",
	income: 5123,
	expenses: -1251,
	cashflow: 3872,
	}, 
	
	{
	month: "Nov",
	income: 3456,
	expenses: -4365,
	cashflow: -909,
	}, 
	
	{
	month: "Dec",
	income: 7653,
	expenses: -1541,
	cashflow: 6112,
	}

];


AmCharts.ready(function()
{
	// SERIAL CHART  
	chartcf = new AmCharts.AmSerialChart();
	chartcf.pathToImages = "images/";
	chartcf.dataProvider = chartDatacf;
	chartcf.categoryField = "month";
	chartcf.backgroundAlpha = 1;
	chartcf.backgroundColor = "#FFFFFF";
	chartcf.startDuration = .4;
	chartcf.startEffect = "<>";
	
	// listen for "dataUpdated" event
	chartcf.addListener("dataUpdated", zoomChartcf);
	chartcf.addListener("clickGraphItem", handleClick);
	
	// AXES
	// category
	var categoryAxis = chartcf.categoryAxis;
	categoryAxis.gridAlpha = 0;
	categoryAxis.gridPosition = "start";
	
	// value
	var valueAxis = new AmCharts.ValueAxis();
	valueAxis.stackType = "regular";
	valueAxis.gridAlpha = 0.1;
	valueAxis.axisAlpha = 0;
	valueAxis.unit = "$";
	valueAxis.unitPosition = "left";
	chartcf.addValueAxis(valueAxis);
	
	// GRAPHS
	// column graph
	var graph = new AmCharts.AmGraph();
	graph.type = "column";
	graph.title = "Income";
	graph.lineColor = "#2CA336";
	graph.valueField = "income";
	graph.balloonText = "Income:$[[value]]";
	graph.fillColors = ["#2D851C"]
	graph.lineAlpha = 0;
	graph.fillAlphas =...