Clickable annotations

[placid2000]

Summary

Making annotations clickable and knowing which annotation by getting for example its xaxis index and/or timestamp would be very handy for some use cases.

API Changes

For example introduce an event called annotationClick() which allows to access different properties of that annotation as well as its y or x axis index or timestamp to be able to identify them.

Intended Use Case

There are anomalies marked with annotations. A click would allow to validate them or add some additional text information.

[ampodobas]

This would be extremely useful

[trylaarsdam]

This would be great- there seems to already be handlers for mouseEnter and mouseLeave, so it'd be super nice if there was a mouseClick one as well to allow for a popup to show

[trylaarsdam]

Actually just realized you can grab the event of a click on any part of the chart using this handler to accomplish this functionality (example in vue2):

var options = {
  chart: {
    events: {
      click: function (e, ctx, options) {
        // check e.target here
        console.log(e.target.innerHTML) // logs the content of the annotation, could be cross referenced with a separate list of annotations to get more info, etc.
      }
    }
  },
}

[robyedlin]

@trylaarsdam The problem is that you cannot easily get the annotation context through the chart click event.

@junedchhipa would it be a problem to add the following to PointsAnnotation.js?

if (anno.click) {
    point.node.addEventListener(
        'click',
        anno.click.bind(this, anno)
    )
}

I think this would be extremely useful, and would be happy to open a PR for it.

[trylaarsdam]

Yeah agreed, that would be nice.

I believe I just included a short ID in the text of the annotation to determine which one was clicked, but that is a bit of a bodge

[robyedlin]

It’s also possible to add a meaningful class to the marker or label, but not the image.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[trylaarsdam]

I'd like for this to remain open since #3318 doesn't fully address the issue because it only adds a click handler for x-axis labels.

[junedchhipa]

Since v3.35.4, click events on annotations are added. The y-axis and the x-axis annotations have click events on their labels, while the point annotations have click events on the marker as well as the label. Here are the docs - https://apexcharts.com/docs/options/annotations/