Pie/Dougnut radius

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?

Author: Fantashit

1 thought on “Pie/Dougnut radius

  1. 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

Comments are closed.