Highcharts official support forum

Hi
I know that what I want is not supported but I'm looking for some guidelines in order to implement it.
Basically I need to create a tooltip with all series data and some of them may have different date/time references with irregular time intervals between series.
I saw some examples in order to generate interpolated data to put the same x values in all the series, but I'm trying to avoid that.
This is what I need:
1) When crossing the series points all the the curve is highlighted while all the other series with a different x value are shown with a very soft color. How can I show all the series as highlighted?

2) No matter what series are selected I'm building the same tooltip with the same lines. I would like to keep the tooltip close to the cursor line, but in one of the series the tooltip has a right alignment with the cursor line and in the other series (with a different x value) it has a center alignment with the line cursor. When moving the cursor line the tooltip jumps between different positions. I need to keep the tooltip with the same alignment and the same position close to the cursor line, no matter what serie is selected.  
 

Best regards

Hello! I don't really understand what is the difference between the current tooltip, and what is the custom functionality, that you want to obtain? And I don't really understand, what is on the video, you attached. Could you try to be more specific?

Kind regards,

P.S. How does this question relates to the Highstock package, and not the basic Highcharts?

OK, I will try to be more objective. I'm using Highstock, that's why I'm posting here
Cannot post a bigger movie file because a bigger file size is not allowed.

1) If we have 2 series with diferent x values, when moving the cursor line the serie with the selected point appears highlighted while the other is almost invisible. I would like to show both series allways with the same color intensity. I'm sendig a picture with two series, one black and the other green.

Regards

Hello! If I understood correctly, you want the other line not to fade, when you hover the black line. You can achieve this by setting the following options:
Check the result in the demo below, and let me know if this is what you wanted to achieve
Kind regards,

https://jsfiddle.net/BlackLabel/dm5a7k2g/

API reference: https://api.highcharts.com/highcharts/p ... s.inactive

Thanks! That's what I need in did.

Next question:
2) Next step in based on keeping the tooltip next to the cursor line. In this example when scrolling the line along the chart the tooltip position is close to the mouse even when switching from 'serie 2' to 'serie 3' that have different x values. However if we show 'serie 1' that it's an 'arearange' type the tooltip position is jumping when switching to serie 3. It seems that when using 'arearange' the tooltip is positioned to the left side of the cursor line while on serie 3 the tooltip is positioned on top of the cursor.

https://jsfiddle.net/9b7dgj4s/4/

Regards

Hi again! I didn't quite catch what is your goal here. But generally, if you want to manually position tooltip, you can use the tooltip.positioner callback function to define the position, that you want to put the tooltip in. Here is the link to the API, and some basic demo where this function is used. Let me know if you can solve the problem using these tools, and in case of any further questions feel free to contact us again!

API reference: https://api.highcharts.com/highcharts/t ... positioner
demo: https://jsfiddle.net/gh/get/library/pur ... ositioner/

OK I will try again I just prepared 2 short movies.
One with 2 series, where one of the series is not visible. This invisible series is "AreaRange" type. In this movie you can see that the toolpit it's always close to the mouse pointer. I just drag the cursor always in the same vertical position and the tooltip doesn't give any jump in the position. The tooltip is always with the bottom part on top of the cursor and the horizontal alignment to the center.

The second movie is with 3 series where this "AreaRange" serie it's visible now. Doing the same movement like in the previous movie the tooltip jump positions between series. The tooltip seems to have different alignment because of "AreaRange" serie. On A bigger chart this behaviour is more visible. When the cursor line crosses a serie "AreaRange" the tooltip alignment changes vertically (middle alignment instead of bottom like in the other series) and horizontally (right alignment instead of center like in the other series).

I tried already using the position function but I prefer to keep the tooltip close to the cursor.

Best regards

OK, I see the difference. And which one is desirable?

Hello

Thanks. To be honest I prefer the tooltip on the left side of the cursor, switching to the rigth side when there is no available space on the left.


Best regards

Hi again! Since the tooltip positioner function is just a function that calculates the desired position, you can fit the logic inside this function. Check the following demo, and let me know if this works for you.

https://jsfiddle.net/BlackLabel/fk6budza/

Kind regards,