JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"dataProvider": [{
"year": 2009,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2010,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2011,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2012,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2013,
"income": 30.6,
"expenses": 27.2,
"dashLengthLine": 5
}, {
"year": 2014,
"income": 34.1,
"expenses": 29.9,
//"dashLengthColumn": 5,
"alpha": 0.2,
"additional": "(projection)"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1,
"graphs": [{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Income",
"type": "column",
"valueField": "income"
}, {
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthLine",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Expenses",
"valueField": "expenses"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
chart.addListener("rendered", addListeners);
function addListeners() {
var categoryAxis = chart.categoryAxis;
categoryAxis.addListener("clickItem", handleClick);
categoryAxis.addListener("rollOverItem", handleOver);
categoryAxis.addListener("rollOutItem", handleOut);
}
function handleClick(event) {
...