Since I upgraded ChartJS to 3.5, I am unable to adapt the BeforeDraw plugin properly. I've tried searching the internet for an example but I haven't seen anyone providing the beforeDraw update. I put my code below and I would appreciate any guide, help or link to solve the problem.
Chart.register({
beforeDraw: function(chart,args,options) {
if(chart.chart.chart.config.type=='doughnut'){
const width = chart.chart.width;
const height = chart.chart.height;
const ctx = chart.chart.ctx;
var text;
ctx.restore();
ctx.clearRect(0, 0, 3000, 3000);
fontSize = (height / sizeLabel1).toFixed(2); //250
ctx.fillStyle = colorLabel1; //"#FFFEFE"
ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"';
text = chart.config.options.elements.center.text1; //"CICLE " + currentCicle + "/" + totalCicles;
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = (height / positionLabel1) ; //3.30
ctx.fillText(text, textX, textY);
fontSize = (height / sizeLabel2).toFixed(2); //90
ctx.fillStyle = colorLabel2; //"#FFFEFE"
ctx.font = 'Bold ' + fontSize * 13 + 'px "Titillium Web"';
text = chart.config.options.elements.center.text2; //"1"+"' "+"30"+"''";
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = (height / positionLabel2) ; //2.70
ctx.fillText(text, textX, textY);
fontSize = (height / sizeLabel3).toFixed(2); //150
ctx.fillStyle = colorLabel3; //"#FFFEFE"
ctx.font = '100 ' + fontSize * 13 + 'px "Titillium Web"';
text = chart.config.options.elements.center.text3;
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = (height / positionLabel3) ; //1.90
ctx.fillText(text, textX, textY);
fontSize = (height / sizeLabel4).toFixed(2); //200
ctx.fillStyle = colorLabel4; //"#FFFEFE"
ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"';
text = chart.config.options.elements.center.text4;
textX = Math.round((width - ctx.measureText(text).width) / 2);
textY = (height / positionLabel4); //1.50
ctx.fillText(text, textX, textY);
ctx.save();
}
}
});
2 main things, plugins need an ID. Also you might want to log every line or put breakpoints to see what is going on because afaik the chart does not contain a circulair reference to itself anymore.
So in your first if statement it should just be: if(chart.config.type === 'doughnut').
So basicly your first few lines have to be changed to this:
Chart.register({
id: 'customText',
beforeDraw: function(chart,args,options) {
if(chart.config.type=='doughnut')
This will probably fix your problem, if not try to log variables you are using and check if you still call them in the correct way.