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

Line isn't shown on axis borders

I'm trying to draw a step line on the chart borders (surrounding the chart).

xAxis is a CategoryAxis, yAxis is NumericalAxis.

On the sample I've created you can see that the blue and red lines are created but not shown on the chart, that the yellow line is on top of the green line and both of them aren't working (I need xAxis to be a CategoryAxis, but I still try to set the xAxis values as NumericalAxis).

Expected result:
Blue line will cover the top of the chart x: 0 - 100, y: 100.
Red line will cover the bottom of the chart x: 0 -100, y: 0.
Green line will cover the left side of the chart x: 0, y: 0 - 100.
Yellow line will cover the right side of the chart x: 100, y: 0 - 100.

How can I accomplish that?



Attachment: Step_Line_dce40c05.rar

7 Replies

SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team April 19, 2016 02:39 PM UTC

Hi Dov,

The series are placed in the start and end range, so it is hiding under the area border. To make the series visible we can set the stroke thickness in the series as like in below code snippet.

Code Snippet:


<syncfusion:FastStepLineBitmapSeries  Name="chrBlue"   Margin="-1,-1,-1,-1"

                                      ItemsSource="{Binding measurments}"                  

                                      SortDirection="Ascending" XBindingPath="X"

                                      YBindingPath="Y" StrokeThickness="5"/>

Please check our other features which may be useful to you.
Stripline: http://help.syncfusion.com/wpf/sfchart/striplines
Line Annotation: http://help.syncfusion.com/wpf/sfchart/annotations#shapeannotations
Please provide us more information on your requirement so that we can provide you with the best solutions.

DO Dov April 19, 2016 03:33 PM UTC

Thank you for your fast reply.

The line still not shown on the bottom line: x from 0 to 100 and y 0.



SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team April 20, 2016 01:40 PM UTC

Hi Dov,

Thanks for the update.

Bottom line was overlapped axis line and area border, so it is not viewed. We need to adjust the StrokeThickness according to it. In addition to this, we can achieve your requirement by using vertical line and horizontal line annotations. We have prepared a sample and it can downloaded from the following location.

Please let us know, if the above sample satisfies your requirement or else provide more information on this.


DO Dov January 30, 2017 12:39 PM UTC


I'm still having problems with my example.
In your solution you just write the line a bit under the Axis. I need to write the line on top of the Axis.

I've added a sample project that contain 3 lines on the top, middle and bottom of the chart.
What do I need to set in XAML in order to view both top and bottom lines look just like the middle line (StrokeThickness="4" ).
I've tried to change AreaBorderThickness and AreaBorderBrush as well as margin without success.



Attachment: WpfApplication1_2a7533e.rar

DA Devi Aruna Maharasi Murugan Syncfusion Team January 31, 2017 10:07 AM UTC

Hi Dov, 
Thanks for your update. 
We can achieve your requirement by two ways 
1)By setting PlotOffset 
By setting PlotOffset property for SecondaryAxis, we can avoid the overlapping of axis line over series and the PlotOffset property can be set as shown in the below code snippet, 

    <syncfusion:SfChart.SecondaryAxis > 
         <syncfusion:NumericalAxis PlotOffset="10" /> 
We have modified the provided sample and it can be downloaded from below link, 
2)By increasing the StrokeThickness of series 
We can also make the top and bottom series to look like the middle series by increasing the StrokeThickness (StrokeThickness = 8) for both the series. 

DO Dov February 1, 2017 11:28 AM UTC

Thank you very much.

PlotOffset as solved it for me.


DA Devi Aruna Maharasi Murugan Syncfusion Team February 2, 2017 03:56 AM UTC

Hi Dov, 
Thanks for your update. 
Please let us know, if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon