Formatting category axis date labels according to user's locale settings
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> http://jsfiddle.net/amcharts/4sqXM/?utm_source=website&utm_medium=embed&utm_campaign=4sqXM#
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value"
}],
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 30
},
"chartCursor": {
"cursorPosition": "mouse",
"pan": true,
"categoryBalloonFunction": function (date) {
return date.toLocaleDateString();
}
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top",
"labelFunction": function (valueText, date, categoryAxis) {
return date.toLocaleDateString();
}
},
exportConfig:{
menuRight: '20px',
menuBottom: '50px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider": [{
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-28",
"value": 11
}, {
"date": "2012-07-29",
"value": 15
}, {
"date": "2012-07-30",
"value": 16
}, {
"date": "2012-07-31",
"value": 18
}, {
"date": "2012-08-01",
"value": 13
}, {
"date": "2012-08-02",
"value": 22
...