Toggle categoryAxis label align
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>
<button id="toggler">Toggle categoryAxis label align</button>
<div id="chartdiv"></div>
CSS
body {
font-size: 8px;
}
#chartdiv {
width : 100%;
height : 100px;
}
JavaScript
function toggleAlign(chart) {
for ( i in chart.categoryAxis.allLabels ) {
var label = chart.categoryAxis.allLabels[i].node;
var dad = label.parentNode;
var labelT = label.getAttribute('transform').replace(/\w+/,'').slice(1,-1).split(',');
var dadT = dad.getAttribute('transform').replace(/\w+/,'').slice(1,-1).split(',');
var x = Number(dadT[0]*-1) - Number(labelT[0]) + label.offsetWidth;
var y = Number(labelT[1]);
label.setAttribute('transform','translate('+ String(x) +','+ String(y) +')');
}
}
document.getElementById('toggler').onclick = function() {
toggleAlign(chart);
}
var chart = AmCharts.makeChart("chartdiv", {
"theme": "none",
"type": "serial",
"dataProvider": [{
"name": "John",
"startTime": 0,
"endTime": 2,
"color": "#FF0F00"
}],
"valueAxes": [{
"unit": ":00",
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]:00<br>ends at [[endTime]]:00",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}],
"rotate": true,
"columnWidth": 1,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
},
"exportConfig":{
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": "http://www.amcharts.com/lib/3/images/export.png",
"format": 'png'
}]
}
});