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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Horizontal line in chart to represent limits

Thread ID:

Created:

Updated:

Platform:

Replies:

121907 Feb 6,2016 04:33 PM UTC Feb 9,2016 12:55 PM UTC JavaScript 3
loading
Tags: ejChart
Philippe Lalonde
Asked On February 6, 2016 04:33 PM UTC

Hi,

I'm looking for a way to draw an horizontal line using the javascript chart, similar to what was done here:  https://www.syncfusion.com/kb/2850/how-to-draw-horizontal-line-in-chart

From what I can tell, there is no built in support for line annotations in the js chart. 

Any ideas on how to do this?

Thanks!

Saravana Kumar Kanagavel [Syncfusion]
Replied On February 8, 2016 12:28 PM UTC

Hi Philippe Lalonde,

Thanks for contacting Syncfusion support.
We have analyzed your query. By using API’s “stripLine” you can draw lines in both side of the chart (ie) vertical and horizontal. 
Please find the code snippet below


[JS]

stripLine:

    [

        {

            visible: true

            start: 25,  // To start of y axis point

            end: 40,    // To end of y axis point

            color: 'transparent',  

            borderWidth: 1,

            borderColor:"#6600ff"     

        }

    ],

In the above code, we have drawn the horizontal line by using strip line. On that, we have set the start of y axis point and also set the y axis end point for ending the horizontal line.

Sample can be downloaded from the below link.
Sample Link:
sample

Please let us know if you need any other assistance.

Regards,
Saravana Kumar K

Philippe Lalonde
Replied On February 8, 2016 01:55 PM UTC

Thanks! Looks like I'll be able to do something based on that.

In my case, I don't want to highlight an area. If I put a stripline from say start: 0 to end:40 then I get a "box" around that area coming from the border. If I put start:40 and end:40 then I'm not getting a line. However, start:40 and say end:40.000001 renders what in the end looks like a line 40.

Saravana Kumar Kanagavel [Syncfusion]
Replied On February 9, 2016 12:55 PM UTC

Hi Philippe Lalonde,
In previous update, we have mentioned that start value as 25 and end value as 40 in strip line to briefly indicate what stripline is used for in Chart. For your scenario (to render just a horizontal line) specify start value as 25 and end value as 25.1 and need to set borderWidth as 0. And just set color property with your required color.
Please find the code snippet below

[JS]

stripLine:

    [

        {

            visible: true,

            start: 25,  // To start of y axis point

            end: 25.1,  // To end of y axis point        

           color: '#6600ff',

            borderWidth: 0   

        }        

    ],


Please find the below output


We have modified the sample which we provided in our previous update. It can be downloaded from the below link.
Sample Link: http://www.syncfusion.com/downloads/support/forum/121907/ze/sample_with_output1473789932
Please let us know if you have any concern.

Regards,
Saravana Kumar K

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

;