Pre loader

Is there way to get clicked annotation data?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.

codesandbox example:

In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.

I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.

Please let me know if you got any other question, thank you.

  • You must to post comments
Best Answer


There is a clicked event on annotations which simplifies the code somewhat, but reacting to only the top annotation is still a bit of a challenge. I’ve shown one approach in a fork of your codesandbox here

The key is that internally SciChart checks if each annotation is clicked in reverse order, which means descending z order. Therefore by setting a flag on the first click and using it to ignore subsequent – you get what you want. Because we are using SciChart’s internal click handling, all the events are part of the same call, so we can use setTimeout to clear the flag immediately after this has finished.

Here is the click handling

box.clicked.subscribe((data) => {
  // Click events are sent to annotations in reverse order, ie highest in z order first
  // Only process the first click
  if (!isClicked) {
    textAnn.text = text + " clicked";
    isClicked = true;
    // reset the flag.  This occurs after the current processing (which includes all the potential click events) has finished
    setTimeout(() => {
      isClicked = false;
    }, 0);
    // reset the text after a while
    setTimeout(() => {
      textAnn.text = text;
    }, 1000);

I’ve added a task for us to think about if we could make this easier.


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies