Set ZIndex of HorizontalLineAnnotation?

[Tom]

Hi, is it possible to set the ZIndex of the HorizontalLineAnnotation so that it doesn't cover any series in the chart? I've tested it for FastStepLineBitmapSeries, FastLineBitmapSeries and FastCandleBitmapSeries. I would like to place it below any series in the chart, so that the series have visual priority. However, other times I need to place it on top of any series.

Thank you.

[Muneesh Kumar G]

Hi Tom,  

  

Thanks for using Syncfusion products.  

 

We have achieved your Z index requirement by modifying SfChart template as per the below code snippet.  

 

Code snippet [XAML]: 

<Grid.Resources> 

            <ControlTemplate TargetType="chart:SfChart" x:Key="seriesUpTemplate"> 

                <Grid> 

                    <Border BorderBrush="{TemplateBinding BorderBrush}"  

                            BorderThickness="{TemplateBinding BorderThickness}" 

                            Background="{TemplateBinding Background}"  

                            Margin="{TemplateBinding Margin}"  

                            KeyboardNavigation.TabNavigation="None"> 

                        … 

                        </Grid> 

                    </Border> 

                </Grid> 

            </ControlTemplate> 

        </Grid.Resources> 

 

<chart:SfChart  Template="{StaticResource seriesUpTemplate}" Grid.Row="1" 

                        Header="Series Up Template"> 

 

 

 We have prepared a sample based on this, please find the sample from the following location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/137969/ze/WPF_Sample-1012997671 

 

If you want to show annotation as a top layer of SfChart means no need to set any template to SfChart.  

 

Please refer below user documentation for more details about annotation.  

 

https://help.syncfusion.com/wpf/sfchart/annotations 

 

Please let us know if you have any queries.  

 

Regards,  

Muneesh Kumar G. 

 

[Tom]

This is great, thank you Muneesh.

[Muneesh Kumar G]

Hi Tom,  

  

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

  

Thanks, 

Muneesh Kumar G. 

[Tom]

Hi Muneesh,

Your solution works for placing ALL annotations below the series, but I need to place some annotations below, and others above the series. For example, all annotations named "A" should be placed below, and all annotations named "B" should be placed above the series. How can this be achieved?

Thank you.

[Durgadevi Selvaraj]

Hi Tom, 

 

We have achieved  your requirement ( to place some annotations below, and others above the series) with the help of Annotations(displays above chart) and axis Striplines(displays below chart) feature as like in below code, 

 

Code Snippet[XAML] 

<chart:SfChart > 

  . . .   

    <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis Maximum="50" Minimum="0"> 

                    <chart:NumericalAxis.StripLines> 

                        <chart:ChartStripLine Width="2"  Start="25" Background="Blue" x:Name="A"/> 

                    </chart:NumericalAxis.StripLines> 

                </chart:NumericalAxis> 

   </chart:SfChart.SecondaryAxis> 

 

   <chart:SfChart.Annotations> 

      <chart:HorizontalLineAnnotation x:Name="B" Y1="10" StrokeThickness="20"  Stroke="Blue" /> 

   </chart:SfChart.Annotations> 

    . . . 

</chart:SfChart> 

We have modified the sample based on your requirement and it can be downloaded from below link, 

Sample:Sample_SfChart
 

 

Please find the reference output screenshot for the above solution, 

 

Also, you can refer our UG documentation to know more about striplines in SfChart, 

Link: https://help.syncfusion.com/wpf/sfchart/striplines 

 

Regards,  

Durgadevi.S 

[Tom]

Hi Durgadevi,

I'm looking for a general method for placing annotations, which can be of any kind. In my specific application I have a horizontal dashed line annotation, which must be placed below all series, and multiple elliptical annotations which must be placed above all series.

[Durgadevi Selvaraj]

Hi Tom, 

 

We have analyzed your requirement and currently we don’t have this option(general method for placing annotations above and below the series), however we have achieved this requirement by placing the annotation below to series by adding FastLineBitmapSeires to series collection initial index. For this series we need to define the position in ItemsSource data in view model. Also, we have placed the elliptical annotation above to series by using EllipseAnnotation. 

 

Please refer the below codes, 

Code Snippet[XAML] 

<chart:SfChart x:Name="chart"  >   

 

<chart:SfChart.Annotations> 

               <chart:EllipseAnnotation  X1="3.5" Y1="20"  X2="4.6" Y2="30" /> 

               <chart:EllipseAnnotation  X1="1.5" Y1="35"  X2="2.5" Y2="45"/> </chart:SfChart.Annotations> 

 

            <chart:FastLineBitmapSeries StrokeDashArray="4,4" ItemsSource="{Binding LineData}" XBindingPath="XValue" YBindingPath="LineVal1" /> 

            <chart:FastLineBitmapSeries StrokeDashArray="4,4” ItemsSource="{Binding LineData}" XBindingPath="XValue" YBindingPath="LineVal2" /> 

            <chart:FastLineBitmapSeries StrokeDashArray="4,4" ItemsSource="{Binding LineData}" XBindingPath="XValue" YBindingPath="LineVal3"  /> 

 

</chart:SfChart> 

 

 

Please find the modified sample for the above solution from below link, 

Sample:Sample_Annotation
 

 

Screenshot :  

 

 

Please let us know if you have any concerns. 

 

Regards,  

Durgadevi.S 

[Tom]

This particular solution does not work when the primary axis is a DateTimeCategoryAxis. In this case I would have to create a source for the dashed lines containing every x value of the original source, which negatively affects the performance when the original source contains a large number of datapoints.

[Samuel Rajadurai Edwin Rajamanickam]

Hi Tom, 

  

We have analyzed your requirement. You can achieve this by generating only two data points instead of generating more number of data points with invisible axis for the FastLineBitmapSeries as per the below code snippet. 

  

Code Snippet 

  

XAML 

                         

        <chart:SfChart x:Name="chart"  Header="Series Down Template" > 

 

         …             

 

                <chart:FastLineBitmapSeries StrokeDashArray="4,4" StrokeThickness="4"  

                                        ItemsSource="{Binding LineData}" XBindingPath="XValue"  

                                        YBindingPath="LineVal1" > 

                <chart:FastLineBitmapSeries.XAxis> 

                    <chart:CategoryAxis ShowGridLines="False" Visibility="Collapsed"/> 

                </chart:FastLineBitmapSeries.XAxis> 

            </chart:FastLineBitmapSeries> 

 

        </chart:SfChart> 

 

  

C# 

                         

    public class ViewModel 

    { 

        public void GenerateData() 

        { 

            …                         

            LineData.Add(new Model() {XValue = 0, LineVal1 = 30 }); 

            LineData.Add(new Model() {XValue = 1, LineVal1 = 30 });        

        } 

    } 

 

  

We have modified the sample as per your requirement. Please find the sample from the following location.  

  

Sample: http://www.syncfusion.com/downloads/support/forum/137969/ze/Sample_Annotation194652993.zip 

  

Please let us know if you have any queries.  

Regards,
Samuel 

[Markus Knauer]

Is it possible to get a real Z position for annotations? I would like to drag an EllipseAnnotation over/under ScatterSeries, because I need a circle around a point cloud, unfortunately the ToolTip of the individual points is then no longer displayed because it is covered by the annotation.

I would be grateful for an answer.

Markus

[Devakumar Dhanapoosanam]

Hi Markus Knauer,

We can position the annotation under the series by extending SfChart as per in below code example.

public class SfChartExt : SfChart

{

    public override void OnApplyTemplate()

    {

        base.OnApplyTemplate();

        Canvas.SetZIndex(GetTemplateChild("Part_SeriesAnnotationCanvas") as Canvas, -1);

    }

}

<local:SfChartExt x:Name="chart">

    …

    <chart:SfChart.Annotations>

        <chart:EllipseAnnotation X1="50" Y1="50" X2="60" Y2="60" 

                                 CanDrag="True"

                                 HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </chart:SfChart.Annotations>

</local:SfChartExt>

Please find the sample from the attachment below and let us know if you need any further assistance.

Regards,

Devakumar D

Attachment: SF_137969_ed35a0eb.zip

[Markus Knauer]

Thank you Devakumar Dhanapoosanam,

this works perfect.

Just a small comment on the first example with the template:

The circle annotation no longer had exactly the right X orientation. When the circle annotation was at X = 0, it was shifted to the right by the width of the X axis. The data points were exact.

With the example of the derived class it works perfectly.

Thanks again

Markus

[Devakumar Dhanapoosanam]

Hi Markus Knauer,

We are glad to know that the provided solution works.

Please let us know if you need any further assistance.

Regards,

Devakumar D