Basic compatibility with chart.js 3.0.0-beta.13

[alvaro-octal]

Hi,

I've done my best in order to make this lib compatible with chart.js 3 (beta 11), since no more breaking changes are excepted. Note that I'm not used to ChartJS, so bugs are expected and zooming funtionallity is not working properly yet, but I guess is a good starting point.

• [x] Show vertical line
• [x] Sync vertical line between charts
• [x] Zooming

Any help on this last point would be appreciated.

Thanks!

[alvaro-octal]

Related to https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/issues/58

[alvaro-octal]

Ok, zoom seems to be working fine, also I've updated to [email protected].

Could you review this @AbelHeinsbroek ?

[vividos]

@alvaro-octal Thanks for your work on making this up-to date! I'd like to test the plugin with the latest chart.js, but there's no build in this GitHub repository that would produce a .min.js. Could you maybe share a build somewhere? Thanks!

[alvaro-octal]

Sure, chartjs-plugin-crosshair.tar.gz

[vividos]

Thanks! In the meantime I forked this repository and played around a bit with GitHub actions to also produce artifacts. See here: https://github.com/vividos/chartjs-plugin-crosshair I also added your commits to my fork, just to see how/if it builds: https://github.com/vividos/chartjs-plugin-crosshair/pull/4 I will use both versions to test the Chart.js 3.0.0 compatibility.

[vividos]

It seems there's also a v2 branch where @AbelHeinsbroek has refactored some things. Now it depends on how he wants to progress with this project...

[vividos]

Also tested the provided binary with my Chart.js project, and it works together with Chart.js-3.0.0-rc, without problems!

[benmccann]

Chart.js 3.0 final is out now

[vividos]

Until now, sadly @AbelHeinsbroek didn't react to any mentions... Maybe someone may pick up the project, fork it and merge the various pull requests. Or maybe the chartjs team could take over and host it... (@etimberg @kurkle what do you think?)

[BelleNottelling]

EDIT: I figured out in the code where this was happening and told it to ignore the click events. Ignore this!

@alvaro-octal Hey, thanks for creating a version of this that works with Cart.js 3.X I downloaded the build you attached here and included it in my project, but noticed that having two graphs synced caused an issue where I can click the legend of both charts at the same time if the crosshair is lined up with both. I'm not sure if that's an issue with trying to use it with Chart.js 3.x or if it was always like that. Here's a little demo to show you what I mean (you can see both charts being interacted with when I only want to click on one):

[Tom687]

Hi, I am struggling to integrate the updated plugin versions @alvaro-octal and @vividos made. Note that I am using React with react-chartjs-2 plugin as a wrapper for chart.js.

I would say every (or most) functions used on chart.js can work with react-chartjs-2 as anything I tried to use from the Chart.js docs is working.

I was able to import the .tar.gz file @alvaro-octal in my package.json with the following syntax : "chartjs-plugin-crosshair": "file:/../chartjs-plugin-crosshair.tar.gz" and run npm install on it.

The problem is that the crosshair shows on every graph I have, even if I try to disable it globally where I import the package like this Chart.defaults.plugins.crosshair.enabled = false.

Also, when trying to zoom, I can see the "zoom box" but when I release the click, it shows an empty graph. Do I have to load new data from one of the zoom callbacks ? Isn't it supposed to work with the already inserted data from the graph ? Note that the "Reset zoom" button works and makes the graph come back to its initial state.

@BenNottelling I am also tagging you as you seem to have made it work.

Thank you very much.

[jmtimko5]

Any update on this? Would love to use this with chartjs 3

[BelleNottelling]

Hi, I am struggling to integrate the updated plugin versions @alvaro-octal and @vividos made. Note that I am using React with react-chartjs-2 plugin as a wrapper for chart.js.

I would say every (or most) functions used on chart.js can work with react-chartjs-2 as anything I tried to use from the Chart.js docs is working.

I was able to import the .tar.gz file @alvaro-octal in my package.json with the following syntax : "chartjs-plugin-crosshair": "file:/../chartjs-plugin-crosshair.tar.gz" and run npm install on it.

The problem is that the crosshair shows on every graph I have, even if I try to disable it globally where I import the package like this Chart.defaults.plugins.crosshair.enabled = false.

Also, when trying to zoom, I can see the "zoom box" but when I release the click, it shows an empty graph. Do I have to load new data from one of the zoom callbacks ? Isn't it supposed to work with the already inserted data from the graph ? Note that the "Reset zoom" button works and makes the graph come back to its initial state.

@BenNottelling I am also tagging you as you seem to have made it work.

Thank you very much.

Sorry, I simply included the JS file in my project so I can't comment on anything specific to npm. You might want to try disabling the sync function as well

Edit: Also, zooming was unusable for me and I just disabled it. I might sit down and try to finish the upgrade to chartjs version 3 and see if I can fix it. If I do, I'll leave a comment here

[webtweakers]

Also, when trying to zoom, I can see the "zoom box" but when I release the click, it shows an empty graph. Do I have to load new data from one of the zoom callbacks ? Isn't it supposed to work with the already inserted data from the graph ? Note that the "Reset zoom" button works and makes the graph come back to its initial state.

I'm having the same issue, even with version 1.1.3.

Chrome console shows errors:

time scale: "time.min" is deprecated. Please use "ticks.min" instead
time scale: "time.max" is deprecated. Please use "ticks.max" instead

[Yohandah]

@AbelHeinsbroek could you give someone the rights to maintain this repo ? Crosshair is really a nice plugin for Chart.js and it's sad we are not able to update it

[Tom687]

@webtweakers I found out that the plugin "chartjs-plugin-zoom" now works good with react-chartjs-2. You can zoom, no need to update data and also move around the chart. It works great !

Anyways, did anyone had any chance with the crosshair and sync ?

[Tom687]

@BenNottelling Hi, I have been able to use chart-js-plugin zoom for zooming / panning purposes and it works great. What I actually need the most from this crosshair plugin is the sync between charts. Have you been able to make it work ? Thanks

[AbelHeinsbroek]

Hi all, thank you for contributing! Work on this project has been slow, my apologies. At my employer we've only recently started the migration from 2.x to 3.

I've merged some of the changes in this PR with other fixes of mine in the chartjs3 branch. Would you mind checking if that branch works for your use cases?

[benmccann]

@AbelHeinsbroek any chance this project will be receiving further updates and v3 will get merged to master?

[DaveSkender]

@AbelHeinsbroek any chance this project will be receiving further updates and v3 will get merged to master?

@benmccann I think Abel has fully checked out on this project. Any chance you can take it into the mothership chart.js org where it can get some attention?

[benmccann]

I can't be responsible for every chart.js plugin that a maintainer steps away from. That wouldn't scale at all