ploting a target horizontal line on a line chart

[Urvashi]

Hello ,

I have a line chart graph.For every such graph i wish to draw a horizontal line indicating the target for that particular chart data.Is there any property from which i can acheive this requirement?

[Lavanya Anaimuthu]

Hi Urvashi,  

  

Greetings from Syncfusion.  

  

We have analyzed your requirement and it can be achieved by using HorizontalLineAnnotation. You can learn more on this from our UG document below link.  

  

UG Link: https://help.syncfusion.com/xamarin/sfchart/chartannotation#vertical-and-horizontal-line-annotation 

  

Also we have prepared a sample for your requirement and it can be downloaded from the below link. 

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/139572/ze/139572-1991714924.zip  

  

Hope this helps.  

  

Thanks,  

Lavanya Anaimuthu.

[Urvashi]

Hi Lavnya,

Thanks for your prompt reply . It partially achieves my requirement. Whwn i show this goal  / Target line as shown in sample 100 is the goal.Can i edit that text and style it according to my requirement .I need to show a string value there,while here its shows a numeric value with default background color.

[Lavanya Anaimuthu]

Hi Urvashi,   

  

We can achieved you requirement by using Text and LabelStyle properties, which are available in HorizontalLineAnnotation. Also we have modified the sample for your requirement and it can be downloaded from the link below  

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/139572/ze/139572-1280105752.zip  

  

Please let us know if you have any other queries. 

  

Thanks,  

Lavanya Anaimuthu. 

[Urvashi]

Hi Lavanya,

I want to show the text at an axis level.Meaning 100 is the goal line so,the text which is shown on y-axis,I wish to edit /show my updated text there.The sample text is coming above line.and i cant put the text on the left side before the Horizontal Line Annotation.I hope you're getting my point.

[Michael Prabhu M]

Hi Urvashi, 

We have achieved your requirement by using ViewAnnotation and ActualRangechanged event. Also, we have modified the sample based on it and it can be downloaded from the link below. 

Sample: 139572_Annotation
 

Screenshot: 

Please refer below code snippet. 

  

Code snippet [XAML]:   

<chart:SfChart.ChartAnnotations> 

                <chart:HorizontalLineAnnotation Y1="100" StrokeWidth="3" > 

                </chart:HorizontalLineAnnotation> 

                <chart:ViewAnnotation x:Name="viewAnnotation"  CoordinateUnit="Pixels" > 

                    <chart:ViewAnnotation.View> 

                            <Entry Text="Editor" /> 

                    </chart:ViewAnnotation.View> 

                </chart:ViewAnnotation> 

</chart:SfChart.ChartAnnotations> 

  

Code Snippet for Android and iOS: 

  

private void NumericalAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 

        { 

            if (Device.RuntimePlatform != Device.UWP) 

            { 

                double x1 = chart.ValueToPoint(chart.PrimaryAxis, 0); 

                double y1 = chart.ValueToPoint(chart.SecondaryAxis, 100); 

  

                if (!double.IsNaN(x1) && !double.IsNaN(y1)) 

                { 

                    viewAnnotation.X1 = x1; 

                    viewAnnotation.Y1 = y1; 

                } 

            } 

        } 

  

For UWP Annotation Horizontal and Vertical Alignment was not working. So, Editor is displayed just below the line annotation. We have already fixed this issue and this fix will be available in our Volume 3  which is expected to rolled out at the end of September. 

  

Code snippet for UWP [CustomRenderer.CS]:    

public class CustomRenderer : SfChartRenderer 

    { 

        protected override void OnElementChanged(ElementChangedEventArgs<SfChart> e) 

        { 

            base.OnElementChanged(e); 

  

            Control.Series[0].Loaded += Series_Loaded; 

        } 

  

        private void Series_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e) 

        { 

            foreach (var annotation in Control.Annotations) 

            { 

                if (annotation is Native.ImageAnnotation) 

                { 

                    (annotation as Native.ImageAnnotation).X1 = Control.ValueToPoint(Control.PrimaryAxis, 0.5); 

                    (annotation as Native.ImageAnnotation).Y1 = Control.ValueToPoint(Control.SecondaryAxis, 100); 

                    (annotation as Native.ImageAnnotation). = Windows.UI.Xaml.VerticalAlignment.Top; 

                } 

            } 

        } 

        

    } 

Thanks, 

Michael