how to add X Axis & Y Axis Titles using AMCharts V5

Question

I am using amCharts Version 5. How do i add labels along xAxis and y Axis . I am using ValueAxis ( in an XY Chart ) . Attached the image below for better understanding

I was able to find documentation about how to achieve it in V4 but not V5.

IN V4 :

valueAxis.title.text = "Turnover ($M)";

X-Axis Y-Axis Labels

Answer 1

With amCharts 5, you can use the Label class which is introduced here: Labels – amCharts 5 Documentation

The complete reference is there: Label – amCharts 5 Documentation

So what you have to do is simply creating one Label instance for each axis using the new method. I recommend you to push an instance on your xAxis.children and unshift another one on your yAxis.children. If you use push every time, you may have a bit of extra work with positioning because of the natural order of axes' children.

You will find an example below.

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  }));
  
  xAxis.children.push(am5.Label.new(root, {
    text: 'xAxis title',
    textAlign: 'center',
    x: am5.p50,
    fontWeight: 'bold'
  }));

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));
  
  yAxis.children.unshift(am5.Label.new(root, {
    text: 'yAxis title',
    textAlign: 'center',
    y: am5.p50,
    rotation: -90,
    fontWeight: 'bold'
  }));

  let series = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category"
  }));

  let data = [
    {
      category: "Foo",
      value: 1337
    },
    {
      category: "Bar",
      value: 42
    }
  ];

  xAxis.data.setAll(data);
  series.data.setAll(data);

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>