Always display the area under the AreaSeries

[Valentin Courcoux]

I want to replicate this image with a line of data and a gradient color always positioned under the data.
I tried with LineSeries but the gradient parameter isn't recognized (whereas it is indicated in the doc). AreaSeries, and SplineAreaSeries but the area isn't always under the data.
Am I using the good series? Is there a parameter to specify what I wa

[Yuvaraj Gajaraj]

Hi Valentin, 

 

Greetings from Syncfusion. We have analyzed your query, and we have created a simple sample with the area series and having gradient as you requested and applied the border for your requirement. Here you no need to create new series, we have also attached the sample for your reference. 

 

Screenshot:  

  

  

Sample: https://www.syncfusion.com/downloads/support/forum/170029/ze/f170029-1457382854 

  

If this is not your case, please get back to us with more information on your query if possible, kindly share the screenshot with your exact requirement. This will be much helpful in providing the solution earlier. 

 

Regards, 

Yuvaraj. 

[Yuvaraj Gajaraj]

Hi Valentin, 

  

Kindly ignore the previous sample and find the modified sample for your requirement. 

  

Screenshot: 

   

  

Sample: https://www.syncfusion.com/downloads/support/forum/170029/ze/f1700291567983835  

  

Regards, 

Yuvaraj. 

[Valentin Courcoux]

Hey Yuvaraj,

First of all thank you for the quick response. I didn't expected such a developed response :)

The answer answered perfectly to the screenshot and proposed problem!

While trying your solution, I saw that my problem was related to my negative values.
The colored area is always directed towards the 0 of the Y axis.

My question is:
- Is there a way to show the colored area always under the curb even if they are negatives?

Thanks again

Valentin.

[Yuvaraj Gajaraj]

Hi Valentin, 

 

We have analyzed your query, and we would suggest you the crossesAt property of axis. When you set the crossesAt value say for example -10 in x-axis it will consider the -10 as axis base and render both the positive and negative data point value in upwards, so that the gradient will gets filled as per your scenario.  

 

Code snippet: 

primaryXAxis: DateTimeAxis( 

       crossesAt: -10), 

 

 

Screen shot:  

 

  

For more information on axis crossing feature, find the user guide below. 

User guide: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-crossing 

Sample: https://flutter.syncfusion.com/#/cartesian-charts/chart-types/area/modified-axis-base 

  

Hope this helps you. 

 

Regards, 

Yuvaraj.