Horizontal line in chart to represent limits

[Philippe Lalonde]

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]

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]

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]

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