Doesn't work with 2.8.0 #156

Svetomechc · 2019-03-18T09:15:54Z

Is there any workaround to get the plugin working with chart.js 2.8.0?

Svetomechc · 2019-03-18T09:23:57Z

So, it seems to me that 2.7.0 breaks lines and 2.8.0 breaks boxes. Any plans on fixing that?

benmccann · 2019-03-19T14:51:02Z

@Svetomechc there isn't anyone who is actively working on this plugin, but if you send a PR to fix it then I will review it

nullpointer77 · 2019-03-19T14:54:00Z

@Svetomechc For what it's worth, i ended up abandoning this plugin as well as the draggable plugin as it's pretty simple to just create your own custom chartjs plugins per their documentation. If you really need draggable functionality D3 has a pretty solid implementation you can use.

kurkle · 2019-03-19T15:07:11Z

I'm using it with 2.8.0, how does it break for you?

Svetomechc · 2019-03-19T15:11:44Z

@benmccann not so sure of my JS skills (:

@nullpointer77 might try that

@kurkle I use it like so (type: 'box'):

    const annotations = this.selectedCip.cipSteps.map(v => {

      const color = new Color('#' + v.cipStepType.color);
      color.a = 0.3;
      return {
        drawTime: 'beforeDatasetsDraw',
        type: 'box',
        xScaleID: 'x1',
        yScaleID: 'dummy',
        xMin: v.start,
        xMax: v.end,
        yMin: 0,
        yMax: 1,
        backgroundColor: color.toRgba(),
        borderWidth: 0,
      };
    });
    this.lineChartOptions.annotation = { annotations: annotations };

alexis-landrieu-avanade · 2019-04-05T07:48:12Z

Hello @Svetomechc , could you share your imports statement ?

For angular by example we need to follow these steps :

import * as ChartAnnotation from 'chartjs-plugin-annotation';

ngOnInit() {
  let caPlugin = ChartAnnotation;
  caPlugin["id"]="annotation";
  Chart.pluginService.register(caPlugin);
}

This following imports statement seems to not be working anymore.

import 'chartjs-plugin-annotation';

Svetomechc · 2019-04-05T08:42:12Z

@alexis-landrieu-avanade thank you!

flaushi · 2019-04-17T19:28:20Z

Hmm, for me the annotations do work with 2.8.0 - at least as long as I do not resize the canvas...

ghost · 2019-06-05T14:17:16Z

Im also having issues with this even after following @alexis-landrieu-avanade suggestion

const myChart = new Chart(this.ctx, {
            type: 'line',
            plugins: [ChartAnnotation],
            data: {
                labels: stringLabels,
                datasets: [{
                    fill: true,
                    lineTension: 0.5,
                    pointRadius: 0, // Removes indiviual points/tooltips
                    borderWidth: 1,
                    label: 'Monthly Spending',
                    data: data,
                    backgroundColor: 'rgb(124,190,235,0.6)',
                    borderColor: 'rgb(63,81,181)'
                }]
            },
            options: {
                plugins: {
                    annotation: {
                        annotations: [
                            {
                                type: 'line',
                                mode: 'vertical',
                                scaleID: 'x-axis-0',
                                value: 2,
                                borderColor: 'red',
                                borderWidth: 2,
                            }
                        ]
                    }
                },
            }
        });

Svetomechc · 2019-06-05T14:31:31Z

Still works for me with @alexis-landrieu-avanade fix:

But recently chartjs-plugin-zoom stopped working. Currently investigating why...
UPD: Was error on my end.

ghost · 2019-06-05T14:38:28Z

    "chart.js": "^2.8.0",
    "chartjs-plugin-annotation": "^0.5.7",

This is my npm package, i think the version is compatible?

ghost · 2019-06-05T14:52:57Z

I fixed it, i had 4 problems.

You have to define the plugin

   import * as ChartAnnotation from 'chartjs-plugin-annotation';
   ...
   plugins: [ChartAnnotation],

Where to place the annotation, the documentation makes this very confusing by showing it within options.plugins, when actually it only works as as a child of options.
When the annotation value is of type int, it will not work if mode is vertical, but it will work if mode if horizontal. because my line was vertical i had to convert this value to a string.
If you are using types its going to complain about annotations so you should add as ChartOptions

     const myChart = new Chart(this.ctx, {
            type: 'line',
            plugins: [ChartAnnotation],
            data: {
                labels: stringLabels,
                datasets: [{
                    fill: true,
                    lineTension: 0.5,
                    pointRadius: 0, // Removes indiviual points/tooltips
                    borderWidth: 1,
                    label: 'Monthly Spending',
                    data: data,
                    backgroundColor: 'rgb(124,190,235,0.6)',
                    borderColor: 'rgb(63,81,181)'
                }]
            },
            options: {
                annotation: {
                    annotations: [
                        {
                            type: 'line',
                            mode: 'vertical',
                            scaleID: 'x-axis-0',
                            value: payday.toString(),
                            borderColor: 'red',
                            borderWidth: 2,
                        }
                    ]
                }
            } as ChartOptions
        });

benmccann · 2019-06-05T15:05:57Z

The issue is that the README shows the setup for the code in master (#130), but the last time a new version was released was Oct 2017. We should release a new version of the plugin to fix it

benmccann · 2019-06-05T15:07:51Z

Although it looks like we might need a fix first: #130 (comment)

If anyone wants to send a fix, I can help get it reviewed and merged and a new version released

jazzy1986 · 2019-09-30T05:27:53Z

I fixed it, i had 4 problems.

You have to define the plugin

   import * as ChartAnnotation from 'chartjs-plugin-annotation';
   ...
   plugins: [ChartAnnotation],

Where to place the annotation, the documentation makes this very confusing by showing it within options.plugins, when actually it only works as as a child of options.
When the annotation value is of type int, it will not work if mode is vertical, but it will work if mode if horizontal. because my line was vertical i had to convert this value to a string.
If you are using types its going to complain about annotations so you should add as ChartOptions

     const myChart = new Chart(this.ctx, {
            type: 'line',
            plugins: [ChartAnnotation],
            data: {
                labels: stringLabels,
                datasets: [{
                    fill: true,
                    lineTension: 0.5,
                    pointRadius: 0, // Removes indiviual points/tooltips
                    borderWidth: 1,
                    label: 'Monthly Spending',
                    data: data,
                    backgroundColor: 'rgb(124,190,235,0.6)',
                    borderColor: 'rgb(63,81,181)'
                }]
            },
            options: {
                annotation: {
                    annotations: [
                        {
                            type: 'line',
                            mode: 'vertical',
                            scaleID: 'x-axis-0',
                            value: payday.toString(),
                            borderColor: 'red',
                            borderWidth: 2,
                        }
                    ]
                }
            } as ChartOptions
        });

thanks, you save my life, take me whole morning to solve this, love you so much. it actually need to be inside OPTIONS not beside it. Chart.js document is suck

iamjonmiller · 2019-10-15T17:39:03Z

~~Just trying to import this plugin spits out this error in the chrome console:~~

chartjs-plugin-annotation.min.js:10 Uncaught TypeError: Cannot read property 'Annotation' of undefined at Object.6../annotation.js (chartjs-plugin-annotation.min.js:10) at o (chartjs-plugin-annotation.min.js:10) at e (chartjs-plugin-annotation.min.js:10) at chartjs-plugin-annotation.min.js:10 6../annotation.js @ chartjs-plugin-annotation.min.js:10 o @ chartjs-plugin-annotation.min.js:10 e @ chartjs-plugin-annotation.min.js:10 (anonymous) @ chartjs-plugin-annotation.min.js:10

~~Also using with 2.8.0 and cdn here https://cdnjs.com/libraries/chartjs-plugin-annotation~~

kurkle · 2019-10-16T11:07:02Z

Just trying to import this plugin spits out this error in the chrome console:

chartjs-plugin-annotation.min.js:10 Uncaught TypeError: Cannot read property 'Annotation' of undefined at Object.6../annotation.js (chartjs-plugin-annotation.min.js:10) at o (chartjs-plugin-annotation.min.js:10) at e (chartjs-plugin-annotation.min.js:10) at chartjs-plugin-annotation.min.js:10 6../annotation.js @ chartjs-plugin-annotation.min.js:10 o @ chartjs-plugin-annotation.min.js:10 e @ chartjs-plugin-annotation.min.js:10 (anonymous) @ chartjs-plugin-annotation.min.js:10

Also using with 2.8.0 and cdn here https://cdnjs.com/libraries/chartjs-plugin-annotation

Did you import Chart.js before the plugin?

iamjonmiller · 2019-10-17T17:11:05Z

Just trying to import this plugin spits out this error in the chrome console:
chartjs-plugin-annotation.min.js:10 Uncaught TypeError: Cannot read property 'Annotation' of undefined at Object.6../annotation.js (chartjs-plugin-annotation.min.js:10) at o (chartjs-plugin-annotation.min.js:10) at e (chartjs-plugin-annotation.min.js:10) at chartjs-plugin-annotation.min.js:10 6../annotation.js @ chartjs-plugin-annotation.min.js:10 o @ chartjs-plugin-annotation.min.js:10 e @ chartjs-plugin-annotation.min.js:10 (anonymous) @ chartjs-plugin-annotation.min.js:10
Also using with 2.8.0 and cdn here https://cdnjs.com/libraries/chartjs-plugin-annotation

Did you import Chart.js before the plugin?

Apparently not, I thought I had tried that. Combined with KayHS solution above (manually importing) I have annotations working on 2.8.0 now. Thanks!

sukensheth · 2019-11-14T10:30:29Z

Hi. I'm trying to import chartjs-annotation-plugin in my Angular project. Even after the npm install and
import * as ChartAnnotation from 'chartjs-plugin-annotation';

I am getting this :
Could not find a declaration file for module 'chartjs-plugin-annotation'. 'c:/XRay/xray/node_modules/chartjs-plugin-annotation/src/index.js' implicitly has an 'any' type.
Try npm install @types/chartjs-plugin-annotation if it exists or add a new declaration (.d.ts) file containing declare module 'chartjs-plugin-annotation';

sfentress · 2020-01-08T15:25:26Z

Thank you all for this helpful thread. I'll just add some details about the changes I had to make for those who are upgrading to 2.8.0 and using React, which hasn't been touched on above:

Add ChartAnnotation to the plugins field of your chart component:

-import "chartjs-plugin-annotation";
+import * as ChartAnnotation from "chartjs-plugin-annotation";

...

<Scatter
  data={data}
  options={options}
+  plugins={[ChartAnnotation]}
/>

(Already mentioned above, but adding here for clarity): Move the annotation plugin definition up a level, out from the plugins section of options . Shown here with TypeScript:

const defaultOptions: ChartOptions = {
  title: ...
- plugins: {
-   annotation: {
-     drawTime: "afterDraw",
-     events: ["click", "mouseenter", "mouseleave"],
-     annotations: [ ... ]
-   }
+ annotation: {
+   drawTime: "afterDraw",
+   events: ["click", "mouseenter", "mouseleave"],
+   annotations: [ ... ]
+ }
-};
+} as ChartOptions;

For TypeScript, declare the module in an index.d.ts file (to answer @sukensheth 's question):

+declare module "chartjs-plugin-annotation";

Maybe unrelated, but the label position "top" no longer worked after the upgrade. I had to hack it with label: { position: "bottom", yAdjust: 300}.

philippfrank · 2020-09-28T13:03:11Z

@benmccann

If anyone wants to send a fix, I can help get it reviewed and merged and a new version released

Are you still a maintainer of this project? Could you release a new version?

abhijiy · 2020-12-02T06:57:00Z

My functionality is describe below:
After click on line chart I need to show the annotation line.I have included annotation plugin. But it is not working.Annotation plugin is not called.

etimberg · 2021-03-08T01:59:43Z

Closing this thread as it contained a bunch of different issues that appear to be resolved

New versions (1.0.0-beta.1 to 1.0.0-beta.4) released to work with chart.js v3.0.0-beta.*
Typescript types now ship with the plugin
Documentation issues tracked elsewhere (e.g. Update the examples on the README #336 and Host documentation & samples #343)

benmccann mentioned this issue Mar 19, 2019

core.controller.js bug breaking chartjs-annotation and chartjs-draggable plugins (configMerge issue) chartjs/Chart.js#5111

Closed

niekvanderkooy mentioned this issue Aug 19, 2019

Using existing ChartJS plugins pepstock-org/Charba#41

Closed

This was referenced Jan 13, 2020

Trendline not appearing #190

Closed

Annotation line not drawn #198

Closed

etimberg added bug chart.js version 2 labels Mar 6, 2021

etimberg closed this as completed Mar 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work with 2.8.0 #156

Doesn't work with 2.8.0 #156

Svetomechc commented Mar 18, 2019

Svetomechc commented Mar 18, 2019

benmccann commented Mar 19, 2019

nullpointer77 commented Mar 19, 2019

kurkle commented Mar 19, 2019

Svetomechc commented Mar 19, 2019

alexis-landrieu-avanade commented Apr 5, 2019 •

edited

Loading

Svetomechc commented Apr 5, 2019

flaushi commented Apr 17, 2019

ghost commented Jun 5, 2019 •

edited by ghost

Loading

Svetomechc commented Jun 5, 2019 •

edited

Loading

ghost commented Jun 5, 2019

ghost commented Jun 5, 2019 •

edited by ghost

Loading

benmccann commented Jun 5, 2019

benmccann commented Jun 5, 2019

jazzy1986 commented Sep 30, 2019

iamjonmiller commented Oct 15, 2019 •

edited

Loading

kurkle commented Oct 16, 2019

iamjonmiller commented Oct 17, 2019

sukensheth commented Nov 14, 2019

sfentress commented Jan 8, 2020

philippfrank commented Sep 28, 2020

abhijiy commented Dec 2, 2020

etimberg commented Mar 8, 2021

Doesn't work with 2.8.0 #156

Doesn't work with 2.8.0 #156

Comments

Svetomechc commented Mar 18, 2019

Svetomechc commented Mar 18, 2019

benmccann commented Mar 19, 2019

nullpointer77 commented Mar 19, 2019

kurkle commented Mar 19, 2019

Svetomechc commented Mar 19, 2019

alexis-landrieu-avanade commented Apr 5, 2019 • edited Loading

Svetomechc commented Apr 5, 2019

flaushi commented Apr 17, 2019

ghost commented Jun 5, 2019 • edited by ghost Loading

Svetomechc commented Jun 5, 2019 • edited Loading

ghost commented Jun 5, 2019

ghost commented Jun 5, 2019 • edited by ghost Loading

benmccann commented Jun 5, 2019

benmccann commented Jun 5, 2019

jazzy1986 commented Sep 30, 2019

iamjonmiller commented Oct 15, 2019 • edited Loading

kurkle commented Oct 16, 2019

iamjonmiller commented Oct 17, 2019

sukensheth commented Nov 14, 2019

sfentress commented Jan 8, 2020

philippfrank commented Sep 28, 2020

abhijiy commented Dec 2, 2020

etimberg commented Mar 8, 2021

alexis-landrieu-avanade commented Apr 5, 2019 •

edited

Loading

ghost commented Jun 5, 2019 •

edited by ghost

Loading

Svetomechc commented Jun 5, 2019 •

edited

Loading

ghost commented Jun 5, 2019 •

edited by ghost

Loading

iamjonmiller commented Oct 15, 2019 •

edited

Loading