SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

0 votes
0 answers

I have created a composite annotation that consists of four elements: two VerticalLineAnnotations, a BoxAnnotation, and a TextAnnotation. When I first add the annotation, everything appears correctly. However, when I change between tabs in my TabControl… the BoxAnnotation disappears. The box will reappear when I move the composite annotation a few pixels.

Note: Calling ZoomExtents() or InvalidateElement() does not fix the issue.

I’ve created a simple app to reproduce the issue.


<s:CompositeAnnotation x:Class="WpfPresentation.Views.PeakAnnotation"

    <s:VerticalLineAnnotation CoordinateMode="Relative" Stroke="#FFBADAFF" StrokeThickness="2" X1="0" X2="0" Y1="0" Y2="1"/>
    <s:VerticalLineAnnotation CoordinateMode="Relative" Stroke="#FFBADAFF" StrokeThickness="2" X1="1" X2="1" Y1="0" Y2="1"/>
    <s:BoxAnnotation x:Name="box" Opacity="0.2" CornerRadius="2" Background="#FFBADAFF" BorderBrush="#1964FF" CoordinateMode="Relative" X1="0" X2="1" Y1="0" Y2="1"/>
    <s:TextAnnotation x:Name="AnnotationTextLabel" CoordinateMode="Relative" X1="0" Y1="0.95" FontSize="12" Foreground="White"/>


public partial class PeakAnnotation : CompositeAnnotation
    public PeakAnnotation()


    public PeakAnnotation(string annotationText)
        AnnotationTextLabel.Text = annotationText;

    public string StyleKey { get; set; }

    public Type ViewType => throw new NotImplementedException();


public MainViewModel()
        ChartTitle = "Testing";

        Annotations = new AnnotationCollection();

        var myAnnotation = new PeakAnnotation("My Annotation Title")
            X1 = 40,
            X2 = 50,
            Y1 = 0,
            Y2 = 100

    public string ChartTitle { get; set; }
    public AnnotationCollection Annotations { get; set; }


<Window x:Class="SciChartTesting.MainWindow"
    xmlns:local="clr-namespace:SciChartTesting" xmlns:s=""
    Title="MainWindow" Height="450" Width="800">

    <local:MainViewModel x:Key="MainViewModel"/>

<Grid DataContext="{StaticResource MainViewModel}">
        <TabItem Header="TabOne">
            <Label Content="This is TabOne"/>
        <TabItem Header="TabTwo">
            <s:SciChartSurface ChartTitle="{Binding ChartTitle}" Annotations="{Binding Annotations}">
                    <s:NumericAxis VisibleRange="0,100"/>
                    <s:NumericAxis VisibleRange="0,100"/>

0 votes
0 answers

Is there a way to add grip handles to the left-center and right-center of a box annotation. By default, grip handles are only created on the four corners of the box. See the attached image. Currently I am creating my annotations in the code behind and view models, not XAML.

If a composite annotation needs to be created, that is fine.

0 votes

To whom this may concern:

I am following up to an issue that I posted a few years ago:

I’ve attached a sample project that outlines what I am trying to accomplish. It is a simple scatter chart with randomized points in which I am trying to draw a rotatable ellipse annotation around the points.

The annotation inherits the “BoxAnnotation” class and replaces it’s template with an ellipse that is shaped to within the bounds of the annotation. This ellipse can be rotated by dragging the ellipse with the right-click button of the mouse. Upon doing so, in order to ensure the ellipse still maintains its shape when zooming in, the ellipse is converted to a geometric path. (Shown when the color of the ellipse changes from red to green.) Like this, when re-sizing the ellipse, it maintains its shape. After re-sizing, if the user wants to rotate the ellipse again, the original Ellipse UIElement re-surfaces and the Path UIElement is hidden. The user can then rotate the ellipse, which is in turn rendered back to a Path UIElement once again. The bounds of the annotation are modified to ensure the ellipse and its geometric path maintains its shape when switching between the Ellipse and the Path UIElements.

The issue is when re-sizing the annotation, and then attempting to rotate the ellipse again, the ellipse is clipped by the bounds of the annotation, even though “ClipToBounds” is set to false (in the code-behind). Unfortunately, I can’t find a pattern for which this occurs, and I have no solution to this issue. Examples of the clipped and non-clipped ellipses are shown in the attached images.

Hopefully the attached project is easy to understand. Can you please advise?

Thank you kindly!

— Ari

EDIT: Code attached as .ZIP file

  • Ari Sagiv asked 6 months ago
  • last active 5 months ago
0 votes

Dear support,

What is the best way to anchor a GroupBox to the top right corner of a SciChartSurface (as shown in the attached screenshot)? At the moment, I am using an absolute positioning that often fails at initialization or when the surface is resized. I am looking into the annotation API, but have not yet found a clean solution.

Thank you,

0 votes


I figured out the problem. The reason why I did not see them was two-fold. The annotation view for some reason cannot infere the height of the parent (the chart) so setting match_parent as height doesn’t work and the view doesn’t have height. Second problem was that I have set .withPosition() with Y value as 0, and that would draw the view under the visible area of the chart.

So let me now ask new questions

1 Is there a possibility to move the annotation just by grabbing it, without first selecting it?
2 How can I change the red border when selecting the annotation?
3 How to set the annotation to return X value of it’s position from the center of its view and not from the start of its view
4 How do I restrict movement of the annotation to only X axis?

/// original question

I have a problem with annotations. What I need to achieve, is to draw custom view (it’s fairly simple) on my chart, and this view should have always the height of the chart.

I can’t make it work, I am adding the annotation in exact same way as in example android project, and I even copied annotation code from your example project to mine, but for some reason it doesn’t work in my project.

this is the drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="">
<item android:width="40dp">
<color android:color="@color/secondary_18"/>
<item android:gravity="center_horizontal" android:width="4dp">
<color android:color="@color/secondary"/>

EDIT: There is no < br > in this code ^

what I already tried:
1. Wrapping the drawable into layout consisting of <ImageView> with src= set to drawable
2. Creating a class extending View() class and then setting the imageResource there
3. inflating my layout first and then putting it inside .withContent()
4. using .withContent() directly with R.layout.some_layout_view
5. using it with .withBackgroundDrawableId()
6. various combinations with setting different widths and heights and .withPosition() and whatever you can think of

I managed to display the CustomAnnotation once (don’t remember with which combination of settings) but it wouldn’t move anyway despite the .withIsEditable(true) and despite it was “selected” (red border around it appeared on click)

my axes:

        val xAxis = sciChartBuilder.newNumericAxis()

    val yAxis = sciChartBuilder.newNumericAxis()


my series:

 chartSurface.renderableSeriesAreaFillStyle = SolidBrushStyle(chartBackgroundColor)
    chartSurface.renderableSeriesAreaBorderStyle = SolidPenStyle(0x0, false, 0f, null)

    val mountainSeries = sciChartBuilder.newMountainSeries()
        .withStrokeStyle(SolidPenStyle(-0x1, true, 0f, null))
        .withAreaFillLinearGradientColors(-0x1, -0xed7422)


my control modifiers:

   val chartModifiers = sciChartBuilder.newModifierGroup()


one example of many of how I tried to add the annotations:


ofc I also tried the same with CustomAnnotation and like I said with various other settings I could think of like .withPosition() and withResizingGrip. Curious thing is that VerticalLineAnnotation works with no problems really.


Alternatively I could go with two VerticalLineAnnotations on top of each other moving together but I would have to be able to move them instantly, without selecting them first, because those circular handles look really bad and I have to disable them.

But later on I need to have box annotation working anyway, there will be X values selecting feature

0 votes

In WPF, I am trying to allow user to resize a box annotation by holding the mouse on its side edges and dragging the mouse to left or right. By default, the box annotation allows to resize only by its round shaped holders appearing on top corners. Is there any way to allow such functionality?

So far, I have thought of placing two vertical annotations inside the box annotation template exactly on its edges and then sync their X coordinates with that of the box by two way binding. However, it is not an easy way to do it and also it does not work when used together as a single custom annotation or composite annotation.

Please suggest if any property can be tweaked for box annotation to achieve this?

0 votes
0 answers


I am using BoxAnnotation in my project. When IsEditable attribute is set to true, there are four resizing grips available on the corners of the box.

The problem is that these grips are only visible when we click on the BoxAnnotation. I couldn’t find any available property to permanently display those resizing grips.

You can view this behavior in the Interaction With Annotations example.

Looking forward to a solution.

  • Ali asked 2 years ago
0 votes

I am creating iOS aplication which displays charts based on stocks data.
I want to create box annotations to show when market is open or closed.
I am using CategoryDateTimeAxis to display data but when i add AnnotationCollection with BoxAnnotations to Surface i can not see the annotations.

This is my code for creating box Annotation:

    let pre = SCIBoxAnnotation()
    pre.coordinateMode = .relative
    pre.x1 = SCIGeneric(setDate(date, 4, 0, 0)!)
    pre.x2 = SCIGeneric(setDate(date, 9, 30, 0)!)
    pre.y1 = SCIGeneric(max )
    pre.y2 = SCIGeneric(0)
    pre.isEditable = false = SCISolidBrushStyle(color: #colorLiteral(red: 0.01680417731, green: 0.1983509958, blue: 1, alpha: 0.13)) = SCISolidPenStyle(color: .clear, withThickness: 0)
  • Marcin C asked 2 years ago
  • last active 2 years ago
0 votes

I am trying to use a BoxAnnotation to put an image on my graph. I am using BelowChart AnnotationCanvas so I can have the graph on top of the image. However, doing so also puts the grid lines on top of the annotation as well. Is there a way to keep the annotation below the chart but still keep it above the grid lines?

1 vote

Hi everyone,

What would be the easiest way of shading all vertical bands for weekend days? I’ve got two ideas:

  1. Setting major band brush won’t work because there’s no way of setting only weekend bands to be major bands (as far as I know).
  2. Using box annotations.

Problem with 2nd option is that annotations are rendered over the chart (screenshot attached). Is there a way of sending them behind columns?


  • Igor Peric asked 3 years ago
  • last active 3 years ago
0 votes

I have the necessity to allow the user to draw one or several polygons upon a heatmap chart to let him select the region he is interested in. See attached image.

I don’t want to selected the markers inside the drawn polygon, only to know the coordinates (in data coordinates, not screen) of the various point that define the polygon.
I saw that the way to do this is to use Annotations however it’s not clear to me if is it possible to have the same behaviour of the BoxAnnotation but with a polygon (without any side number limit)?

Thank you,


1 vote


I’m creating a CustomChartModifier which I am able to hook to a SciStockChart (a template item in a SciChartGroup MVVM) and now I’m having difficulties in adding the BoxAnnotation to the Chart.

This is the code I’m using in my ChartModifier and placing a breakpoint shows me that indeed the code runs through this method, however, I do not see any BoxAnnotation on my chart? I’ve even tried adding the Height and Width properties without any further success. Other CustomModifiers to draw Lines and Ellipses works without problems. Do BoxAnnotations work differently?

I’m looking to have the the user be able to draw a BoxAnnotation on the chart, free hand / dynamically.


public override void OnModifierMouseDown(ModifierMouseArgs e)

        var resources = new AnnotationStyles();
        // x:Key="BoxAnnotationStyle" TargetType="s:BoxAnnotation"
        var style = (Style)resources["BoxAnnotationStyle"];

        _annotationCreation = new AnnotationCreationModifier () { AnnotationType = typeof(BoxAnnotation), AnnotationStyle = style };



<ResourceDictionary xmlns=""

<Style x:Key="BoxAnnotationStyle" TargetType="s:BoxAnnotation">
    <Setter Property="BorderBrush" Value="#279B27"/>
    <Setter Property="Background" Value="#551964FF"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="IsEditable" Value="True"/>

Thanks for any pointers or tips!

  • David T asked 5 years ago
  • last active 4 years ago
2 votes

I want to have a BoxAnnotation where Y1 (- double.Infinity) and Y2 (+ double.Infinity). Basically I wanna specify only X1 and X2. And the behaviour must ensure always the box annotations Y1 & Y2 stretch to visible area even when I resize (zoomout) the chart.

In the screen shot its not stretched.

1 vote

How to create custom annotation which has BoxAnnotation with a VerticalLine Annotation at one end.

At present I’m achieving this by creating both annotations and synchronizing them in ChartModifier.
Look at the attached image where you can see two BoxAnnotations both having a VerticalLineAnnotation at one end. I’m disabling editing for BoxAnnotation and enabling editing only for VerticalLineAnnotation.

When VerticalLineAnnotation is dragged in X-Direction, I get the X1 value from it and manually set it to BoxAnnotations X2.

This is not good implementation. I can see lag between sync events. Is it possible to create a custom annotation which incorporates both Box and Vertical line annotations ? Or is it possible to set IsEditing for BoxAnnotations One End only ?

0 votes

How to change IsEditable behaviour for a annotation ?

Requirement is to allow Editing (Allow resizing box annotation only on X1 or X2 or Y1 or Y2 side).

It must be possible to specify which sides we can resize. (IsEditable on X1 or X2 or (X1 and X2) all combinations ). Because I’m programmatically creating box annotations.

1 vote

Hi, I am displaying no of BoxAnnotation , I want to link some of the BoxAnnotation randomly .I want to perform the operaton on annotation with relation.When it move BoxAnnotation,related link should also move accordingly.I am also performing Y axis with yaxisID so Annotation also move to Y direction with Y axis.
Please help me out.

1 vote

I want to plot line chart on BoxAnnotation, so that BoxAnnotion become as a container.
i.e dataSeries.Append(100, 100);
dataSeries.Append(200, 150;
on BoxAnnotation
Please have a lool into the picture.

0 votes

I’ve created a custom annotation and have set it’s .IsEditable property in code so the user can reposition it. I have two issues:
1.I want the user to be able to resize the “PPZLine” in the X direction, but I can’t figure out how to get the anchor points to appear.

  1. I want to be able to see the chart data that the annotation is covering. I tried setting AnnotationCanvas = BelowChart, but then I couldn’t move the annotation or get any annotation mouse handlers to trigger.

Here’s the annoation’s xaml:

<s:CustomAnnotation x:Class="CinchV2DemoWPF.Views.SciChart.PPZView"

             X1="{Binding X1}"
             Y1="{Binding Y1}"
             d:DesignHeight="300" d:DesignWidth="300">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

    <!-- price line must use margin 0,0 or obj will not be visible-->
        <s:BoxAnnotation Name="LongEntryMarker" Grid.Row="0"
                       Width="20"    Height="10"  Background="DarkViolet" Margin="0,0"  VerticalAlignment="Top" 

        <!-- long marker line MouseRightButtonDown="LongEntryMarker_OnMouseRightButtonDown"-->
        <s:BoxAnnotation Name="PPZLine" Grid.Row="1"
                       Width="150"    Height="5"  Background="red" Margin="0,0"  VerticalAlignment="Top" 
  • tecman234 asked 7 years ago
  • last active 5 years ago
Showing 18 results
This template supports the sidebar's widgets. Add one or use Full Width layout.