Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using inline plugins #130

Closed
kurbar opened this issue Jun 29, 2017 · 4 comments
Closed

Using inline plugins #130

kurbar opened this issue Jun 29, 2017 · 4 comments

Comments

@kurbar
Copy link

kurbar commented Jun 29, 2017

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
Copy link
Owner

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
Copy link
Author

kurbar commented Jun 30, 2017

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
Copy link
Owner

apertureless commented Jul 1, 2017

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
Copy link
Owner

PR Merged.

Will be available in the next release 2.7.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants