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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

It can be Chart StripLine as dotted line?

Thread ID:

Created:

Updated:

Platform:

Replies:

118447 Mar 9,2015 05:44 PM UTC Aug 29,2016 01:04 PM UTC ASP.NET MVC 7
loading
Tags: Chart
Daniel
Asked On March 9, 2015 05:44 PM UTC

I need something as this....

chart

How I can do it?

Thanks.

Anandaraj T [Syncfusion]
Replied On 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.
 
Regards,
Anand



Daniel
Replied On March 10, 2015 04:17 PM UTC

Hi,

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

Chart

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.

Anandaraj T [Syncfusion]
Replied On 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

<code>

[CSHTML]

@(Html.EJ().Chart("container")

//Adding strip lines to primary Y axis

.PrimaryYAxis(yaxis =>

    yaxis.StripLine(line =>{

        //Strip line for showing minimum limit

        line.Start(5).End(6).BorderWidth(1).Text("").Color("black").Add();

       

        //Strip line for showing maximum limit

        line.Start(25).End(26).BorderWidth(1).Text("").Color("black").Add();

    })

    )

. . . . . . .

)

[JS]

    //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);

            stripLineGroup.removeChild(rect);

            stripLineGroup.appendChild(line);

       }

    }

</code>

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

http://www.syncfusion.com/downloads/support/directtrac/118447/MvcApplication32058602850.zip

[Screenshot]

Chart strip line with dotted lines

Please let us know if you have any concern.

Regards,

Anandaraj



Daniel
Replied On March 11, 2015 05:18 PM UTC

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

Thanks again... Regards.

Anandaraj T [Syncfusion]
Replied On 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.
 
Regards,
Anandaraj



Deepinder Singh
Replied On 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  

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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, 
 
  
Regards,    
Dharani. 
  
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;