Pre loader

Tag: TextAnnotation

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

1 vote

We’re allowing our users to place down annotations on the chart with an annotation creation modifier. One of these annotations is a Text annotation.

We then allow users to save these annotations into our own proprietary file format and load them back in with the chart data. To do this we iterate through the AnnotationCollection of the chart and parse the SciChart annotations to data we save to our files.

To save the content of the text for the TextAnnotation we read the TextAnnotation.Text property. However, we’ve noticed that this property is not set until the annotation has lost focus (we click away from the annotation somewhere else on the chart). If we save the annotation before we click away from it, we do not get the current text from the TextAnnotation.Text property.

The process to reproduce this is:
1. Place down a TextAnnotation.
2. Edit the TextAnnotation content. Do not click away from the text so to annotation remains in “Editing” mode
3. Save the data.
4. As we’re saving we read the TextAnnotation.Text property to save to our file. However, the TextAnnotation.Text property returns a blank string because its still being edited.

Is there a way from within our code that we can finish the editing of the text annotation, so that when we get the TextAnnotation.Text property it is the current text the user typed in? Or is there a way to get the current text within the TextAnnotation without finishing the editing or changing the focus?

1 vote

Sorry for opening another question, but this followup to got missed.

I’m looking to add a border and background to a TextAnnotation.

Back in the WPF days we had the ability to pretty easily add background colors and such to annotations, thanks to the existing WPF model. I’m assuming in the JS example this would be custom; do you have any existing code/examples for that? Looking for being able to use a colored box whose fill matches the renderable series stroke, along with a contrasting text color.


1 vote

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.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
1 vote

How to update the text Annotation in JavaScript. I can add the new Text annotation but I can’t update the old text Annotation. whether we have any option in sci chart for JavaScript.

1 vote
0 answers

I have issues with the selection box of the textannotation in firefox.

Code for the annotation:

    return new TextAnnotation({
    text: text,
    verticalAnchorPoint: EVerticalAnchorPoint.Center,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
    xCoordinateMode: ECoordinateMode.DataValue,
    yCoordinateMode: ECoordinateMode.DataValue,
    x1: x1,
    y1: y1,
    fontSize: 16,
    fontWeight: "Bold",
    textColor: annotation.color,
    isEditable: isEditable,
    annotationLayer: EAnnotationLayer.AboveChart

Please see the differences in the images attached. In the Firefox browser it seems that the svg takes on the size of the scichart surface. Can you help me to fix this problem? The parameters selectionBoxDelta and selectionBoxThickness work in both browsers but do not fix the problem.

Thank you.

0 votes

Hi All!

I have a syncfusion theme (MaterialDark) applied to my WPF app.

Without the theme applied, I can set the background color of a TextAnnotaion in the normal way in bothe XAML and c#, no problem.

When I apply the theme, it overrides this setting and renders the TextAnnotation with a black background and no matter what I try, I

can’t seem to get rid of it.

I have tried:

  1. setting up a Resource dictionary in XAML

  2. setting the style to null and then applying inline style (in both code behind and XAML)

Nothing seems to work!

Has anyone encountered this issue beforew or know of any solutions?

It’s driving me mad!

0 votes


I am trying to add text annotation on the chart but it doesn’t show. I’m wondering what went wrong with my code.

TextAnnotation textAnnotation = sciChartBuilder.newTextAnnotation()
                .withFontStyle(20, Color.WHITE)
  • Gang Xu asked 3 years ago
  • last active 3 years ago
0 votes

I’m trying to add annotations on a chart but they are rendering above my legend.

Initially (similar to most of the demo code I’ve seen), I setup my modifiers, then created my series and animated them in — then added my annotations (adding to annotationGroup). This created a timeline of blank chart surface with legend (good so far), annotations popping in before the chart series animated in (weird / not good) and on TOP of the legend (really bad), then the animation of the series after that.

I’ve tried about everything I can think of and the best I’ve been able to do is use a completion block of the animation rendering the series — and moved my chart modifiers (and legend) into that completion block. If I put the annotations in the completion block, they will render after the chart modifier and I have the same problem (even if placed after the chart modifiers). I have to set the annotations before the animation, and then the chart modifier in the completion block will work and the legend will be above the . Of course, this is a bit odd too — as first my annotations pop up by themselves on the blank surface, followed by my series animating in, then at the end of the 2 second animation, the legend just pops in.

I really would like my legend to be rendered first on the blank surface and the annotations and chart series to animate in together under my legend. I’m gathering that’s unlikely (at least the animation part) — but is there anyway I can place my legend first and still have the annotations go under it? It feels like the layers should be: modifiers > annotations > rendered series. I also I’ve read this order before in some WPF docs I believe, but doesn’t seem to be respected on iOS?

UPDATE: My current work around isn’t sufficient because I really need access to the renderable series to create the annotations which means I really can’t defer my chart modifiers (i.e. legend) until after the annotations. Additionally, if I need to update (remove / re-add) an annotation due to a series being deactivated in the legend, now my annotations are on top of the legend again.

0 votes

I am placing annotations at the top of every bar in a stacked bar graph (and a standard bar graph on another screen) showing the total of all the stacked bars by iterating through my data, generating the sum, and placing it at the correct x,y (an incredibly manual process that seems like there should be much easier to do but I found no other way to do it – if there is a better way, I would love to hear it, but that’s a secondary issue and not my current problem).

I also have a legend where the user can select / deselect series.

When the user selects/deselects a series from the legend, I need to hide all my annotations and then recreate them because the sums of the stacked bars has changed (or if no bars are showing, remove my annotation completely). My assumption is I could reiterate through my data and check series to see if they are visible (isVisible) and recalculate the sums and recreate the annotations (another very manual process but I can probably work it out).

My primary problem is I see no way for me to intercept that this legend event occurred. The series get hidden internally and I never have a chance to do anything with the annotations. It seems like this may be doable on other platforms but I’m at a loss on iOS. There is no delegate / block event handler / etc.

Any thoughts?

0 votes

The Annotation API mentions adding borders and border colors to this annotation; however, I can find them. Do I need to create an annotation type of my own by extending from the TextAnnotationViewModel?

0 votes

Is it possible to scale annotations? I’ve included a couple screenshots. The first is our old, ugly legacy chart. The next few are SciChart. One challenge we have is to place labels on a chart at different locations relative to specific locations on the series. They need to be annotations that the user DOES NOT have permission to edit before he saves the chart to a PNG.

The purple and red lines on my chart look exceptional and “scale” correctly because their XY values scale as the chart is resized matching the series as it scales.

The red, purple and orange annotations however do not. I understand why it’s happening as I’m placing the annotations at exact locations via XY. So as I magnify or resize the window the XY doesn’t change; however, the original location of my annotation “appears to the user” to move. I understand that it’s not really moving as it is still located at the same exact XY where it was placed.

Is there a simpler way to scale it to a relative position during a window resize? Or am I stuck having to redraw the annotations as this happens?

0 votes

Dear all,

I have a chart where I display threshold, min and max line annotation as define below :

                <!--Display fix average value cursor annotation-->
                <s:HorizontalLineAnnotation x:Name="_avg" HorizontalAlignment="Stretch"
                                        IsEditable="False" LabelPlacement="Axis" 
                                        Style="{DynamicResource AvgAnnotationStyle}"
                                        Y1="{Binding Average,UpdateSourceTrigger=PropertyChanged,
                                                     FallbackValue=0}"  />

                <s:HorizontalLineAnnotation x:Name="_sigmaHight" HorizontalAlignment="Stretch"
                                        LabelTextFormatting="0.00" ShowLabel="True"
                                        Style="{DynamicResource SigmaAnnotationStyle}"
                                        Y1="{Binding SigmaHigh,
                                            FallbackValue=0}" />

                <s:HorizontalLineAnnotation x:Name="_sigmaLow" HorizontalAlignment="Stretch"
                                        LabelTextFormatting="0.00" ShowLabel="True"
                                        Style="{DynamicResource SigmaAnnotationStyle}"
                                        Y1="{Binding SigmaLow,
                                            FallbackValue=0}" />

                <s:HorizontalLineAnnotation x:Name="_threshold" HorizontalAlignment="Stretch"
                                        LabelTextFormatting="0.00" ShowLabel="True"
                                        Style="{DynamicResource ThresholdAnnotationStyle}"
                                        Y1="{Binding LiveThreshold,
                                            FallbackValue=0}" />


These works really nicely when I display my chart with Line series.

Then I am using the same component to display my data series as an Histogram with label as defined in your histogram sample.
But the issue I have is that labels for Histogram in your sample show the creation of those dynamically by creating for each bar a TextAnnotation .

Due to that when I change my graph type and try to display the labels, while I have already some annotation define in my XAML for the chart, my histogram labels are not displayed.

If I remove completely the annotation section of my chart then histogram labels gets display but I cannot have anymore my Horizontal line threshold at same time.

What is the best way to get a combination of both ?

Thanks for help

  • sc sc asked 6 years ago
  • last active 6 years ago
0 votes

hi, I wanted to display the cursor information (x, y value)on the text annotation like the following. I can only find the example of displaying as tooltip, but is it possible to show with the text annotation? Thank you!

  • may lym asked 6 years ago
  • last active 6 years ago
0 votes


I have a TextAnnotation which is set up to edit, I use KeyUp event handler to inspect the Text property but this property does not get updated. If I set the Text value in code I can read it back with the value set in code no problem.

The KeyEventArgs parameter has the character typed but thinking I shouldn’t need to build up a string of entered text?

Looked through documentation and Q&A but nothing relevant.


0 votes

To whom this may concern:

I am having a small problem with text annotations. When they are dynamically created with the IsEditable property set to “true”, the annotations change in size after being moved.

This is shown in the “Interaction with Annotations” example in your Examples program. If you look at the box showing “sell”, at first when you zoom in on it closely enough (using the RubberBandXyZoomModifier around the extents of the TextAnnotation) it retains its size.

Now if you zoom back to the extents, and move the “sell” TextAnnotation anywhere around the graph, and then zoom in on it again, it changes size (screenshot from Examples program attached). This is an issue i’m having with one of my programs.

Is there a way to maintain the size of the text annotation without having to set a fixed height and width?

Thanks kindly!

— Ari

  • Ari Sagiv asked 8 years ago
  • last active 8 years ago
0 votes

Here we use a TextAnnotation as follows

 var textAnnotation = new TextAnnotation
                                     Name = seriesAnnotationParameter.Name,
                                     Text = seriesAnnotationParameter.Text,
                                     ToolTip = seriesAnnotationParameter.ToolTip,
                                     XAxisId = XAxisId,
                                     YAxisId = YAxisId,
                                     X1 = seriesAnnotationParameter.X1,
                                     Y1 = seriesAnnotationParameter.Y1,
                                     HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                                     VerticalAnchorPoint = VerticalAnchorPoint.Center,
                                     TextAlignment = TextAlignment.Center,
                                     Foreground = new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0x00, 0x00)),
                                     Opacity = 0.5,
                                     BorderThickness = new Thickness(1),
                                     CornerRadius = new CornerRadius(1),
                                     IsEditable = false

It works perfectly all-rite when you attach it to the chart the first time as in attached image TextAnnotation_Good.png. However, after zooming in or zooming out, the annotation is resized to undesirable sizes as in attached image TextAnnotation_Bad.png.

How to make TextAnnotation to resize itself based on the size of text inside it ?

This is a very special TextAnnotation centered around a x,y coordinate. There is never X2,Y2 for this use case.

0 votes


I need to get the data positions of a text annotation’s anchor point. So if the Text annotation is anchored at vertical:center, horizontal:center and I want to get the HorizontalAnchor.Right’s position in the chart, how would I go about doing that?


Extra question: Is there a way to get the width of the TextAnnotation in coordinates?

  • kewur asked 9 years ago
  • last active 9 years ago
1 vote

I have got a CustomTextAnnotation like in this example CustomTextAnnotation
I added a Rendertransform like this.

    <RotateTransform Angle="90"/>

But the AnchorPoint is not used as rotation center.
I thought of using ToCoordinate() but need a calculator for that which is not available within CustomTextAnnotation.

What is best practice to achive the requested rotation in sciChart?

1 vote


After I’ve added some TextAnnotations on the graph, I’ve noticed that the TextAnnotations and CustomaAnnotations doesn’t resize with the view. They all stay constant in size. I’ve found a previous question about this in here:

But I’m not getting the results I hoped for with this. The test is still not resizing with the surface. Since it’s been a while that a question was asked about this, maybe there are new methods to do this in Scichart?


  • kewur asked 9 years ago
  • last active 9 years ago
1 vote


I’m using the following code to create a text annotation:

private void AddLabel(DateTime StartTime, DateTime EndTime, string label)
    TextAnnotation text = new TextAnnotation();
    text.YAxisId = "LeftAxis";
    text.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Center;
    text.Text = label;
    text.CoordinateMode = AnnotationCoordinateMode.RelativeY;
    text.X1 = StartTime;
    text.X2 = EndTime;
    text.Y1 = .05;
    text.Y2 = 0;
    text.TextAlignment = TextAlignment.Center;
    text.TextStretch = Stretch.UniformToFill;
    text.Background = new SolidColorBrush(Color.FromArgb(0x80, 0x80, 0x80, 0x80));
    text.BorderBrush = new SolidColorBrush(Color.FromArgb(0xC0, 0xD0, 0xD0, 0xD0));
    text.BorderThickness = new Thickness(2);

Unfortunately the text doesn’t scale like I want it to though. The size of the text stays the same even when the chart is small, making the height greater than .05. Is there a way to make the text get smaller as the chart is shrunk so that it stays within the .05 Y boundary?

I attached 2 images to illustrate the issue.


Showing 20 results

Try SciChart Today

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

Start TrialCase Studies