最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to apply horizontal alignment in amchrts legend? - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 8

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 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';
发布评论

评论列表(0)

  1. 暂无评论