Reversed Value Axis
Values on value axis can be reversed - the smallest value will be on top and the biggest - in the bottom. This is mostly used to show the positions of sport events and similar.
<h2>Smart legend markers</h2>
Instead of displaying rectangle or some other shape, the legend can automatically create legend marker which would repeat the graph style - use it's line color/thickness and bullet style.
by Rogério Saraceni
March 22, 2019
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" />
<div id="chartdiv"></div>
CSS
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"legend": {
"useGraphSettings": true
},
"dataProvider": [{
"year": "jan",
//"italy": 1,
//"germany": 5,
"uk": 3
}, {
"year": "fev",
//"italy": 1,
//"germany": 2,
"uk": 6
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 6,
"minimum": 1,
"reversed": true,
"axisAlpha": 0,
"dashLength": 5,
"gridCount": 10,
"position": "left",
"title": "Place taken"
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "place taken by UK in [[category]]: [[value]]",
"bullet": "round",
"title": "United Kingdom",
"valueField": "uk",
"fillAlphas": 0
}],
"chartCursor": {
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"fillAlpha": 0.05,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "top"
},
"export": {
"enabled": true,
"position": "bottom-right"
}
});