Custom Annotations - Adding a WaterMark to a Chart

Although SciChart provides a set of the most frequently used basic annotation types, it still isn’t enough in more advanced scenarios. Inspired by wide possibilities given by WPF in styling and templating, SciChart provides a way to extend that annotations set via the CustomAnnotation.

Customizing annotation appearance

Actually, the CustomAnnotation is nothing bigger than a typical ContentControl, which contains an internal logic to be rendered on a SciChartSurface. Thus standard approach works as expected in this case: apply a DataTemplate to the ContentTemplate property, and set the Content property to the object which will act as a DataContext for that DataTemplate.

To see it in action, let’s create a small sample, which will add a multi-line watermark onto a chart. First of all, we’re going to add a DataTemplate into surface’s resource dictionary. Template contains a StackPanel with an Image for logo and a TextBlock for some text:

<s:SciChartSurface.Resources>
    <Style x:Key="ChartWatermarkTextStyle" TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Foreground" Value="Black" />
    </Style>
 
    <DataTemplate x:Key="AnnotationTemplate" DataType="customAnnotationTemplating:CustomAnnotationViewModel">
        <Border Background="#AA147F14"
                BorderBrush="Black"
                BorderThickness="3"
                CornerRadius="5"
                Padding="5">
            <StackPanel>
                <!-- Contains a logotype -->
                <Image Source="{Binding Logo}" />
                <!-- Contains a text -->
                <TextBlock FontSize="12" Style="{StaticResource ChartWatermarkTextStyle}" Text="Powered by" />
                <TextBlock FontStyle="Italic" FontWeight="ExtraBold" Style="{StaticResource ChartWatermarkTextStyle}" Text="{Binding Text}" />
            </StackPanel>
        </Border>
    </DataTemplate>
</s:SciChartSurface.Resources>

Now we need to create a class, which will act as a DataContext. Let’s implement the INotifyPropertyChanged interface to get notifications about property changes:

public class CustomAnnotationViewModel:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string _logo;
    private string _text;
 
    // Provides a text for the watermark
    public string Text
    {
        get { return _text; }
        set
        {
            if (value != _text)
            {
                _text = value;
                OnPropertyChanged(“Text”);
            }
        }
    }
 
    // Provides the path to the image
    public string Logo
    {
        get { return _logo; }
        set
        {
            if (value != _logo)
            {
                _logo = value;
                OnPropertyChanged(“Logo”);
            }
        }
    }
 
    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null) 
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Last step is to use everything we created above and to attach the CustomAnotation to the Annotations collection of the chart:

XAML

<s:SciChartSurface.Annotations>
    <s:CustomAnnotation Content="{Binding AnnotationContent}"
                        ContentTemplate="{StaticResource AnnotationTemplate}"
                        AnnotationCanvas="BelowChart"
                        CoordinateMode="Relative"              
                        Opacity="0.25"
                        X1="0.5"
                        Y1="0.5" />
</s:SciChartSurface.Annotations>

or

C#

var annotation = new CustomAnnotation()
{
    X1 = 4,
    Y1 = 6,
    Opacity = 0.25,
    Content = new CustomAnnotationViewModel() { Logo = "SciChartLogo_Dark.png", Text = "SciChart" },
    ContentTemplate = (DataTemplate) chart.Resources["AnnotationTemplate"]
};
chart.Annotations.Add(annotation);

The output chart might look as on the screenshot below:

Further Reading

To learn more about the Annotations feature of SciChart, please see our documentation:

• The CustomAnnotation Type
• Annotations API
• Templating Annotation Resize Grips
• MVVM Annotations API

Also please find relevant examples at the links below:

• Annotations Are Easy!
• Interaction with Annotations