I'm using amcharts to create my chart, legend is in separate container.
Applying option
chart.legend.align = 'right'
has no effect
Codepen
I'm using amcharts to create my chart, legend is in separate container.
Applying option
chart.legend.align = 'right'
has no effect
Codepen
Share Improve this question asked Mar 20, 2019 at 14:31 Andrew ChervyakovAndrew Chervyakov 634 bronze badges 1- Can you attach an image of what are you trying to achieve? Column of legend items at the left of the chart? – Andriy Commented Mar 20, 2019 at 14:41
2 Answers
Reset to default 8If 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 remend 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.
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';