How apply different gradients to each column in Flutter SfCartesianChart
In this article, we explain how to apply the different gradients to each column in our Flutter SfCartesianChart feature tour page.
In the SfCartesianChart widget we can apply different gradient to each column by using the onCreateRenderer callback. Here we need to create a custom column series renderer and return that in onCreateRenderer callback instead of the default renderer.
The following steps explain how to apply the different gradients to each column in ColumnSeries .
Step 1: Initialize the _chartData variable which holds the data source for the chart.
late List<_ChartData> chartData;
@override
void initState() {
chartData = <_ChartData>[
_ChartData('Jan', 35),
_ChartData('Feb', 28),
_ChartData('Mar', 34),
_ChartData('Apr', 32),
_ChartData('May', 40)
];
super.initState();
}
class _ChartData {
_ChartData(this.year, this.sales);
final String year;
final double sales;
}
Step 2: Create a class _ColumnCustomPainter which is extended from ColumnSegment. In this class based on the index, we will be painting the columns with the required gradient color. So, get the current segment index and store it internally for further process as in the below code.
@override int get currentSegmentIndex => super.currentSegmentIndex; }class _ColumnCustomPainter<T, D> extends ColumnSegment<T, D> {
Step 3: Initialize the gradientList variable which holds gradients for each column. Override the onPaint method from ColumnSegment, and set the gradient to the shader property using the createShader method of the gradient.
class _ColumnCustomPainter<T, D> extends ColumnSegment<T, D> {
@override
int get currentSegmentIndex => super.currentSegmentIndex;
@override
void onPaint(Canvas canvas) {
final List<LinearGradient> gradientList = <LinearGradient>[
const LinearGradient(
colors: <Color>[Colors.cyan, Colors.greenAccent],
stops: <double>[0.2, 0.9]
),
const LinearGradient(
colors: <Color>[Colors.pink, Colors.purpleAccent],
stops: <double>[0.2, 0.9]
),
const LinearGradient(
colors: <Color>[Colors.deepPurple, Colors.blue],
stops: <double>[0.2, 0.9]
),
const LinearGradient(
colors: <Color>[Colors.deepOrange, Colors.amber],
stops: <double>[0.2, 0.9]
),
const LinearGradient(
colors: <Color>[Colors.blue, Colors.cyanAccent],
stops: <double>[0.2, 0.9]
)
];
fillPaint!.shader =
gradientList[currentSegmentIndex].createShader(segmentRect.outerRect);
super.onPaint(canvas);
}
}
Step 4: Create a class _customColumnSeriesRenderer which is extended from ColumnSeriesRenderer and in the createSegment method return the _ColumnCustomPainter, so that the column series will get paint based on the fill applied in _ColumnCustomPainter class.
class _CustomColumnSeriesRenderer<T, D> extends ColumnSeriesRenderer<T, D> {
_CustomColumnSeriesRenderer();
@override
ColumnSegment<T, D> createSegment() {
return _ColumnCustomPainter<T, D>();
}
}
Step 5: Now create the SfCartesianChart widget with the ColumnSeries, assign the chartData to the dataSource property, and map the x, y values to xValueMapper, yValueMapper properties respectively. In the onCreateRenderer callback, return the _CustomColumnSeriesRenderer.
SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <ColumnSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: chartData,
onCreateRenderer: (ChartSeries<_ChartData, String> series) {
return _CustomColumnSeriesRenderer();
},
xValueMapper: (_ChartData data, _) => data.year,
yValueMapper: (_ChartData data, _) => data.sales,
)
]
)
Now the column series will render with different gradients to each column points as in below image.
Conclusion
I hope you enjoyed learning about ow apply different gradients to each column in Flutter SfCartesianChart.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
