Knowledgebase: Annotations API
Custom Annotations - Adding a WaterMark to a Chart
Posted by Admin - on 21 March 2014 11:20 AM

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:

 

(0 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725