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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need to show chart stripLines as dotted lines

Thread ID:

Created:

Updated:

Platform:

Replies:

123893 Apr 29,2016 12:16 PM UTC May 5,2016 11:30 AM UTC JavaScript 5
loading
Tags: ejChart
Madawa Wipulaguna
Asked On April 29, 2016 12:16 PM UTC

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,
Madawa

Attachment: selected_colours_for_thresholds_f58f1eee.rar

Akbar Basha K M [Syncfusion]
Replied On 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-annotations> 
                          <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-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-annotation e-visible = "true" e-content= "lowtemp2" e-region = 'chart'  e-coordinateunit = "points" e-horizontalAlignment= "middle" e-x="1" e-y = "20"> 
                          </e-annotation> 
</e-annotations> 

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, 
Thanks, 
Akbar Basha KM.

 


Madawa Wipulaguna
Replied On 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,
Madawa

Michael Prabhu M [Syncfusion]
Replied On 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. 
Thanks, 
Michael Prabhu. 


Madawa Wipulaguna
Replied On May 4, 2016 02:35 PM UTC

Just what we need..

Thank you very much

Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On 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. 
 
Regards,  
Preethi  
 


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

;