afterDraw / beforeDraw functions

[10YAR]

Hello,

I was just wondering if you guys implemented the afterDraw / beforeDraw functions from chart js ? Because it doesn't seem to work with a <CChartDoughnut> on React.

I'm using these versions :

"@coreui/chartjs": "^4.0.0-rc.0",
"@coreui/coreui": "^5.0.0-rc-2",
"@coreui/react-chartjs": "^3.0.0-rc.0",
"chart.js": "^4.4.2",

and these are the options I use in the <CChartDoughnut> component

      options={{
        responsive: true,
        interaction: {
          intersect: false,
        },
        plugins: {
          afterDraw: (chart) => {
            const ctx = chart.ctx
            ctx.save()
            const centerX = (chart.chartArea.left + chart.chartArea.right) / 2
            const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.font = '16px Arial'
            ctx.fillText(`${percentage.toFixed(2)}%`, centerX, centerY)
            ctx.restore()
          },
          tooltip: {
            enabled: false,
          },
          legend: {
            display: legend,
          },
          title: {
            display: false,
          },
        },
      }}

[xidedix]

@10YAR It seems there is something wrong with your options.plugins config, see:

• https://www.chartjs.org/docs/latest/developers/plugins.html
• https://www.chartjs.org/docs/latest/samples/plugins/doughnut-empty-state.html
• https://coreui.io/react/docs/components/chart/#cchart - plugins prop

otherwise, could you provide a working reproduction of this issue, either via a github repo or a stackblitz repro