Search code examples
javascripthtmlamchartsamcharts4

Amchart: Label Names in Vertical Axes Stack Charts

The code of Vertical Stack Axes Chart is clearly documented here.

So I am not rewriting the code.

I was trying to put Labels to each stack as shown in this screenshot, but to no avail. Kindly help.

Vertical Axes Stack with label Names

Solution

  • You'll want to add a label to the value axis renderer.gridContainer, set their isMeasured = false so it's taken out of the flow of layout and doesn't interfere with anything else. You'll have to fiddle around with the layout to get it centered, but here's an example:

    var title = valueAxis.renderer.gridContainer.createChild(am4core.Label);
title.text =  "[bold]Price";
title.fill = series.fill;
title.isMeasured = false;
title.y = 8;
title.x = am4core.percent(50);
title.align = "center";
title.textAlign = "middle";

    Demo:

    https://codepen.io/team/amcharts/pen/3ee9e8c1b01cc6ce4cd8ffe275b18907