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;
}

[Hariram-SF4428]

Hi @PawanRamteke,

During load time, you can map the gradient in the Spline Area Chart based on the y-values received from the server by dynamically setting the color for each point. For dynamic updates, this behavior can be achieved by updating the gradient colors in the series and calling setState() to refresh the chart. This ensures that the gradient colors are dynamically applied based on real-time y-value changes.

Please let us know if you need any further assistance.

Regards,
Hariram S