Spline Area Chart with dynamic gradient.

[PawanRamteke]

Use case

Hi ,

I want to map gradient in the Spline Area Chart. The colors received from the server depending on the y value.
Please suggest how to achieve this.

Proposal

SfCartesianChart(
primaryXAxis: const CategoryAxis(
initialZoomFactor: 0.1,
initialZoomPosition: 1.0,
interval: 1,
// maximum: 10,
title: AxisTitle(text: 'Time', textStyle: TextStyle(color: lightTextColor)),
isVisible: true,
majorGridLines: MajorGridLines(width: 0),
majorTickLines: MajorTickLines(width: 0),
axisLine: AxisLine(color: Colors.transparent),
),
primaryYAxis: const NumericAxis(
minimum: 0,
maximum: 25,
interval: 5,
isVisible: true,
majorGridLines: MajorGridLines(width: 0),
majorTickLines: MajorTickLines(width: 0),
axisLine: AxisLine(color: Colors.transparent),
),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: false,
zoomMode: ZoomMode.x,
enableDoubleTapZooming: true,
),
plotAreaBorderWidth: 0,
legend: const Legend(isVisible: false),
tooltipBehavior: TooltipBehavior(enable: false),
series: _series(),
onZoomEnd: (ZoomPanArgs args) {
// print(args.axis!.visibleLabels[0].text);
if (args.axis!.name == 'primaryXAxis' && args.axis!.visibleLabels[0].text == somData[0].minute) {
print('solution found');
onScrollToStart(somData[0].minute ?? "");
}
},
),

_series() {
int? lastValidYValue;
List<CartesianSeries<dynamic, dynamic>> series = [];
series.add(SplineSeries<SomOverview, String>(
color: Colors.black,
width: 1.0,
dataSource: somData,
animationDuration: 0,
pointColorMapper: (SomOverview model, _) => hexToColor(model.somColor!),
xValueMapper: (SomOverview model, _) => model.minute,
yValueMapper: (SomOverview model, int idx) {
int bpm = double.parse(model.bpmAvg ?? "0.0").toInt();
if(bpm == 0) {
return lastValidYValue ?? 0;
} else {
lastValidYValue = bpm;
return bpm;
}
},
));
int? lastVal;
for (int index = 0;index<(somData.length-1);index++) {
series.add(SplineAreaSeries<SomOverview, String>(
color: Colors.black,
animationDuration: 0,
gradient: LinearGradient(colors: [hexToColor(somData[index].somColor ?? "#ffffff").withOpacity(0.8), hexToColor(somData[index].somColor ?? "#ffffff").withOpacity(0.0)], begin: Alignment.topCenter, end: Alignment.bottomCenter),
dataSource: [somData[index],somData[index+1]],
xValueMapper: (SomOverview model, _) => model.minute,
yValueMapper: (SomOverview model, _) {
int bpm = double.parse(model.bpmAvg ?? "0.0").toInt();
if(bpm == 0) {
return lastVal;
} else {
lastVal = bpm;
return bpm;
}
},
));
}
return series;
}