user3476013 user3476013 - 1 month ago 21
Javascript Question

AmCharts weekly data display

i have some troubles with displaying data via amcharts when "minPeriod" property is equal to "WW".

My codepen examples:

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(i, 'days').toDate(),
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "DD",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}});


Days example (how it must look)

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
calcDate: moment(new Date()).startOf('day').add(7*i, 'days').toDate(),
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
"type": "column",
"fillAlphas": 1,
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
"lineColor": "#b6d278",
"valueField": "value"
}],
"chartCursor": {
"cursorAlpha": 0.1,
"cursorColor": "#000000",
},
"categoryAxis": {
"minPeriod": "WW",
"parseDates": true,
"minorGridEnabled": true
},
"export": {
"enabled": true
}
});


Week example (broken).

As you can see, all the last link's labels are aligned to the left and it makes my chart pretty ugly. I think it's happening because of the disconnecting between real values and expected by categoryAxis. Maybe there's a property to fix it, but i could'n find it.

If you've faced the same problem and have some advices to me, please help.

Answer

You can set centerLabels to true in your categoryAxis to force the labels to be centered.

Updated codepen