How to access Controller properties in Chart.js

Question

How to access Controller properties in Chart.js

1.2k Views Asked by nickh At 21 October 2024 at 08:14

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.

Original Q&A

There are 1 best solutions below

**LeeLenalee** · Accepted Answer

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>

How to access Controller properties in Chart.js

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CHARTS

Related Questions in CHART.JS

Related Questions in CHART.JS3

Trending Questions

Popular # Hahtags

Popular Questions