-
Notifications
You must be signed in to change notification settings - Fork 324
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
Doesn't work with 2.8.0 #156
Comments
So, it seems to me that 2.7.0 breaks lines and 2.8.0 breaks boxes. Any plans on fixing that? |
@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 |
@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. |
I'm using it with 2.8.0, how does it break for you? |
@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 }; |
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'; |
@alexis-landrieu-avanade thank you! |
Hmm, for me the annotations do work with 2.8.0 - at least as long as I do not resize the canvas... |
Im also having issues with this even after following @alexis-landrieu-avanade suggestion
|
Still works for me with @alexis-landrieu-avanade fix: But recently chartjs-plugin-zoom stopped working. Currently investigating why... |
This is my npm package, i think the version is compatible? |
I fixed it, i had 4 problems.
|
The issue is that the README shows the setup for the code in |
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 |
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 |
|
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! |
Hi. I'm trying to import chartjs-annotation-plugin in my Angular project. Even after the npm install and I am getting this : |
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:
-import "chartjs-plugin-annotation";
+import * as ChartAnnotation from "chartjs-plugin-annotation";
...
<Scatter
data={data}
options={options}
+ plugins={[ChartAnnotation]}
/>
const defaultOptions: ChartOptions = {
title: ...
- plugins: {
- annotation: {
- drawTime: "afterDraw",
- events: ["click", "mouseenter", "mouseleave"],
- annotations: [ ... ]
- }
+ annotation: {
+ drawTime: "afterDraw",
+ events: ["click", "mouseenter", "mouseleave"],
+ annotations: [ ... ]
+ }
-};
+} as ChartOptions;
+declare module "chartjs-plugin-annotation";
|
Are you still a maintainer of this project? Could you release a new version? |
My functionality is describe below: |
Closing this thread as it contained a bunch of different issues that appear to be resolved
|
Is there any workaround to get the plugin working with chart.js 2.8.0?
The text was updated successfully, but these errors were encountered: