Get annotation data on hover and click

[himmat]

Hi again,

I am trying to store additional data for each annotation, which can then be retrieved 1) onClick 2) onHover

1)
For onClick, my attempt is here: https://codepen.io/himmxt-the-bold/pen/JjRMJxY

I'd like:
"LOREM IPSUM".foo to return "asdf"
and "DOLOR".foo to return "qwer"

I think I can solve this by creating several labels[] entries, but I wanted to check if there is another way.

2)
For onHover, I am less certain how to proceed, but I'd like to retrieve the value of .foo on hover.

(Also if possible, I'd love to turn the cursor from default to a "pointer" on hover, so that users know that the annotation is clickable).


Thank you for your time,

Himmat

[dominik.c]

Hello himmat!

Thanks for contacting us with your question!

1) I'm not sure if I understood you correctly. You can get the all information about clicked annotations in the click event. You can check in the demo below how to get to the foo element.

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

2) There's no mouseOver event on the annotation element so it won't be so easy to implement it. How would you like it to work? Should it do the same as click event and additionally change the cursor to a pointer? That's all?

Can't wait for your response!
Best regards.

[himmat]

Thank you for the reply!

1) In the demo you linked, I am getting the result of ""Annotation clicked:", "asdf"" no matter which annotation I click. (I'd like "DOLOR" to return "qwer" when clicked.)

2) What I would like to replicate is something like in this demo: https://www.highcharts.com/demo/combo-timeline

When you hover on "Award" it a) Loads additional info like "Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway", and b) Alters the color of the flag


Maybe I should use flag instead of annotations for my use-case? The reason why I am using annotations is because I couldn't figure out how to customize flags to look how I want (whereas annotations were easy to customize).

Can I customize flags to look like my annotations? Would that make onClick and onHover events easier?

Thank you!

[dominik.c]

Hi again!

Yes, I think that in this case using flag series instead of annotations will be a better idea. We stylize them too using such properties as color, fillColor, and style. We can also use events that are already implemented like point.events.click. Check out the demo and tell me if it meets your expectations.

API references:
https://api.highcharts.com/highstock/series.flags.color
https://api.highcharts.com/highstock/se ... .fillColor
https://api.highcharts.com/highstock/series.flags.style
https://api.highcharts.com/highstock/se ... ents.click

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

Best regards!

[himmat]

Thank you the interactivity works great!

Is it possible to anchor these flags on the right side, instead of left? And to hide the small circular point?

[dominik.c]

Hi again!

I'm afraid there are no API options for that. You might try to use an SVG renderer, which allows you to modify the flag's shape. You can also try to write a wrap, but that will be quite complex.

Docs:
https://api.highcharts.com/class-refere ... VGRenderer
https://www.highcharts.com/docs/extendi ... highcharts

Best regards!

[himmat]

Thanks for the info and all the help!

I switched back to using Annotations then https://codepen.io/himmxt/pen/OJRedrv

If you don't mind another question: in my Codepen, I am able to console.log the annotation data on hover. Is it possible to present this data in a tooltip, instead of the console?

[dominik.c]

Hi again!

So the data: mydata1, mydata2, mydata3 you would like to display in a tooltip? But tooltip is visible only when we hover a point, would you like to add a new custom tooltip for each annotation, or to display these data inside the default tooltip when we hover points? Could you be more precise?

Best regards!

[himmat]

Hi Dominik , sorry for my late reply.

Yes, I would like the data from annotation hovers to go into the existing tooltip -- that would be perfect if possible!

[dominik.c]

Hi!

Sorry for the late response.

So basically we can simply use formatter function for that. In that function, we only need to find a proper path to the mydata1 element from annotation and display it.

Demo: https://jsfiddle.net/BlackLabel/89cfzg12/

Best regards!

[himmat]

Hi Dominik thanks for helping again!

It looks like the annotation data is always replacing the entire tooltip -- what I would like is that the annotation data is *added* to the normal tooltip, but only when hovering the annotation. (Currently, the tooltip shows the annotation data no matter where the cursor hovers.) Is this possible?

[dominik.c]

Hi again!

Sure, we can do it by creating an array with x coordinates of our annotation labels. Then we can check in tooltip formatter if the current point has a label, if yes we add extra info(mydata1) to the tooltip, if not we don't add anything.

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

Best regards!

[himmat]

Hi again Dominik,

Your code works well for the single annotation -- but I am having trouble modifying it to work for a variable amount of annotations. Pen: https://jsfiddle.net/ogy54sv9/

So basically, it is working for annotation #1, but not #2 or #3. Could you please assist again?

[dominik.c]

Hi again!

It didn't work because in your first if statement the function returned value + temp.y. You only need to create multiple conditions with else if statement.

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

Best regards!

[himmat]

Thank you! I made a slight modification to your code and got it to work for all tooltips: https://jsfiddle.net/eptgdaq8/

I have one last (hopefully ) question:

1. We successfully got

Code: Select all

chart.annotations[0].options.labels[0].mydata1

to show up in tooltips, for all annotations...
2. Is it possible to alert

Code: Select all

chart.annotations[0].options.labels[0].mydata1

on click, for all annotations that are set up like in https://jsfiddle.net/eptgdaq8/ ?