Vue-chartjs: Using inline plugins

[kurbar]

Is it possible to use inline plugins via renderChart?

I tried doing something like this:

this.renderChart(this.datacollection, {
  responsive: true,
  maintainAspectRatio: true,
  legend: {
    display: false,
  },
  animation: {
    animateScale: true,
  },
  plugins: [
    {
      id: 'kwhWeek',
      beforeDraw(chart) {
        const width = chart.chart.width;
        const height = chart.chart.height;
        const ctx = chart.chart.ctx;
        ctx.restore();
        const fontSize = (height / 114).toFixed(2);
        ctx.font = `${fontSize}em sans-serif`;
        ctx.textBaseline = 'middle';
        const text = '4511kWh';
        const textX = Math.round((width - ctx.measureText(text).width) / 2);
        const textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
      },
    },
  ],
});

It didn't give any errors but it isn't showing the text in the middle of the graph.

[apertureless]

Hey @kurbar

in generall this should work. I have not worked with the inline plugin API so far but the whole options object will get passed to the new Chart() constructor. So I don't see a reason for it not to work.

Have to tried to console out out the chart that gets passed in the beforeDraw method?

[kurbar]

I did dig into the chart.js source a bit and it actually doesn't work in the given fashion since the inline plugins are defined outside of options.

{
  options: {},
  plugins: [], // <- separate from options
}

What I did was implement a method addPlugin which can add inline plugins via data onto a specific chart. I can make a PR of it if you like?

To add a plugin, the code would look like this based on above example code:

this.addPlugin({
  id: 'kwhWeek',
  beforeDraw(chart) {
    const width = chart.chart.width;
    const height = chart.chart.height;
    const ctx = chart.chart.ctx;
    ctx.restore();
    const fontSize = (height / 114).toFixed(2);
    ctx.font = `${fontSize}em sans-serif`;
    ctx.textBaseline = 'middle';
    const text = '4511kWh';
    const textX = Math.round((width - ctx.measureText(text).width) / 2);
    const textY = height / 2;
    ctx.fillText(text, textX, textY);
    ctx.save();
  },
});

this.renderChart(this.datacollection, {
  responsive: true,
  maintainAspectRatio: true,
  legend: {
    display: false,
  },
  animation: {
    animateScale: true,
  },
});

[apertureless]

Oh I see! I thought the plugins array was part of the options.
Well, in this case, I think it's a good idea to expose a method to add the plugins.

So if you want to make a PR, feel free to do so ;)

[apertureless]

PR Merged.

Will be available in the next release 2.7.0