Highchart Stack column show for each stack bar its data values next to its legend

[simoh]

Hello guys,

I have a stacked column, and tooltip hide visualization , so i want to on mouse move, display directly for each stack column bar its data next to legend.

Could you please help me to acheive this.

Thanks in advance.

[simoh]

To be more precise, all i want to do is like what is implemented for tooltip : when we move mouse, the tooltip is updated with series's names and values of my stacked column bar, but it's hidding the visualization.
So could you please help to display series values next to legends direclty.

BIg thanks.

[sebastian.h]

Hi,
Welcome to our forum and thanks for contacting us with your question.

I'm not sure that I understand you correctly.
Want to highlight a series in the legend when you hover over the series?

Let's start work on this demo.
https://jsfiddle.net/gh/get/library/pur ... mn-stacked

I'm waiting for news from you.
Best regards.

[simoh]

Thanks for your reply.

Yes exactly;
I found this approximative similar example : https://jsfiddle.net/gh/get/library/pur ... mouseover/

But my use case is with a stacked column and it should update legends.

Thanks

[sebastian.h]

Hi,
Thanks for message,

Here is a similar topic and example, it's fit your goals?
viewtopic.php?t=39758#p137673

What exactly do you want to do with a legend?

Do you want to show extra annotation after hovering on point at legend?
What do you want to update in the legend, what data to display?

Demo:
https://jsfiddle.net/BlackLabel/mdas0nqg/

Best regards.

[simoh]

Hello Sebastian,

Thanks for your answer.

My bad i wasn't clear enough.

Here is a good example when mouse move, legend part is customized and enriched by display equivalent data :
https://jsfiddle.net/BlackLabel/wsdcvqrp/

The difference is that in my case i have a stacked column bar, and when mouse move over each column i want to custom the legend part, by adding for each series in selected stacked column its data.

What i want is similar to what tooltip is displaying on every mouse move in term of content like in this example but by updating legend part:
https://jsfiddle.net/gh/get/library/pur ... ed-percent

All that because actually my tooltip is hidding the display for user, and i thought about applying the same idea in legend part.
I remain available.

Many thanks for your help.

Best reagrds,

[simoh]

Any idea please ?

[sebastian.h]

Hi,

So, like in your last demo, what you show in the tooltip you would like to show in the legend.
I guess you would have to add a lot of custom code to do it in the legend a better option would be to make a sticky toolip, you can use tooltip.formatter for that.

API References:
https://api.highcharts.com/highcharts/tooltip.formatter

Best regards.

[sisaki]

how to limit the legends to display only for which data is available. rather showing all the possible legends in stacked bar chart

[sebastian.h]

Hi sisaki,

Do you talk about situation like at this demo, their series name John has data with value null?

Live demo:
https://jsfiddle.net/BlackLabel/5q74atx8/

I'm waiting for news from you.
Best regards.