How to create a custom annotation in WPF Chart (SfChart)?
This article explains how to display custom content in WPF Chart annotation by following a series of steps.
Step 1: Create a custom class that inherits from RectangleAnnotation and add the ContentProperty. Bind this property to the TextElement property.
public class CustomTextAnnotation : RectangleAnnotation
{
public object Content
{
get { return GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
// Using DependencyProperty as the backing store for TextString.
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(CustomTextAnnotation), new PropertyMetadata(null));
protected override void SetBindings()
{
base.SetBindings(); // You need to invoke this method to make all the default bindings.
if (TextElement != null)
{
Binding textBinding = new Binding { Path = new PropertyPath("Content"), Source = this };
//TextElement is content control define internally to display text.
TextElement.SetBinding(ContentControl.ContentProperty, textBinding);
}
}
}
Step 2: Add the necessary content to the Content property of the CustomTextAnnotation. And you can also edit the content in the text box as required.
<chart:SfChart x:Name="chart" Margin="10" > <chart:SfChart.PrimaryAxis> <chart:CategoryAxis/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis/> </chart:SfChart.SecondaryAxis> <chart:SfChart.Annotations> <local:CustomTextAnnotation X1="1.6" X2="2.4" Y1="17.8" Y2="20.3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" CanDrag="True" CanResize="True" x:Name="annotation"> <local:CustomTextAnnotation.Content> <StackPanel Orientation="Horizontal"> <Path Data="M16.710899,36.727C20.7409,39.759457 25.747499,41.558827 31.1693,41.558827 36.588501, 41.558827 41.596401,39.759457 45.627602,36.727 55.046902,37.911882 62.335999, 45.946764 62.335999,55.688923L62.335999,64 0,64 0,55.688923C0,45.946764,7.2904,37.911882, 16.710899,36.727z M31.169201,0C40.807137,0 48.622002,7.8164558 48.622002, 17.455803 48.622002,27.095258 40.807137,34.909003 31.169201,34.909003 21.528767, 34.909003 13.715,27.095258 13.715,17.455803 13.715,7.8164558 21.528767,0 31.169201,0z" Stretch="Uniform" Fill="#606060" Height="49" Width="49"/> <TextBox Text="Employee:Jack Profit:16%" x:Name="textBox" Height="49"
FontSize="15" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" BorderBrush = "Transparent"
TextWrapping = "Wrap Foreground="Black" Background="Transparent" Width="105" /> </StackPanel> </local:CustomTextAnnotation.Content> </local:CustomTextAnnotation> </chart:SfChart.Annotations> <chart:ColumnSeries ItemsSource="{Binding Collection}" XBindingPath="XValue" YBindingPath="YValue"/> </chart:SfChart>
Output
You can download the sample in GitHub.
Conclusion
I hope you enjoyed learning about how to create a custom annotation in WPF Chart (SfChart).
You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our WPF components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our WPF Chart and other WPF components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
