Pre loader

How can I make the text annotation stick to the box annotation on zoom?

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 am using the solution you provided on,

The solution work great but there is one issue, the issue is that the text annotation should always be visible.

The issue with this solution is that the text annotation disappear if I zoom in somewhere not the text area.

Also another issue is that, in this example, the first info box x1 is beyond the current range, and so the text annotation is not visible, since the x1 of the text annotation is the same as info box and x1 is not within the current range.

First image show the first red info box x1 is not within current range, therefore not showing text annotation and the second info box working as expected with text annotation.

The second image show what happen once I zoom in on the right side away from the text annotation, then the ‘#21H’ is not visible anymore, which is wrong. Just like in my previous question example, the text annotation should always be visible, other than that, everything work great.

Thank you and let me know if there is any question.

  • You must to post comments
Best Answer


Here is an updated codesandbox with some code to manage the text positions.

For each box and text pair, we do this:

// Synchronise the positions in prerender so that the change affect the current frame and do not trigger another redraw
sciChartSurface.preRender.subscribe((data) => {
  const xAxis = sciChartSurface.xAxes.get(0);
  // Annotation borders give you the size in pixels.
  const { x1: tx1, x2: tx2 } = textAnn.getAnnotationBorders(true, false);
  const width = tx2 - tx1;
  // Convert to data space, since that is how the annotations are placed
  const dataWidth = xAxis.getCurrentCoordinateCalculator().getDataValue(width);
  // Hide the text if there is not space for it in the remaining size of the box
  textAnn.isHidden = boxAnn.x2 < dataWidth;
  // Keep the text on the chart if the left of the box is off it.
  textAnn.x1 = Math.max(boxAnn.x1, xAxis.visibleRange.min);

The key bit is the last line. The rest is handling the case where the box is nearly off the chart and there is not enough space to fit the label. It’s worth being aware of getAnnotationBorders as a way of finding the actual size of an annotation (in pixels)


  • You must to post comments

Hi Nung

I had a similar requirement, but my annotations were at the top of the graph.
So I used a Grid with two rows. And fixed the top row of the Grid to a fixed size.

In both rows I added a SciChartSurface with both having the same value for SciChartGroup.VerticalChartGroup

On the row with annotations I set both X and Y axes visibility to Collapsed and settings as:

            <s:NumericAxis Visibility="Collapsed"  DrawMajorBands="False" DrawMinorGridLines="False" DrawMajorGridLines="False" VisibleRange="{Binding Source={x:Reference Name=primaryXAxis}, Path=VisibleRange, Mode=TwoWay}" ></s:NumericAxis>
        <s:SciChartSurface.YAxes  >
            <s:NumericAxis Visibility="Collapsed" DrawMajorBands="False" DrawMinorGridLines="False" DrawMajorGridLines="False" DrawMajorTicks="False" DrawMinorTicks="False" AxisAlignment="Left" AutoRange="Never" VisibleRange="0,1" ></s:NumericAxis>

Then when the main chart was zoomed, the X-axis of the annotation chart followed it.

I then added my annotation labels/boxes to the annotation chart, setting the CoordinateMode to RelativeY and the Y1,Y2 to 0,1 and the X1,X2 to the span I wanted to cover on Xaxis.

Result is attached.

I am sure you could adapt this idea to move the annotations to the bottom.
The annotations are always visible even if zoom main graph in X or Y.

  • Andrew Milford
    Sorry, should have mentioned this was on wpf, I don’t know if same will work on js
  • Andrew Burnett-Thompson
    It’s similar, and thanks for replying anyway!
  • You must to post comments
Showing 2 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