After thoroughly reading the Chart.js documentation, I didn't find any method to get the innerRadius of a doughnut chart.
This is one of the many issues I found after migrating from Chart.js 2.x to 3.x
In Chart.js 2.x, to get the inner radius of a doughnut chart, I would do:
beforeDatasetsUpdate: c => {
const radius = c.innerRadius;
}
Now, in Chart.js 3.x, I found it deeply nested in :
beforeDatasetsUpdate: c => {
const radius = c._metasets[0].data[0].innerRadius;
}
The official migration guide says:
Chart.innerRadius now lives on doughnut, pie, and polarArea controllers
But is there any way to directly access it? The way I mentioned above seems like a hack.
Each dataset has its own controller so there is no global single doughnut controller. So if you want to get the controller you need to get it from the meta of the dataset:
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}
]
},
options: {},
plugins: [{
beforeDatasetsUpdate: (chart) => {
chart._metasets.forEach(e => {
console.log(e.controller.innerRadius)
})
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>