Inventory Balloon Position
Taken from "real" data
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: 100px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
JavaScript
var chartData = getChartData();
var chart = AmCharts.makeChart("chartdiv", chartData);
function _balloonFunction(d, chart) {
return `${d.dataContext.DATEFROM}<br>Inventory: ${d.dataContext.CLOSING}<br>Safety Stock: ${d.dataContext.SAFETYSTOCK}`;
}
function getChartData() {
return {
"type": "serial",
"addClassNames": true,
"autoMargins": false,
"marginLeft": 0, "marginRight": 0, "marginTop": 0, "marginBottom": 0,
"valueAxes": [{ "axisAlpha": 0, "position": "left" }],
"startDuration": 0,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"graphs": [
{
"id": "inventory",
"title": "Inventory",
"type": "column",
"fillAlphas": 1,
"valueField": "CLOSING",
"colorField": "COLOUR",
"lineThickness": 0,
"balloonFunction": _balloonFunction
}, {
"id": "ss",
"title": "Safety Stock",
"bullet": "round",
"lineThickness": 2,
"bulletSize": 7,
"lineAlpha": 1,
"valueField": "SAFETYSTOCK",
"balloonFunction": _balloonFunction
}
],
"categoryField": "DATEFROM",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0.06,
"axisAlpha": 0,
"tickLength": 0,
"minorGridEnabled": true
},
"numberFormatter": { "precision": 2, "decimalSeparator": ".", "thousandsSeparator": "," },
"dataProvider": [
{"DATEFROM":"2018-02-28T00:00:00","CLOSING":60000,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-03T00:00:00","CLOSING":60000,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-04T00:00:00","CLOSING":27750,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-05T00:00:00","CLOSING":27750,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-16T00:00:00","CLOSING":27750,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-17T00:00:00","CLOSING":27750,"SAFETYSTOCK":0},
{"DATEFROM":"2018-03-18T00:00:00","CLOSING":24000,"SAFETYSTOCK":0},
...