Gradient on LineSeries or rather AreaSeries
Hello Guys,
first of all I would like to thank Syncfusion for the great products.
Atm i have a problem with the gradient function for Area Series.
I would like to achieve a look like this:
Im pretty sure there is an easy way to do that.
Thanks in advance.
Greetings
SIGN IN To post a reply.
5 Replies
Hi Leon,
Greetings from Syncfusion. Using the gradient feature for the area series your requirement can be achieved. We have prepared the sample for your scenario and applied gradient colors using the gradient property in the series. You can customize the range of the gradient by setting the stops in the gradient. We have attached the code snippet and sample below for your reference.
Code snippet:
|
final List<Color> positiveColor = <Color>[];
positiveColor.add(Colors.green[50]!);
positiveColor.add(const Color.fromARGB(255, 145, 231, 148));
positiveColor.add(const Color.fromARGB(255, 3, 250, 11));
final List<double> stops = <double>[];
stops.add(0.0);
stops.add(0.5);
stops.add(1.0);
final LinearGradient positiveGradientColors = LinearGradient(
colors: positiveColor,
stops: stops,
begin: Alignment.bottomCenter,
end: Alignment.topCenter);
return Scaffold(
body: SfCartesianChart(
series: <ChartSeries<SampleData, num>>[
AreaSeries(
borderColor: const Color.fromARGB(255, 0, 248, 128),
borderWidth: 3,
gradient: positiveGradientColors,
dataSource: chartData,
xValueMapper: (SampleData data, _) => data.x,
yValueMapper: (SampleData data, _) => data.y),
],
)))) |
Screenshot:
Regards,
Yuvaraj.
SIGN IN To post a reply.
