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

It can be Chart StripLine as dotted line?

I need something as this....


How I can do it?


9 Replies

AT Anandaraj T Syncfusion Team March 10, 2015 05:59 AM UTC

Hi Daniel,
Thanks for using Syncfusion products.
We are not able to understand your requirement as we are not able to view the attached image. Could you please reattach the image or provide more description about your requirements ?
The information provided would be of great help in providing a solution.
Please let us know if you have any concern.

DA Daniel March 10, 2015 04:17 PM UTC


This is the image link that I attached: http://i.imgur.com/PevivCV.png?1


I need two horizontal dotted lines, one of this is the maximum value allowed and the another is the mínimum value allowed. I tried with StipLines but i don't found a property to make the StripLine as Dotted... there is a way to make this?

Thanks. Regads.

AT Anandaraj T Syncfusion Team March 11, 2015 01:12 PM UTC

Hi Daniel,

Thanks for providing the information.

We cannot display strip line as dotted lines directly because strip lines are drawn using SVG rect element. As a workaround solution, we can replace the rect elements in strip line with dotted line elements.

Please refer the following code snippet to achieve this




//Adding strip lines to primary Y axis

.PrimaryYAxis(yaxis =>

    yaxis.StripLine(line =>{

        //Strip line for showing minimum limit



        //Strip line for showing maximum limit




. . . . . . .



    //Function to replace strip line rect with dashed lines

    function Load() {

        //Group element for strip line

        var stripLineGroup = $("#container").find("g[id*='Stripline']")[0];

        //Strip line rect elements

        var stripLineRect = $("#container").find("rect[id*='stripline']");

        var dashArray = [3, 4, 5];

        //Replacing each rect element with equivalent line elements

        for (var i = 0; i < stripLineRect.length; i++) {

            var rect = stripLineRect[i];

            var line = document.createElementNS('http://www.w3.org/2000/svg', "line");

            options = {

                'id': rect.id,

                'x1': rect.getAttribute('x'),

                'y1': (parseFloat(rect.getAttribute('y')) + parseFloat(rect.getAttribute('height'))),

                'x2': (parseFloat(rect.getAttribute('x')) + parseFloat(rect.getAttribute('width'))),

                'y2': (parseFloat(rect.getAttribute('y')) + parseFloat(rect.getAttribute('height'))),

                'stroke': rect.getAttribute('fill'),

                'stroke-width': rect.getAttribute("stroke-width"),

                'opacity': rect.getAttribute('opacity'),

                'stroke-dasharray': dashArray


            setAttributes(line, options);






We have also prepared a sample for your requirement and it can be downloaded from the following link



Chart strip line with dotted lines

Please let us know if you have any concern.



DA Daniel March 11, 2015 05:18 PM UTC

Thank you very much, it worked perfectly! Just what I needed.

Thanks again... Regards.

AT Anandaraj T Syncfusion Team March 12, 2015 09:48 AM UTC

Hi Daniel,
Thanks for the update.
We are glad to know the solution is working. Please let us know if you need further assistance on this, we would be happy to help you.

DS Deepinder Singh August 26, 2016 03:23 PM UTC

Hi Anandaraj - I need to implement same feature in mobile apps. I am using syncfusion charts for Xamarin forms. Can this be done using it please let me know. Thanks.

-Deepinder Singh  

DD Dharanidharan Dharmasivam Syncfusion Team August 29, 2016 01:04 PM UTC

Hi Daniel,    
We have created the workaround sample based on your requirement and it can be downloaded from the below location, 

SK Satya Kollipara January 24, 2023 12:57 PM UTC

Hello Syncfusion Team,

I tried achieving the same functionality in xamarin forms in XAML as follows:







                                Text="100" />


In our case, this stripline is not the primary or secondary axis. This piece of code didn't work. Can you please look into it?


Satya K.

DG Durga Gopalakrishnan Syncfusion Team January 25, 2023 12:48 PM UTC

Hi Sathya,

We request you to follow the forum 180178 to get updates regarding last query since it is related to chart Xamarin forms. Please let us know if you have any other concerns in current forum.


Durga Gopalakrishnan.

Live Chat Icon For mobile
Up arrow icon