How to apply horizontal alignment in amchrts legend?

Question

I'm using amcharts to create my chart, legend is in separate container.

Applying option

chart.legend.align = 'right'

has no effect

Codepen

Answer 1

If you're looking to align the contents of the legend, i.e. the legend items to the right, and not the entire legend itself (I am presuming this, because the legend is in an external, custom <div>, and this is taken straight out of our guides on the subject. If you meant something else please do let us know.), then you'll have to change its layout, then align its contents to the right via contentAlign. E.g.

// Align legend items to the right
chart.legend.layout = "vertical";
chart.legend.contentAlign = "right";

Here's a demo:

https://codepen.io/team/amcharts/pen/0aa8b7741a25a86fafa48b747077b8e3

I highly recommend checking out our guide, "Working with Containers", it contains various details regarding laying things out in amCharts v4. Also, once you align everything to the right, the legend is still going to be locked into the height of its html wrapper, i.e. 150px in your case, with no way to access the rest of the content. The demo above is a fork of what's found in our "Making the external legend scrollable" guide.

Answer 2

legend.align has no effect, because the width of the legend is 100%.

This is used by parent Container when layouting its children.

You should align the content with legend.contentAlign:

chart.legend.contentAlign = 'right';

Here I forked your code pen to show the result.

Another error in you code pen is the value of legend.valign

Valid values are:

"top" | "middle" | "bottom" | "none"

See VerticalAlign.

So you should set it this way:

chart.legend.valign = 'middle';