How can I add custom y axis labels to serial chart in amcharts?

Question

I'm basically making a variation of this chart: https://www.amcharts.com/demos/reversed-value-axis/

Looking through the docs and I can't find a way to add my own custom y-axis steps and labels except by creating "guides". However the y values and labels remain, and even if I hide them, the position of the "guide" label I add is at the middle of the value rather than at the position where the line is.

Is there a way to either give my serial chart custom y values OR place the guide labels at the very top where the line of their value is?

xorspark xorspark · Accepted Answer · 2016-09-20T23:18:09

If you need custom labels at specific points or need to create your own steps, then guides are the way to go.

To make the guide label appear on top of the guide line, set the guide's inside property to true. This will bring the label inside the chart area and on top of the line. If you want the label to appear outside the chart area, set the labelOffset to a negative value.

"valueAxes": [{
  // ...
  "guides": [{
    "value": 1.5,
    "lineAlpha": 1,
    "label": "1.5",
    "inside": true,
    "labelOffset": -35
  }]
}]

Here's a modified demo of the chart you linked to that illustrates this:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "useGraphSettings": true
  },
  "dataProvider": [{
    "year": 1930,
    "italy": 1,
    "germany": 5,
    "uk": 3
  }, {
    "year": 1934,
    "italy": 1,
    "germany": 2,
    "uk": 6
  }, {
    "year": 1938,
    "italy": 2,
    "germany": 3,
    "uk": 1
  }, {
    "year": 1950,
    "italy": 3,
    "germany": 4,
    "uk": 1
  }, {
    "year": 1954,
    "italy": 5,
    "germany": 1,
    "uk": 2
  }, {
    "year": 1958,
    "italy": 3,
    "germany": 2,
    "uk": 1
  }, {
    "year": 1962,
    "italy": 1,
    "germany": 2,
    "uk": 3
  }, {
    "year": 1966,
    "italy": 2,
    "germany": 1,
    "uk": 5
  }, {
    "year": 1970,
    "italy": 3,
    "germany": 5,
    "uk": 2
  }, {
    "year": 1974,
    "italy": 4,
    "germany": 3,
    "uk": 6
  }, {
    "year": 1978,
    "italy": 1,
    "germany": 2,
    "uk": 4
  }],
  "valueAxes": [{
    "integersOnly": true,
    "maximum": 6,
    "minimum": 1,
    "reversed": true,
    "axisAlpha": 0,
    "dashLength": 5,
    "autoGridCount": false,
    "gridCount": 10,
    "position": "left",
    "title": "Place taken",
    "guides": [{
      "value": 1.5,
      "lineAlpha": 1,
      "label": "1.5",
      "inside": true,
      "labelOffset": -35
    }]
  }],
  "startDuration": 0.5,
  "graphs": [{
    "balloonText": "place taken by Italy in [[category]]: [[value]]",
    "bullet": "round",
    "hidden": true,
    "title": "Italy",
    "valueField": "italy",
    "fillAlphas": 0
  }, {
    "balloonText": "place taken by Germany in [[category]]: [[value]]",
    "bullet": "round",
    "title": "Germany",
    "valueField": "germany",
    "fillAlphas": 0
  }, {
    "balloonText": "place taken by UK in [[category]]: [[value]]",
    "bullet": "round",
    "title": "United Kingdom",
    "valueField": "uk",
    "fillAlphas": 0
  }],
  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "fillAlpha": 0.05,
    "fillColor": "#000000",
    "gridAlpha": 0,
    "position": "top"
  },
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 350px;"></div>

How can I add custom y axis labels to serial chart in amcharts?

1 Answers