We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfChart control HorizontalLineAnnotation Text


        is this possible to achieve the following look using the HorizontalLineAnnotation.

1- Text should be inline similar as in red square. this can be on the right or left or in middle of the line.

2- the border around the text.

Thank you.

3 Replies 1 reply marked as answer

NM Nanthini Mahalingam Syncfusion Team March 20, 2023 09:28 AM UTC

Hi Atifbuitms,

We have analyzed your requirements and would like to inform you that we can display the labels for annotation using custom annotation inherited from HorizontalLineAnnotation, as shown in the code snippet. We can align the text according to your requirements using the HorizontalTextAlignment and VerticalTextAlignment properties.


   <chart:SfChart.Annotations >

                <chart:HorizontalLineAnnotation   X1="-0.5" StrokeThickness="3"


                                                 StrokeEndLineCap="Square" StrokeStartLineCap="Square"


                                                 StrokeDashArray="1,3" Y1="300"

                                                 X2="4.5" Y2="1600"






                <local:CustomTextAnnotation Y1="300" X1="-0.5" X2="4.5" Stroke="Transparent"

                                            HorizontalTextAlignment="Left" VerticalTextAlignment="Center" >


                        <StackPanel Background="White"  Orientation="Horizontal">

                            <Border BorderBrush="Red" BorderThickness="2" CornerRadius="5">

                                <StackPanel Orientation="Horizontal">

                                    <Border Margin="5,5,0,5" BorderBrush="Black" BorderThickness="1">

                                        <TextBox  Text="{Binding XValue}" x:Name="textBox" Height="49"

                                                  BorderBrush="Transparent"  TextWrapping="Wrap" FontSize="15"     HorizontalContentAlignment="Center"  VerticalContentAlignment="Center"

                                                 Foreground="Black" Background="Transparent" Width="105" />


                                    <Border Margin="0,5,5,5" BorderBrush="Black" BorderThickness="1">

                                        <TextBox Text="{Binding YValue}" x:Name="textBox1" Height="49"

                                                 BorderBrush="Transparent"  TextWrapping="Wrap" FontSize="15"     HorizontalContentAlignment="Center"  VerticalContentAlignment="Center"

                                                 Foreground="Black" Background="Transparent" Width="105" />









  public class CustomTextAnnotation : HorizontalLineAnnotation


        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);





Chart, bar chart

Description automatically generated

Please refer to the following documentation:


Please let us know if you need further assistance.


Nanthini Mahalingam.

Attachment: F181212_d42f5d9d.zip

Marked as answer

DE Developer April 12, 2023 10:29 PM UTC

Thank you very much. its working as expected.

NM Nanthini Mahalingam Syncfusion Team April 13, 2023 11:11 AM UTC

Hi Atifbuitms,

We are glad to hear that our solution met your requirements as expected. As a result, we will mark this issue as resolved. Please let us know if you have any further queries. We are happy to assist you.

Best regards,

Nanthini Mahalingam.

Live Chat Icon For mobile
Up arrow icon