Legend position move/attach to tooltip

[luu4]

Hello ,
please how I can move(attach) legend for series and indicators to tolltip position in Highstock?
Thank you.
Luu

Legend to tolltip position.png (136.26 KiB) Viewed 2075 times

[dominik.c]

Hello luu4!

Welcome to our forum and thanks for contacting us with your question!

You can update the legend position using the update method on legend each time the mouseOver event will be fired on the point.

API references:
https://api.highcharts.com/highcharts/legend.align
https://api.highcharts.com/highcharts/legend.x
https://api.highcharts.com/highcharts/legend.y
https://api.highcharts.com/class-refere ... end#update
https://api.highcharts.com/highstock/se ... .mouseOver

Demo:
https://jsfiddle.net/BlackLabel/25mt8yhw/

Best regards!

[luu4]

Hello,
thanks for reply.
I'm sorry, but on your provided demo the legend items don't have the same position as tooltip.
As wel I don't know how to proceed with your code.

Luu

[dominik.c]

Hi again!

So you can also add a legend to tooltip using tooltip formatter. Over there you can use appendChild function to put a legend inside tooltip. Demo: https://jsfiddle.net/BlackLabel/z7s2h9uj/1/

But maybe a better idea would be to genereate a text inside tooltip that will look like the legend? I'm not sure how wold you like it to work. Could you describe your requirements more precisely?

Best regards!

[Paul Jaker]

Hi Dominik,
I looking for the same.
I would like to click on the series name in the tooltip then series datas will be hide, but the series name in the tooltip will stay on the chart.

Thank you.

Paul

[luu4]

Hi,
thanks for demo,but still have bugs .
I want legend items in tooltip div, due to better positioning of tooltip.
I don't know, how I can set the legend position the same as tooltip, so yes, it could be as a text inside tooltip,which look like a legend.
Then, I would like to have a button inside of tooltip and when I click on the button then I could select(change) color of the series by nicer color picker as regular from webrowser.

Thanks.

[dominik.c]

Hi!

@Paul Jaker

I'm not sure if I understood you correctly. When you click the series name in the tooltip and the series will hide, the tooltip will disappear too because it's displayed only when we hover the point. When the point disappears the tooltip disappears too. How would you like it to work?

@luu4

Thanks for the explanation! I suggest not putting onclick functionality inside the tooltip, like legend or color picker. It may be quite complicated.

I've prepared a simple demo for you with a color picker and a custom legend element (button below the chart). Of course, you can render these elements inside the tooltip. It's shown in the demo too.

API references:
https://api.highcharts.com/highcharts/tooltip.useHTML
https://api.highcharts.com/highcharts/tooltip.formatter

Demo:
https://jsfiddle.net/BlackLabel/75o3gdy4/

Best regards!

[luu4]

Hi,
thanks for your feedback.
How I can insert this button to tooltip ?
With color picker I thought something nicer as is for example on this page:
https://www.cssscript.com/demo/sleek-ht ... er-iro-js/

Luu

[Paul Jaker]

Hi Dominik,
when you click on the series name in the tooltip the series will hide, this is correct.
But, after that, I want to let visible the series name label in the tooltip.

Thank you
Paul

[dominik.c]

Hi!

@luu4

Regarding putting button to tooltip you can see an example in the demo from my previous post. There is a button inside tooltip, you need to set useHTML property to true and insert a proper HTML tag in formatter function. Regarding the color picker you've shown, it's more complicated so you would need to do it by yourself. We can help with specific, simple questions.

@Paul Jaker

But tooltip is displayed only when you hover the point. When the series gets hidden there will be no points to hover so the tooltip will disappear too. How would you like it to work?

Best regards!

[Paul Jaker]

Hi Dominik,
yes, I understand that, I would like to have at least tooltip or series name visible even though the series points are hidden.

Paul

[dominik.c]

Hi again!

So to sum up, you would like to display all the series in the tooltip, and then when you click one of the series it should get hidden and the tooltip shouldn't disappear but it should stay, right? Are they all the requirements?

Best regards!

[Paul Jaker]

Hi Dominik,
thanks, I solve it different way through CSS...

[dominik.c]

Hi again!

Congrats on finding the solution.

In case of any further questions, feel free to contact us again.
Best regards!