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

Configure legend label box radius #5061

Closed
Jlomaka opened this issue Dec 18, 2017 · 8 comments · Fixed by #8875
Closed

Configure legend label box radius #5061

Jlomaka opened this issue Dec 18, 2017 · 8 comments · Fixed by #8875

Comments

@Jlomaka
Copy link

Jlomaka commented Dec 18, 2017

The other day I wanted to change the radius of the label box and the height, but did not find any variable or form where it is written how it can be done. Chart.js version 2.7.1

@Jlomaka
Copy link
Author

Jlomaka commented Dec 25, 2017

7 days have passed and there is not even a hint of an answer. Can at least tell me what to expect or give an alternative?

@dariobraun
Copy link

Is this a valid feature request? If so, I'd like to give it a try!

@etimberg
Copy link
Member

etimberg commented Jun 8, 2020

Legend box height is now configurable in v3. The radius is not

@etimberg etimberg changed the title change label box radius and height Configure legend label box radius and height Oct 9, 2020
@etimberg etimberg changed the title Configure legend label box radius and height Configure legend label box radius Feb 21, 2021
@etimberg etimberg added this to the Version 3.1 milestone Mar 18, 2021
@etimberg etimberg self-assigned this Apr 10, 2021
@Pufke
Copy link

Pufke commented Aug 18, 2021

@Jlomaka If you want to change the radius of the label box, you can use this workaround and just set:
plugins: {
labels: {
usePointStyle: true,
pointStyle: 'rectRounded'
}
}

@bassem-mf
Copy link

Here is what worked for me.

options: {
    plugins: {
        legend: {
            labels: {
                usePointStyle: true,
                pointStyle: 'rectRounded'
            }
        }
    }
}

@Shohzodjon
Copy link

It's work , but how set custom border-radius to legend shape

@faizanahmed104
Copy link

It's work , but how set custom border-radius to legend shape

following 🥉

@Anubarak
Copy link

Anubarak commented Nov 21, 2023

Is this still not implemented?
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

legend: {
    labels: {
        borderRadius: 1000,
        useBorderRadius: true,
        usePointStyle: true,
        color: '#000',
    },
    position: 'top',
}

does not change the radius of my border, it's still to small
these colored circles should be thicker
image

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

Successfully merging a pull request may close this issue.

8 participants