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

RangeArea dashed lines

Thread ID:

Created:

Updated:

Platform:

Replies:

143896 Apr 9,2019 05:21 PM UTC Apr 11,2019 04:46 AM UTC Angular 4
loading
Tags: ejChart
Aparna Pyla
Asked On April 9, 2019 05:21 PM UTC

Hi,

I have a range area in my chart and I want to set the borders of the Range Area to be dashed line as below image. 



But I have it this way in my Angular 7 project



How to customize the area borders to be dashed lines? If it's not possible using RangeArea type then please suggest any other way that I can achieve my purpose.

Also, the high and low values has be on the datasource (chartData here) inorder for the range area to work. I want the high and low values to be read dynamically from my component instead of from the datasource. Is that possible?

<e-series fill="#82CAFF" [dataSource]='chartData' [border]='border' [marker]='marker' [opacity]='opacity'
type='RangeArea' xName='x' high='high' low='low' name='In Alarm Range' [animation]='animation'>
</e-series>


Below is the sample code (In my project I was able to add the Range area but not sure why it errors in the Stackblitz so I had to comment out the Range Area e-series)



Baby Palanidurai [Syncfusion]
Replied On April 10, 2019 12:03 PM UTC

Hi Aparna, 

Greetings from Syncfusion, 

We have analyzed your query. Please find the below response for your queries. 

Query 1: How to customize the area borders to be dashed lines? 

Your requirement can be achieved by using stripline with dashArray  options. For more information about axis stripline, kindly find the below documentation link, 

Please find the below code snippet to achieve this requirement, 

public primaryYAxis: Object = { 
         stripLines:[ 
            { start: 50, size: 2, sizeType: 'Pixel', dashArray:"10,5", color: "red"}, 
            { start: 80, size: 2, sizeType: 'Pixel', dashArray:"10,5", color: "red"} 
        ] 
    }; 

Screenshot: 
 
Sample for your reference, can be found from below link, 
 
Query 2: Also, the high and low values has be on the datasource (chartData here) inorder for the range area to work. I want the high and low values to be read dynamically from my component instead of from the datasource. Is that possible? 

Only the fields from the dataSource can be bind to the high and low properties in the series. If you want to bind some other values, you can change the dataSource of the chart with this value dynamically. 

Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


Aparna Pyla
Replied On April 10, 2019 02:12 PM UTC

The range area is not transparent. I can not see the line curve within the range area. How can I make it transparent? And I do not need any color filled in the area.

Aparna Pyla
Replied On April 10, 2019 02:25 PM UTC

I have set the fill attribute to white and it looks good. You may mark this closed. Thanks for the response.

Baby Palanidurai [Syncfusion]
Replied On April 11, 2019 04:46 AM UTC

Hi Aparna,

Most welcome. Kindly revert us, if you need further assistance. We are always happy in assisting you.

Regards,
Baby.

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon