Recharts: Legend is not picking up the margin property

Created on 26 Jul 2017  路  3Comments  路  Source: recharts/recharts

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

If I right align the legend there is no padding between the legend and the report. If I manually try and set a margin on the legend it is ignored.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/qbmg1567/).

http://jsfiddle.net/qbmg1567/512/

What is the expected behavior?

It should have at least a small bit of left padding or horizontal margin or let me manually override the margin without forcing me to fully replace the legend component

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

No, All versions of Rechart and on both firefox and chrome.

Most helpful comment

Hi, I ran into the same issue by setting the style myself via the _wrapperStyle_ property of the legend.

<Legend
    verticalAlign="top"
    layout="vertical"
    align="right"
    wrapperStyle={{
        paddingLeft: "10px"
    }}
/>

You can see an example of the end result at https://hq.squadlytics.com/squadlytics-development/deployments

All 3 comments

I'm having the same issue trying to line the legend up with a line chart's Y axis labels. Upon digging around with chrome inspector, It seems the margin isn't being applied at all. Oddly enough, placing a margin on the parent chart does apply that same margin to the legend.

Hi! Experiencing the same problem. Is there a workaround for this?

Hi, I ran into the same issue by setting the style myself via the _wrapperStyle_ property of the legend.

<Legend
    verticalAlign="top"
    layout="vertical"
    align="right"
    wrapperStyle={{
        paddingLeft: "10px"
    }}
/>

You can see an example of the end result at https://hq.squadlytics.com/squadlytics-development/deployments

Was this page helpful?
0 / 5 - 0 ratings