Need to show chart stripLines as dotted lines

[Madawa Wipulaguna]

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]

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, 

http://help.syncfusion.com/js/chart/annotations 

Thanks, 

Akbar Basha KM.

 

[Madawa Wipulaguna]

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]

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 

Sample link : http://jsplayground.syncfusion.com/1qpdiadk  

Let me know if you have any concern. 

Thanks, 

Michael Prabhu. 

[Madawa Wipulaguna]

Just what we need..

Thank you very much

[Preethi Nesakkan Gnanadurai]

 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