How to start bars from right to left using amchart?
I want to start horizontal bars from right sides as below image
Thanks in advance
Solution 1:
You need to set rotate to true, the category axis' position property to "right" and set the value axis' reversed property to true:
var chart = AmCharts.makeChart("chartdiv", {
// ...
"rotate": true,
"categoryAxis": {
"position": "right",
//...
},
"valueAxes": [{
"reversed": true,
// ...
}],
// ...
});
Demo below:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"rotate": true,
"categoryAxis": {
"position": "right"
},
"valueAxes": [{
"reversed": true
}],
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"categoryField": "country"
});html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}<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>