Search code examples
javascriptlegendamcharts

How to apply horizontal alignment in amchrts legend?


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

Applying option

chart.legend.align = 'right'

has no effect

Codepen


Solution

  • 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.