Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@vx/legend: LegendLabel not customizable with className or style props #444

Closed
djizco opened this issue Apr 3, 2019 · 1 comment · Fixed by #749
Closed

@vx/legend: LegendLabel not customizable with className or style props #444

djizco opened this issue Apr 3, 2019 · 1 comment · Fixed by #749

Comments

@djizco
Copy link

djizco commented Apr 3, 2019

LegendLabel doesn't receive a className or style prop meaning you can't add custom styles such as font size or color. I believe LegendItem has the same issue.

@xrpza
Copy link

xrpza commented Nov 6, 2019

I know this is an old thread, but I'm responding here in case others need the info.

You can achieve the styling you're looking for by specifying formatting the Child of LegendLabel. For example, you could employ <span> as follows to color the label:

 <LegendItem 
    key={`legend-key-here`} 
    margin={"0 5px"}
 >
    <svg width={15} height={15}>
        <rect fill={"#51bcda"} width={15} height={15} />
    </svg>
    <LegendLabel
        align={"left"}
        margin={"0 0 0 4px"}
    >
        <span className={"my-color-class"}>My Label</span>
    </LegendLabel>
</LegendItem>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants