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

Need to show chart stripLines as dotted lines

Hello there,

    I need to add threshold lines as horizontal lines across a chart. So I found few articles regarding this and created a demo with how we are using ej-chart with angularJs. What I need to do is, make the stripLines dotted.
Here is the link to the jsPlaygrown demo with stripLine : http://jsplayground.syncfusion.com/vuxrx1xb. From this point onwards I couldn't find a way to make the stripLines dotted.

I have attached a image file to show how the dotted lines should be displayed.

Appreciate your help
Best Regards,

Attachment: selected_colours_for_thresholds_f58f1eee.rar

5 Replies

AB Akbar Basha K M Syncfusion Team May 2, 2016 09:22 AM UTC

Hi Madawa, 
Thanks for contacting syncfusion support. We have analyzed your requirement and we like to inform you that, Using stripline we can’t able to achieve dotted line style. However you can able to achieve using annotation as follows, 
Code snippet JS: 

                          <e-annotation e-visible = "true" e-content= "lowtemp" e-region = 'chart'  e-coordinateunit = "points" e-horizontalAlignment= "middle" e-x="1" e-y = "60"> 
                                                                                                  <e-annotation e-visible = "true" e-content= "lowtemp1" e-region = 'chart'  e-coordinateunit = "points" e-horizontalAlignment= "middle" e-x="1" e-y = "40"> 
                                                                                                  <e-annotation e-visible = "true" e-content= "lowtemp2" e-region = 'chart'  e-coordinateunit = "points" e-horizontalAlignment= "middle" e-x="1" e-y = "20"> 

Output Image:  

We have prepared a sample based on your requirement. Please find the sample from  below location. 
Sample Location :Annotation 
Can you please refer the below link to know more details about annotation, 
Akbar Basha KM.


MW Madawa Wipulaguna May 4, 2016 11:26 AM UTC

Hello there,

   Thank you for the solution. We have decided to add the threshold lines as data Series with dashArrays. Now it works as expected. But we need to make the dashArrays bit thicker.
The question is how to make dashArrays thicker?
jsPlaygrown demo with the new solution : http://jsplayground.syncfusion.com/ut1tbgb0.

Best Regards,

MP Michael Prabhu M Syncfusion Team May 4, 2016 11:38 AM UTC

Hi Madawa, 
To increase the thickness of the data series you need to set width property in the series as like in below code snippet. 
Code snippet: 
points: [{ x: 'Jan', y: 200 }, { x: 'Dec', y: 200 }],
name: 'thresholdLine', dashArray : "20,8", fill : "blue", width:4
We have modifed the sample as per your requirement and it can be found in the below link 
Let me know if you have any concern. 
Michael Prabhu. 

MW Madawa Wipulaguna May 4, 2016 02:35 PM UTC

Just what we need..

Thank you very much

PN Preethi Nesakkan Gnanadurai Syncfusion Team May 5, 2016 11:30 AM UTC

 Hi Madawa, 
We are glad to know that your requirement has been met. please let us if you need any further assistance. We would be happy to help you out. 

Live Chat Icon For mobile
Up arrow icon