RangeArea dashed lines

[Aparna Pyla]

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)

https://stackblitz.com/edit/angular-rq6cr4-dkcwvx

[Baby Palanidurai]

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, 

https://ej2.syncfusion.com/angular/documentation/chart/strip-line/#dash-array 

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, 

https://stackblitz.com/edit/angular-ahal33-nqsu9c?file=app.component.ts 

 

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]

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]

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

[Baby Palanidurai]

Hi Aparna,

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

Regards,
Baby.