[Chartjs]-Vue Chart 3 – Doughnut Charts with Text in the Middle (Trouble registering a plugin)

by

1👍

✅

This is because pluginService is V2 syntax, to register plugins globally in V3 you can do it the same way you did with the registerables like so:

Chart.register(plugin)

You can even do it in the same register call like so:

Chart.register(...registerables, plugin)

Edit:
Plugins also have to be objects so chart.js knows which hook to use as you did in the mounted so your plugin variable has to look like this (still V2 syntax, you will need to change this yourself) to work:

var plugin = {
 id: 'idOfPlugin', 
 beforeDraw: function (chart) {
  var width = chart.chart.width;
  var height = chart.chart.height;
  var ctx = chart.chart.ctx;

  ctx.restore();
  var fontSize = (height / 114).toFixed(2);
  ctx.font = fontSize + "em sans-serif";
  ctx.textBaseline = "middle";

  var text = 800;
  var textX = Math.round((width - ctx.measureText(text).width) / 2);
  var textY = height / 2;

  ctx.fillText(text, textX, textY);
  ctx.save();
 };
}

Leave a comment