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

Pie/Dougnut radius #3923

Closed
rgheller opened this issue Feb 17, 2017 · 8 comments · Fixed by #8487
Closed

Pie/Dougnut radius #3923

rgheller opened this issue Feb 17, 2017 · 8 comments · Fixed by #8487

Comments

@rgheller
Copy link

I try to scale the Pie because it's radius is now maximized to the size of the canvas. I want a smaller Pie.
So I use this code the extend the chart:

Chart.pluginService.register({
beforeDraw: function (chart) {
if (chart.options.radius != undefined) {
chart.chart.outerRadius *= chart.options.radius;
chart.chart.radiusLength *= chart.options.radius;
}
}
});

But is has no visual effect on the size of the pie. I can see however that the outerRadius has valid values, and I can change these values, but nothing happens.

Is this a bug, or are the outerRadius and radiusLengt fixed?

@etimberg
Copy link
Member

Which version are you using? If it's 2.5 you could use the layout padding options to force the chart to use a smaller canvas size

@rgheller
Copy link
Author

I'am using version 2.5, and tried the layout padding options. This only works partial since the pie gets smaller, but also the legend above the pie. It's the same effect as using a width on the canvas itself.
Aren't there any padding settings just for the pie itself?

@etimberg
Copy link
Member

There aren't any options for just the pie itself. I think your plugin would work if you used beforeUpdate instead of beforeDraw.

@rgheller
Copy link
Author

I tried the beforeDraw also. I even get real values for outerRadius in the beforeUpdate, and my code changes the value to a smaller outerRadius, but no visual effect.
Thanks anyway for suggesting possibilities. I just wait for this radius parameter to be a feature ;-)

@Robouste
Copy link

Hey, did you find a solution ? I find the pie way to big...

@rgheller
Copy link
Author

No, sorry, just went with the flow and still waiting for an updated version with radius support.

@Phong993
Copy link

Phong993 commented Mar 29, 2018

By default, Doughnut Or Pie will take the maximum dimension of canvas (width or height which is smaller) and set it to OuterRadius property. So with a little custom ChartJS will take the property in Options tag, I edited Chartjs.min.js which I attached in this comment. Download and embed into your project.

Just add outerRadius to Options: like this:

options: {
                    title: {
                        display: true,
                        text: 'General Info'
                    },
                    pieceLabel: {
                        render: 'label',
                        fontColor: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                        arc: true,
                        precision: 2
                    },
                    cutoutPercentage: 20, //Here for innerRadius. It's already exists
                    outerRadius: 100,//Here for outerRadius
                }

ChartJS.min.zip

@rgheller
Copy link
Author

Hey Phong993, Thank you for your effort to fix the radius problem with pies graphs. Is it possible to contribute your fix/work to the project so it will become a part of the main ChartJS fork?
I really appreciate your effort, but I rather stay with the lastest CharJS versions.

etimberg added a commit to etimberg/Chart.js that referenced this issue Dec 31, 2019
Adds a new option, `radiusPercentage` that shrinks the outside radius of
doughnut / pie charts. A percentage is used to enable more flexibility
during responsive conditions.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants