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


Is there a way to draw an svg formatted annotation onto a chart for WPF?

I have found references/examples for it in javascript here . . .

but not for any other platform.

  • You must to post comments

Hi Russell,

WPF supports XAML annotations instead, which is a very similar markup language to SVG. In fact, you can convert between the two using easily available converters.

The WPF CustomAnnotation type allows you to put any XAML as the child of the annotation.

We use this in our annotations example to create trade markers. The buy and sell annotations here are defined like this:

enter image description here

<!-- CustomAnnotation, allows placing any UIElement inside an annotation with placement via a single X1 Y1 coordinate -->
<!-- The BuyMarkerAnnotation displays a green arrow pointing up, with tooltip to bind to Trade data object -->
<s:CustomAnnotation x:Class="SciChart.Examples.Examples.AnnotateAChart.OverlayTradeMarkers.BuyMarkerAnnotation"
                    X1="{Binding X1}"
                    Y1="{Binding Y1}">

    <Path Data="m 4 14 4 0 0 -8 3 0 -5 -5 -5 5 3 0 z"

    <!-- Creating the tooltip. In the TradeOverlayExampleViewModel we set a Trade object as datacontext of this annotation -->
        <ToolTip Foreground="#222">
            <Grid Margin="6" DataContext="{Binding TradeData}">
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Side: " />
                <TextBlock Grid.Row="1" Grid.Column="0" Text="Quantity: " />
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Instrument: " />
                <TextBlock Grid.Row="3" Grid.Column="0" Text="DealPrice: " />
                <TextBlock Grid.Row="4" Grid.Column="0" Text="TradeDate: " />
                <TextBlock Grid.Row="5" Grid.Column="0" Text="Total: " />

                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding BuySell}" Foreground="#FF00B400"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Quantity}" />
                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Instrument}" />
                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding DealPrice, StringFormat=$\{0:0.000\}}" Foreground="#FF00B400"/>
                <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding TradeDate}" />
                <TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding TotalPrice, StringFormat=$\{0:0.000\}}" Foreground="#FF00B400"/>


Let me know if this helps

Best regards

  • Russell Hall
    Thank you. Yes it did help. I was able to create a custom annotation as desired. However, I have run into a problem. If I draw a custom annotation with a path and drag the chart so the center (0,0) moves off the chart the entire annotation disappears.
  • Russell Hall
    A bit more information – the entire custom annotation disappears when the center of the annotation is moved off the screen.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.