Pre loader

Add custom annotation with fixed x1 value and dynamically changed y1 value with the series data in a real time updated chart

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


I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.

  • Andrew Burnett-Thompson
    Hi Kelly just to let you know, we’re thinking about how to do this and will provide a solution soon. My first idea is to use the HitTest API to determine the Y-value for an X and position the annotation when the chart renders.
  • You must to post comments
Best Answer

Hi Kelly,

I had a look at this. There’s no way to do this in SciChart.js without writing some messy code to use the Hit-Test API or Finding index on the dataseries.

My question to you: Must this be an annotation? In this Vital Signs Monitor example, we use a series to place a single scatter point at the latest X-Y value. This looks great and highlights the leading point.

An annotation would be possible, but the steps are roughly:

  1. Subscribe to sciChartSurface.rendered
  2. inside that find the index to the x-value you want to place your annotation
  3. use that index to get the y-value

Something like this

sciChartSurface.rendered.subscribe(() => {
    const xIndex = findIndex(xyDataSeries, xValue); 
    const yValue = xyDataSeries.getNativeYValues().get(xIndex);
    annotation.y1 = yValue;

You’d have to implement findIndex above, or use our own which is accessible via the webAssemblyContext like this:

const xIndex = wasmContext.NumberUtil.FindIndex(xyDataSeries.getNativeXValues(), 

Note if you wanted to place the annotation on the line segment (between datapoints) some interpolation would be required. You’d need to find the index either side, the y-value either side of the x-location and use linear interpolation.

In short, it’s possible, but requires some extra code.

Best regards,

  • You must to post comments
Best Answer

Update: I’ve created a full example for you to demonstrate this using the techniques we discussed. It does everything except the interpolation in case you wanted to place an annotation between data-points

Find the example here:

Dynamic Annotations

enter image description here

  • You must to post comments

Another example which is interesting from our examples suite:

Animated Realtime Mountain Chart Example

This places an annotation at X,Y of the latest point on a Mountain series. It is updated as the data is updated. The data updates are animated as well

enter image description here

Best regards,

  • Kelly Chan
    Thank Andrew! It’s helpful.
  • You must to post comments
Showing 3 results
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