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

1 vote


I want my HeatmapColorMap to be part of my chart, so that when I export it, the HeatmapColorMap is visible on the PNG / XPS.
In order to this, I put the HeatmapColorMap inside a CustomAnnotation.
I can see it nicely on my Surface but when I try to export it as XPS or as PNG with some specific size, the numbers and ticks have disappeared, only leaving the rectangle with color gradient (see attached picture)
Is there a way to solve this ?

Thank you !

0 votes

I would like to be able to use a triangle annotation that has a size parameter, so that I can add triangles of different sizes to chart.
I have seen the “Trade Markers” example that uses custom annotations defined by a path. But those annotations are a fixed size. How can I give them a size parameter?

I have tried this, but the point of the triangle doesn’t align with the X value, instead the triangle starts to the right of the X value.
public static CustomAnnotation UpTriangle(int x, double y, double size, Brush color, string axis)
PointCollection myPointCollection = new PointCollection
new Point(0, 0),
new Point(1, 1),
new Point(-1, 1)

  return new CustomAnnotation()
    X1 = x,
    Y1 = y,

    Content = new Polygon()
      Points = myPointCollection,
      Height = size,
      Width = size,
      Stretch = Stretch.Fill,
      Fill = color,
      Stroke = color,
      StrokeThickness = 1,
    YAxisId = axis

Thank you for your help.

  • Steven M asked 3 years ago
  • last active 3 years ago
0 votes

To whom this may concern:

I’m having a slight issue (bug, possibly?) with custom annotations. I have created a custom annotation with an image (XAML shown below)

<s:CustomAnnotation x:Class="Dashboard.SciChartCustomComponents.CustomAnnotations.MicrostructureAnnotation"

    <Border BorderBrush="White" BorderThickness="2" Background="Black">
            <Image x:Name="annotationImage" Stretch="None" Width="150" Height="100" Visibility="Collapsed"/>
            <TextBlock x:Name="annotationText" HorizontalAlignment="Center"/>
            <TextBlock x:Name="parameterText" HorizontalAlignment="Center" Visibility="Collapsed"/>


The image is applied with the following code (note the anchor points are bottom-right):

var annotation = new MicrostructureAnnotation
    HorizontalAnchorPoint = HorizontalAnchorPoint.Right,
    VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
    IsEditable = true,
    X1 = xValue, // Both Obtained from hitpoint X- and Y-Values
    Y1 = yValue

annotation.annotationImage.Source = // some image Uri
annotation.annotationText.Text = // some text
annotation.parameterText.Text = // some other text

So this successfully shows the annotation as i liked, shown in 1.png.

Now I have a function that collapses the visibility of the image, which yields an annotation that is removed from its anchor point (although the top-left location remains the same), shown in 2.png.

If I try to move the annotation after removing the image, the anchor point is in the location of where the top-left anchor should be when the image collapses but the image is still in the wrong location, shown in 3.png.

When I finally do move the annotation, the annotation moves away from the cursor to the top-left anchor point, shown in 4.png.

Again i’m not sure if this is a bug, but could someone please advise?

Thanks kindly!

— Ari

Edit: I don’t have this problem when setting the anchor points to top-left.

  • Ari Sagiv asked 7 years ago
  • last active 6 years ago
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 9 years ago
  • last active 7 years ago
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 8 years ago
  • last active 8 years ago
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

I have a CompositeAnnotation and set CoordinateMode to RelativeX.

How to get absolute X position of the annotation in code behind?

            <s:AnnotationLabel Text="My annotation"
                               LabelPlacement ="Right"


0 votes

I did modify this CustomAnnotationChartModifier. I added a databinding to bing the ShowLabelProperty to the IsSelectedProperty.

    // Recreate all annotations, called when LabelsSource property changes or when the
    // CustomAnnotationChartModifier is attached to the parent surface
    private void RebuildAnnotations() {
        if (base.ParentSurface == null || LabelsSource == null)
        var annotationCollection = base.ParentSurface.Annotations;
        foreach (var item in LabelsSource) {
            var vla = new VerticalLineAnnotation();
            vla.DataContext = item;
            vla.SetBinding(AnnotationBase.X1Property, new Binding("X1") { Mode = BindingMode.OneWay });
            // bind ShowLabelProperty
                new Binding("IsSelected") { RelativeSource = RelativeSource.Self, Mode=BindingMode.OneWay });
            vla.IsEditable = this.IsEditable;
            // after manipulation: write X1Property back to Viewmodel 
            vla.DragEnded += Annotation_DragEnded;
            vla.LabelPlacement = LabelPlacement.Top;
            // test to set directly ShowLabel = (bool)e.NewValue;
            //vla.Unselected += annotation_SelectionChanged;
            //vla.Selected += annotation_SelectionChanged; 
            if (this.MarkerManipulatedCommand != null)
                vla.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(manipulationCompleted_EventHandler);

    private void annotation_SelectionChanged(object sender, EventArgs e) {
        var vla = sender as VerticalLineAnnotation;
        if (vla == null) return;
        vla.ShowLabel =vla.IsSelected;

Result: Select the annoation will show the label. Unselect will not remove the label.
I did try the unselected and selected-event to do the same on other way ->same result.
I can see also that each new selection lighter the label (is it shown more than one time?).

How can I add ToolTipLabel inside that CustomAnnotationChartModifier to see the y-values?


0 votes

I’m trying to implement custom annotations using the MVVM pattern. I’ve been using your tutorial as an example ( Everything works as expected if I manually load some example data to the annotations collection. When I actually try to load the data from our database using async method, the annotations are no longer drawn.

Is this by design or am I doing something wrong? Do you have any suggestions how to load annotations when using async code and MVVM patterns? I haven’t had any problems loading the actual time series on the chart using the same pattern.

I also tried binding the SciChartSurface’s Annotations property to AnnotationCollection and then calling ChartAnnotations.ParentSurface.InvalidateElement(), but the issue still persists.

You can easily reproduce this behavior by adding an async call to the examples’s source code:

private async Task Initialize()
    var ds0 = new XyDataSeries<double, double>();
    var someData = new RandomWalkGenerator().GetRandomWalkSeries(200); // RandomWalkGenerator is found in the examples source code

    ds0.Append(someData.XData, someData.YData);

    _chartSeries = new ObservableCollection<IChartSeriesViewModel>();
    _chartSeries.Add(new ChartSeriesViewModel(ds0, new FastLineRenderableSeries()));

    // Now create the labels
    _chartLabels = new List<LabelViewModel>
                           new LabelViewModel(5, -2.5, "Label0", "Label0 Tooltip!"),
                           new LabelViewModel(20, -2, "Label1", "Label1 Tooltip!"),
                           new LabelViewModel(35, 3, "Label2", "Label2 Tooltip!"),
                           new LabelViewModel(50, 1.5, "Label3", "Label3 Tooltip!"),

    await Test();

    _chartLabels.Add(new LabelViewModel(65, -0.5, "AFTER ASYNC", "Label4 Tooltip!"));

private async Task Test()
    await Task.Delay(5000);
  • Juho asked 5 years ago
  • last active 5 years ago
0 votes

XAxis Labels

I want to have a label on the x axis for each custom annotations. Is this possible. if so how do i do that.


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?

  • Anil Soman asked 3 years ago
  • last active 3 years ago
1 vote


I need to change CustomAnnotation visual view, when property IsSelected = true.

I tried next code:

<Style x:Key="CustomAnnotationStyle" TargetType="{x:Type sc:CustomAnnotation}">
    <Setter Property="IsEditable" Value="True"/>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="Orange"/>
            <Setter Property="BorderThickness" Value="2"/>

But it has no effect.
When I select the Annotation by mouse click, then it still have LightGreen rectangle.

In the Goal I need the Orange circle around of the Content of the Annotation.


0 votes


I’m trying to follow the instructions here:
to create a subclass of CustomAnnotation. I have copied the attributes given in the example (VerticalAnchorPoint=”Bottom” HorizontalAnchorPoint=”Center”) but I still get the error “An attribute name is missing” on anything I put after the attributes. Are there other attributes that may be required for CustomAnnotation, not given in this example?


0 votes

I just found that if you have two y-axis on your graph, you need to define the YAxisId for your CustomAnnotation. Otherwise, it would look like the Y1 property does not work.

Posting here in case someone else run into the same problem I had.

  • Kwokon Ng asked 7 years ago
  • last active 7 years ago
0 votes


There is a strange displaying behavior of custom annotation. I added custom annotation using the code below.

let imageView = UIImageView(image: UIImage(named: imageName))
imageView.frame = CGRect(origin: .zero, size: CGSize(width: 10, height: 10))

let customAnnotation = SCICustomAnnotation()
customAnnotation.customView = imageView
customAnnotation.verticalAnchorPoint = .bottom
customAnnotation.horizontalAnchorPoint = .center
customAnnotation.set(x1: xCoordinate)
customAnnotation.set(y1: yCoordinate)
sciChartSurface?.annotations.add(items: customAnnotation)

The result looks good, but when I move surface left and right, custom annotation would go outside of bounds. Like the image I uploaded.

Please help me solve the issue.


0 votes

SciChart supports exporting to BitmapSource at a specific size, however, this feature does not work for us because we are using custom types for our chart annotations, and we get the following error:

“Please be advised that SciChart doesn’t handle serialization of objects with properties of interface type, collection type or custom type. You need to implement IXmlSerializable in such objects to have them handled properly.”

We haven’t found any example of how to implement IXmlSerializable in on custom type, and were wondering if some guidelines about what is needed to implement that interface could be provided.

The custom type that we are using is an AnnotatedPointMarker, which inherits the sci chart interface IPointMarker. It consists on a square, marking a data point, plus a text annotation on top, and a small line joining the square and the text.

0 votes

I have a custom annotation class that I would like to bind the geometries.



    public GeometryGroup Elements
        get { return _elements; }
            _elements = value;

When I create the class in code it only works if Path was set in xaml, doesn’t work if set in code.

            Path p = new Path();
            p.Data = Geometry.Parse("m 0 0 10 0 10 10 0 10 z");             
            GeometryGroup g = new GeometryGroup();
            CustomPathAnnotation cpa = new CustomPathAnnotation()
                Elements = g,
                X1 = .55,
                Y1 = .5, 
                CoordinateMode = AnnotationCoordinateMode.Relative,
                XAxisId = "DefaultAxisId",
                YAxisId = "DefaultAxisId",
                Visibility = Visibility.Visible
0 votes

How do you place a CustomAnnotation on the axis like an AxisMarkerAnnotation?

  • abc def asked 6 years ago
  • last active 6 years ago
Showing 18 results
This template supports the sidebar's widgets. Add one or use Full Width layout.