Chart.js: Are crosshairs on charts possible in 2.0?

[ianpugh]

Example:

http://i.imgur.com/5fBPnFs.jpg

http://finance.yahoo.com/echarts?s=NQM16.CME+Interactive#{"range":"1d","allowChartStacking":true}

Looking to overlay a crosshair on a line chart, but am running into issues with using the canvas "mousemove" event, as the chart.js redraw erases the crosshair.

Any suggestions for implementing this functionality in 2.0?

Thank you.

[etimberg]

@ianpugh this isn't currently possible in v2, but with a bit of work you can achieve what you want.

You'd need a way to add a hook into the update method found in src/core/core.controller.js. What you could do is add an array of listener functions there and a way of registering and deregistering listeners. Inside of update you could iterate the listeners and trigger them. You'd probably want to pass the listeners the chart object. Your function could parse the chart config and do appropriate drawing.

I'd be happy to answer any more questions you might have. Feel free to PR the changes to core. I think this would make a goodness extension :smile:

[ianpugh]

@etimberg Thanks!

I'll make some changes over the next few days and PR when complete.

Ian

[ianpugh]

@etimberg after significant amount of playing around with this, I'm out of ideas.

My first idea wasn't really Chart.js related -- it was to layer the canvas elements using z-axis. This worked perfectly, except that mouseover events from z-axis: 1 aren't passed down to z-axis: 0. So I had to throw that idea out. I'm not sure how to pass events from one canvas element to the other, I'll play around with that at some point, I suppose.

The issue I'm seeing with the proposed solution is that update is apparently called when you hit a datapoint or you update the chart. Whereas mouseover is called every time the mouse moves. So the crosshair that's being drawn looks terrible until update is called, at which point it looks great and then terrible after you move the mouse. I'm happy to show a fiddle of this if I'm not making sense.

I'll keep thinking about this to see if I'm missing anything obvious. If you have other ideas, please feel free to let me know.

Thank you!

[etimberg]

@ianpugh can you drop this in a fiddle? I'd like to play around with it.

You could pass the events through to the chart object (assuming the canvas are directly overlaid) by calling yourChartInstance.eventHandler(eventObject)

[ianpugh]

@etimberg

https://jsfiddle.net/u3pto1hp/

I haven't played around with passing events from one to the other yet.

Edit -

After passing the events -- this appears to work just fine:

https://jsfiddle.net/8fp3uutt/

Thank you very much for the input.

With that said, I'm struggling to come up with a way to cleanly implement something like this into the Chart.js library. Any thoughts?

[etimberg]

Glad you have something working. I need to think on this for a bit ... I'm not sure what the best way to integrate this would be. I have some ideas, but I need to try and prototype them out first and see the holes

[etimberg]

dependent on #2282

[etimberg]

@ianpugh regarding the plugin stuff, it released in v2.1.0. I've written an initial zoom plugin that could be used as a reference for implementing a plugin

[etimberg]

Closing since we won't implement this in the core. I'd be happy to help anyone implement a plugin to do this.

[HarsimranAvaya]

Hi etimberg,

Is there any plan of supporting this crosshair in the upcoming chart.js versions,as most of the new chart libraries have this feature.

Regards
HarsimranAvaya

[baus]

I'm working on a plugin which implements this feature: https://github.com/baus/yieldio/blob/master/client/src/plugin.crosshair.js

[mesqueeb]

@etimberg
I also wanted to ask since it's been more than a year again, if this functionality would be implemented at some point. I'm extremely looking forward to this.

You see, I'm having a very hard time getting this to work with other person's plugins, which often result in bugs for my cases when using multiple datasets.

[AbelHeinsbroek]

@mesqueeb Take a look at this plugin: https://github.com/abelheinsbroek/chartjs-plugin-trace

[qkreltms]

I've tried this : https://codepen.io/qkreltms/pen/zYYwrXZ
But, when I hover mouse on points it prints undefeind. any ideas?

And I've also tried this: https://codepen.io/qkreltms/pen/BaaWZeV?editors=0010
Has some bugs...

[kurkle]

You can use a plugin: https://codepen.io/kurkle/pen/RwwVaQz
See also: chartjs-plugin-crosshair