AmCharts Serial Chart: Center-align label under the axis points

Question

In this AmCharts serial chart (Line chart), when the line chart gets rendered, the label in the category axis gets right-aligned from the datapoint intersection.

I need these labels to be center-aligned just below the datapoint intersection scale.

This is the current source code:

 chart = AmCharts.makeChart(id, {
        "type": "serial",
        "autoMarginOffset": 20,
        "usePrefixes":true,
        "prefixesOfBigNumbers":[
            {"number":1e+3,"prefix":"k"},
            {"number":1e+6,"prefix":"M"},
            {"number":1e+9,"prefix":"G"},
            {"number":1e+12,"prefix":"T"},
            {"number":1e+15,"prefix":"P"},
            {"number":1e+18,"prefix":"E"},
            {"number":1e+21,"prefix":"Z"},
            {"number":1e+24,"prefix":"Y"}
        ],
        "valueAxes": [{
            "id": "v1",
            "position": "left",
            "ignoreAxisWidth":false
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0,
        },
        "graphs": [{
            "id": "g1",
            "fillColors":color,
            "lineColor": color,
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "fillColors": color,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "column-2"
        }],
        "chartCursor": {
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "categoryBalloonDateFormat": 'JJ-NN'
        },
        "categoryField": "column-1",
        "categoryAxis": {
            "gridPosition": "start",
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": false,
            "minPeriod": "mm",
            "gridPosition":'middle',
            "centerLabels":true,
            "equalSpacing":false
        },
        "dataProvider": dataValue,
        "export": {
            "enabled": true
         },
         "allLabels": [{
            "text": timeperiod,
            "align": "center",
            "y":0
        }]
});

And this is the rendered graph:

How can this be fixed?

xorspark xorspark · Accepted Answer · 2018-06-19T13:58:54

To get the label centered directly under the tick when parsing dates, you have to set equalSpacing to true.

var color = "#112233";
var timeperiod = "test";
var dataValue = generateData();
var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "autoMarginOffset": 20,
        "usePrefixes":true,
        "prefixesOfBigNumbers":[
            {"number":1e+3,"prefix":"k"},
            {"number":1e+6,"prefix":"M"},
            {"number":1e+9,"prefix":"G"},
            {"number":1e+12,"prefix":"T"},
            {"number":1e+15,"prefix":"P"},
            {"number":1e+18,"prefix":"E"},
            {"number":1e+21,"prefix":"Z"},
            {"number":1e+24,"prefix":"Y"}
        ],
        "valueAxes": [{
            "id": "v1",
            "position": "left",
            "ignoreAxisWidth":false
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0,
        },
        "graphs": [{
            "id": "g1",
            "fillColors":color,
            "lineColor": color,
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "fillColors": color,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "column-2"
        }],
        "chartCursor": {
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "categoryBalloonDateFormat": 'JJ-NN'
        },
        "categoryField": "column-1",
        "categoryAxis": {
            //"gridPosition": "start", does not work with parseDates
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": false,
            "minPeriod": "mm",
            "gridPosition":'middle',
            //"centerLabelOnFullPeriod":false, //alternate solution but won't center directly under the axis tick
            "equalSpacing":true
        },
        "dataProvider": dataValue,
        "export": {
            "enabled": true
         },
         "allLabels": [{
            "text": timeperiod,
            "align": "center",
            "y":0
        }]
});

function generateData() {
  var data = [];
  var firstDate = new Date();
  firstDate.setHours(0,0,0,0);
  
  for (var i = 0; i < 10; ++i) {
    var newDate = new Date(firstDate);
    newDate.setMinutes(i);
    data.push({
      "column-1": newDate,
      "column-2": Math.floor(Math.random() * 20 + 1)
    });
  }
  
  return data;
}

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

You can also use centerLabelOnFullPeriod if you don't want to use equalSpacing, but it will only position it slightly to the right of the tick but not quite at the center.

AmCharts Serial Chart: Center-align label under the axis points

1 Answers