Synchronized cross hair tooltip for xrange chart

[rkaur]

I have Synchronized line charts working with crosshair tooltips. Xrange chart is a new addition and it has very different behaviour. It does not respond to the existing mouse events that are working for rest of the charts.

I have tried to find an example where we have a mix of line and xrange synchronized charts but couldn't find any. If there is a basic example, that would be very helpful.

Thanks.

[rkaur]

I have created this example, where I would like to have a shared tooltip for xrange chart and it should be synchronized with other charts.

https://jsfiddle.net/x98pun4w/

[jakub.s]

HI @rkaur,

Thanks for the question!

Could you please explain to me the desired behavior that you're trying to achieve?

- Would you like the tooltip on the XRange chart to be the same as the tooltip on the line chart?
- Why does the current solution that you've sent not satisfy you?
- Could you please share more details how you'd like this to look? Do you have any designs/images?

I'll be waiting for your response.

Best regards!

[rkaur]

Hi jakub.s,

There are 2 things that I would like to achieve.
1. I do not want separate tooltips for all ranges in the xrange chart. I would like to be able to have one tooltip that displays info for all three series or any number of ranges visible at the x point.
2. The display of tooltip in xrange is triggered on mouseover event over any of the ranges. Whereas, I would like it to work the same way as rest of the 2 charts. The synchronized crosshair movement should show the tooltip for xrange chart too.

Apologies for not communicating well in the first message.

[jakub.s]

Thanks for explaining!

The easiest way to go about this is the following:

1. Create a chart with multiple xAxis and yAxis and multiple series (attached to different axis).
2. Add a custom tooltip.formatter function which has access to: point, series, chart (every single piece of information that you might need to display).

Here's a simple demo: https://jsfiddle.net/BlackLabel/dcynarx0/

With access to all the data from the chart, you can easily display information for both the XRange series and the line series. Please let me know if you need any help with that. If yes, you can share an example of the tooltip content that you'd like to display and I'll try to recreate it.

Kind regards!