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


Hi again!

I have an AnnotationCollection returned from my ViewModel which the SciChartSurface.Annotations binds to

<scichart:SciChartSurface Annotations="{Binding OccurrenceAnnotations}" />

The annotations are generated from a list of objects returned by the model. These objects contain a property which dictates what the annotation should look like (basically a different coloured box)

var annotations = new AnnotationCollection();

foreach (var occ in source)
    // what to do with the occ.EventType enum???
    annotations.Add(new TextAnnotation { X1 = occ.Time, Y1 = 0, ToolTip = MySpecialOccurrenceViewModel.Create(occ)  });

Can you point me at how I go about defining the template and applying it to the annotations?



  • You must to post comments

Hi Andy,

Simplest way to do this would be to subclass TextAnnotation and apply the tooltip in Xaml. To do this, create a new UserControl (xaml, code-behind), then change the base type to TextAnnotation (remember to do this both in code-behind and root element in Xaml). Then apply the tooltip. Your xaml will look something like this:


<s:TextAnnotation Text="{Binding TextOnViewModel}" X1="{Binding X1OnViewModel}" Y1="{Binding Y1OnViewModel" 
      Foreground="#333333" Background="#AAFFFFFF" BorderBrush="#777777" BorderThickness="1">
            <!-- Put any xaml here with bindings to data context -->

Code Behind

public class CustomTextAnnotation : TextAnnotation
     public CustomTextAnnotation()

I’ve gone one step further and created a custom tutorial for you! This uses the ChartModifier API to create a custom chart modifier which binds to a collection of LabelViewModels. It creates the TextAnnotations in the modifier, so you don’t have any TextAnnotation creation in your viewmodel.

To run the example you’ll need to extract the zip file and include the MainWindow and all files in a new VS2010 solution. You’ll also need to reference the RandomWalkGenerator class from the examples source and remove the [UserExample] attribute.

The result looks like this. Hover a label to see its databound tooltip!

  • BowIT_Andy
    Hi Andrew, This is a great example that fulfills nearly all my needs (with a bit of tinkering). The thing I'm having (most!) difficulty with is anchoring an annotation to the y axis. I.e. at the bottom of the chart regardless of the y-axis zoom/pan. Any ideas?
  • Andrew Burnett-Thompson
    Hi Andy, UPDATE In SciChart v1.5 and above you can use Annotation.CoordinateMode = CoordinateMode.RelativeX and RelativeY as well as CoordinateMode.Relative We already have the ability to set X1,Y1 at relative or absolute coordinates (see CoordinateMode.Relative, CoordinateMode.Absolute for annotations). We've now added RelativeY for placement at the bottom of the chart but keep X-coordinate as a data coordinate. This technique is used in the Trade markers example in our examples suite. Best regards, Andrew
  • BowIT_Andy
    That's excellent - works like a dream! Actually in case it's helpful, I set the VerticalAnchorPoint to "Bottom" then annotation.Y1 = VisibleRangeChangedEventArgs.Min.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.