How to access Controller properties in Chart.js

user_10230104 0
Viewed 153

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.

chart.js3 chart.js charts javascript
1 Answers

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>

user_86829830
Related