amCharts support forum

LarssaAndin · #1 2012-08-01 08:35:31

I've tried to place the legend for a pie chart using the position right and it doesn't work as expected. The legend shows up, but is pushed to the far right and using marginRight is ineffective. It looks like the width of the pie chart is not handled correctly and in this way causing it.

To verify, add these lines to the pieSimple.html sample at the appropriate position.

Code:

                // LEGEND
                legend = new AmCharts.AmLegend();
                legend.position = "right";
                chart.addLegend(legend);

martynasma · #2 2012-08-02 06:19:17

Looks good to me:

Maybe you can post a screenshot of what you're getting?

LarssaAndin · #3 2012-08-02 06:50:57

Sure, here is my version. I've tested it on several different browsers (Chrome, IE9, Safari) and use 2.7.4 version.

Make sure you have a wide enough browser window to see that the legend is always to the far right and don't stay at a reasonable distance from the pie chart (as it is in your screenshot). That is to the far right isn't really a major problem. It's the fact that I can't control the right margin at all that is. Should have written that in my original post, sorry.

I've tried marginRight both on the legend and on the chart without any effect. What I can see in the documentation autoMargins isn't applied to pie charts, or did I understand that incorrectly?

martynasma · #4 2012-08-03 03:59:21

What is the width of your chart container? If you don't have width set or it's something like 100% then container takes the whole width of the window and naturally the legend gets aligned to the far right.

LarssaAndin · #5 2012-08-03 04:07:30

It's set pretty wide (I think I used 800 in my example) and I don't really have problem with it being on the far right of the container (sort of the point of that position), yeah I know I wasn't very clear in my first post.

The real problem is that I can't control the margins for either the whole chart or the legend so the only way to get margins is to create a extra container around the chart which only role is to create the margin. This won't be needed if I can use the margins in the chart.

Should the margin settings work for this type of chart and can you give an example on how to do that?

martynasma · #6 2012-08-03 04:28:49

I'm not sure your explanation makes it clearer or even more complicated :)

In any way, chart calculates margins automatically. You can override them by setting chart.autoMargins = false and then explicitly setting marginLeft/marginRight/marginTop/marginBottom

I hope this answers your question.

LarssaAndin · #7 2012-08-03 05:05:34

Sorry, I will try to make my problem a little clearer :-)

This is image shows the legend div being marked (using chrome dev tools).

Looking at the HTML creating this div we can see that the position of this div is handled using left and top position values. What I'd like to be able to do is to control these two values. My problem would be solved if I can change left: 618px to 600px (or whatever will look good in my solution).

Code:

<div style="overflow: hidden; position: relative; width: 182.5px; height: 206px; left: 618px; top: 97px; ">...

Having played around with the margins for the chart I can see that they work fine, the small chart you can see in the image is with chart.marginRight = 100;. Without this margin the pie chart will be larger.

The problem seems to lie in the legend and its margin handling. As you can see, there are several issues with margins in the legend. The padding between the content and the border is 0 so border is more or less useless (I don't care much but still something to fix). Also, all margin settings for the legend are ignored.

As an example, this doesn't do anything at all to the legend what I can see. I'm not sure the autoMargins property is relevant at all but I've tried with and without it.

Code:

legend.autoMargins = false; 
legend.marginLeft = 50;
legend.marginRight = 50;

martynasma · #8 2012-08-06 00:09:04

You can:

Code:

legend.position = "absolute";
legend.left = "600px";
legend.top = "100px";

LarssaAndin · #9 2012-08-06 01:24:22

Ok, it might work in my case, I'll have to calculate the position, but I should have access to the data I need.

Thank you :-)

amCharts support forum

Announcement

JavaScript Charts: JavaScript Charts Bundle (Serial, Pie, XY, Radar)

#1 2012-08-01 08:35:31

Legend to the right of a pie chart seems broken

Code:

#2 2012-08-02 06:19:17

Re: Legend to the right of a pie chart seems broken

#3 2012-08-02 06:50:57

Re: Legend to the right of a pie chart seems broken

#4 2012-08-03 03:59:21

Re: Legend to the right of a pie chart seems broken

#5 2012-08-03 04:07:30

Re: Legend to the right of a pie chart seems broken

#6 2012-08-03 04:28:49

Re: Legend to the right of a pie chart seems broken

#7 2012-08-03 05:05:34

Re: Legend to the right of a pie chart seems broken

Code:

Code:

#8 2012-08-06 00:09:04

Re: Legend to the right of a pie chart seems broken

Code:

#9 2012-08-06 01:24:22

Re: Legend to the right of a pie chart seems broken