can i build something like below picture with syncfusion AreaChart?

[mahdiqdi]

Use case

i have to build a chart like this.but i have no idea how to build this with AreaChart and LineCHart
can anyone help me to build this chart?
the problem is how to know chart is below zero to show redColor. pointColorMapper cant help

Proposal

[mahdiqdi]

i found a way
i used onCreateShader property to do this color changes
but the problem is how to know data is below ZERO?
can anyone help me?

onCreateShader: (ShaderDetails chartShaderDetails) { return ui.Gradient.linear( chartShaderDetails.rect.topCenter, chartShaderDetails.rect.bottomCenter, [ green, green, red, red, ], [0, 0.51, 0.51, 1], ); },

[mahdiqdi]

@LokeshPalani
can you help me mr.lokesh?
i really need help

[Preethika]

Hi @mahdiqdi,

We achieved your requirement by using the onActualRangeChanged property in the SfCartesianChart, which allows you to obtain the visible range of the axes. By using the onActualRangeChanged property, you can obtain the positive and negative range of the Y axis using visibleMax and visibleMin. Based on this, we applied a gradient to the AreaSeries using the onCreateShader property. Furthermore, we enabled borderColor and borderWidth in the AreaSeries. To assist you further, we provided a code snippet, screenshot, and sample for your reference. You can modify the sample based on your needs. Please let us know if you have any further needs.

Output Screenshot:

Code snippet:

`
double midValue = 0;
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
primaryXAxis: const DateTimeAxis(),
onActualRangeChanged: (ActualRangeChangedArgs rangeChangedArgs) {
if (rangeChangedArgs.orientation == AxisOrientation.vertical) {
midValue = rangeChangedArgs.visibleMax /
(rangeChangedArgs.visibleMax.abs() +
rangeChangedArgs.visibleMin.abs());
}
},
series: <CartesianSeries<_SalesData, DateTime>>[
AreaSeries<_SalesData, DateTime>(
dataSource: data,
xValueMapper: (_SalesData data, _) => data.year,
yValueMapper: (_SalesData data, _) => data.sales,
color: Colors.green.withOpacity(0.3),
onCreateShader: (ShaderDetails details) {
return ui.Gradient.linear(
details.rect.topCenter,
details.rect.bottomCenter,
[
Colors.green,
Colors.green,
Colors.red,
Colors.red,
],
[
0,
midValue,
midValue,
0.99999,
],
);
},
borderColor: Colors.green,
),

`
Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
gh1915.zip

[mahdiqdi]

thanks mr @PreethikaSelvam
you guys are perfect
this package is the best package for charts in flutter
i always support this perfect package
but callbacks need more tutorials in my opinion.they are so helpful and onActualRangeChanged helped me to find zero line
thanks again

[VijayakumarMariappan]

Hi @mahdiqdi

We will take into account your feedback to improve the API comments for callbacks and will make improvements in upcoming releases.