Chart.js: Pie/Dougnut radius

[rgheller]

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]

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]

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]

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

[rgheller]

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]

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

[rgheller]

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

[Phong993]

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]

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.