VerticalLineAnnotation with 2 Horizontal Labels

Question

Hi,

I would like to create a vertical line annotation with a label on each side that is horizontal and placed at the top of the chart. I've attached an image to clarify.

Attachment: trendlinedemo_f1c54a6.zip

Durgadevi Selvaraj · Answer

Hi Sean, Thanks for contacting Syncfusion Support. You can achieve this requirement by using ContentTemplate of VerticalLineAnnotation. In that template, you can define a TextBlocks to display Text on both side of Vertical line annotation. Please refer the below code, Code Snippet[XAML] Please refer the reference output screenshot below, You can download the sample for this requirement from below location, Sample:Annotation_Sample Also, you can refer our UG Documentation link to know more about annotations in SfChart from below link, Link: https://help.syncfusion.com/wpf/sfchart/annotations Regards, Durgadevi S

Sean Schellinger · Answer

Thanks Durgadevi. This would work, but I'm creating this annotations in the code behind after the control is initialized. I am able to apply the template, but I need to be able to programatically set the text in each textbox. These are static once set so it can be accomplished via binding or manually. Can you provide an example of this?

Sean Schellinger · Answer

I found that your solution didn't exactly work since the margin would have to be calculated based on text length. This can be done, but I think I found an easier way. I can simply put two annotation on top of each other with one having text on the right and one on the left. How would I rotate these labels?

Durgadevi Selvaraj · Answer

Hi Sean, 
  
Thanks for the update. 
  
You can rotate the text of TextAnnotation by using of Angle property in TextAnnotation as like in below code, 
  
Code Snippet[XAML] 




   <chart:TextAnnotation Text="Title 1" X1="1.5" Y1="57" Angle="90"/> 
  
Please refer our UG documentation link to know about this property, 
Link: https://help.syncfusion.com/wpf/sfchart/annotations#rotate-the-text-annotation 
  
Regards,  
Durgadevi S

Sean Schellinger · Answer

I am still using the VerticalLineAnnotation though. For instance:

VerticalLineAnnotation currentAnnotation = new VerticalLineAnnotation()                {                    X1 = viewModel.CardTimestamps.ElementAt(i),                    Text = viewModel.DebriefCards.ElementAt(i).CardTitle,                    HorizontalTextAlignment = HorizontalAlignment.Right,                    Stroke = new SolidColorBrush(Colors.Black),                    StrokeThickness = 4,                    Opacity = 0.2,                };                //currentAnnotation.ContentTemplate = template;                waveformsGraph.Annotations.Add(currentAnnotation);                if(i > 0)                {                    VerticalLineAnnotation previousAnnotation = new VerticalLineAnnotation()                    {                        X1 = viewModel.CardTimestamps.ElementAt(i),                        Text = viewModel.DebriefCards.ElementAt(i-1).CardTitle,                        HorizontalTextAlignment = HorizontalAlignment.Left,                        Stroke = new SolidColorBrush(Colors.Black),                        StrokeThickness = 4,                        Opacity = 0.2  ,                    };                    //previousAnnotation.ContentTemplate = template;                    waveformsGraph.Annotations.Add(previousAnnotation);

Is it possible to rotate this text?(Sorry not sure how to format as code)

Sean Schellinger · Answer

I am still using the VerticalLineAnnotation though. For instance:

VerticalLineAnnotation currentAnnotation = new VerticalLineAnnotation()                {                    X1 = viewModel.CardTimestamps.ElementAt(i),                    Text = viewModel.DebriefCards.ElementAt(i).CardTitle,                    HorizontalTextAlignment = HorizontalAlignment.Right,                    Stroke = new SolidColorBrush(Colors.Black),                    StrokeThickness = 4,                    Opacity = 0.2,                };                //currentAnnotation.ContentTemplate = template;                waveformsGraph.Annotations.Add(currentAnnotation);                if(i > 0)                {                    VerticalLineAnnotation previousAnnotation = new VerticalLineAnnotation()                    {                        X1 = viewModel.CardTimestamps.ElementAt(i),                        Text = viewModel.DebriefCards.ElementAt(i-1).CardTitle,                        HorizontalTextAlignment = HorizontalAlignment.Left,                        Stroke = new SolidColorBrush(Colors.Black),                        StrokeThickness = 4,                        Opacity = 0.2  ,                    };                    //previousAnnotation.ContentTemplate = template;                    waveformsGraph.Annotations.Add(previousAnnotation);

Is it possible to rotate this text?(Sorry not sure how to format as code)Disregard this. I was able to make two separate templates that I assign programatically to solve my issue.

Muneesh Kumar G · Answer

Hi Sean, 
 
Thanks for the update. 
  
We are glad to know that the given solution worked. Please get back to us if you need further assistance. 
 
Thanks, 
Muneesh Kumar G.