Syncing value axis across multiple chart instances
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>
CSS
#chartdiv, #chartdiv2 {
width : 49%;
height : 500px;
font-size : 11px;
float: left;
}
JavaScript
var chart1 = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"autoMargins": false,
"marginBottom": 70,
"marginLeft": 50,
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
},{
"country": "Germany",
"visits": 1322
},{
"country": "France",
"visits": 1114
},{
"country": "Spain",
"visits": 711
},{
"country": "Russia",
"visits": 580
}, {
"country": "Canada",
"visits": 441
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"labelRotation": 45
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
// we will need to wait for the first chart to initialize so we know its minimum and maximum values which we can use for the second chart
chart1.addListener('init', function () {
var chart2 = AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "none",
"autoMargins": false,
"marginBottom": 70,
"marginLeft": 50,
"dataProvider": [{
"country": "UK",
"visits": 1122
}, {
"country": "India",
"visits": 984
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "South Korea",
...