How to apply and rotate gradient in the chart (SfCartesianChart)?
In this article, we described how to apply and rotate gradient in the Flutter Cartesian Chart.
In Flutter Cartesian Chart widget, you can apply gradient for the chart series and rotate the gradient rendering angle with the help of the gradient property of the chart series. This property can be set using the LinearGradient constructor, which holds the gradient colors list for the series, stops values list for the gradient colors, begin and end alignment geometry for the gradient colors and also transform values for transforming the gradient shader for the series.
In Cartesian charts, there are two ways in which you can rotate the gradient colors of the chart series.
- By using the begin and end alignment properties of the LinearGradient.
- By using the transform property of the LinearGradient.
The following steps explains how to apply and rotate the gradient in the Cartesian chart:
Rotating the series gradient using the begin and end alignment properties
Step 1: First, initialize the SfCartesianChart with all the required properties.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: SfCartesianChart(
primaryXAxis: NumericAxis(),
series: <AreaSeries<_SalesData, num>>[
AreaSeries<_SalesData, num>(
dataSource: chartData,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
)
]
)
);
}
Step 2: Create an instance variable (object) for the LinearGradient with the required gradient colors and stops for the series. Now, by using the begin and end alignment properties of the linear gradient, you can change the rendering angle of the gradient in the series and assign that variable to the gradient property of the area series.
// Initializing the gradient variable for the series.
final LinearGradient _linearGradient = LinearGradient(
colors: <Color>[
Colors.purpleAccent[700],
Colors.purpleAccent[100],
Colors.purple[600],
Colors.deepPurpleAccent[400],
Colors.purple[900],
],
stops: <double>[0.1, 0.3, 0.5, 0.7, 0.9],
// Setting alignment for the series gradient
begin: Alignment.bottomLeft,
end: Alignment.topRight,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter Gradient Area chart'),
),
body: SfCartesianChart(
primaryXAxis: NumericAxis(),
primaryYAxis: NumericAxis(minimum: 20),
series: <SplineRangeAreaSeries<_SalesData, num>>[
SplineRangeAreaSeries<_SalesData, num>(
dataSource: chartData,
// Setting the gradient for the series
gradient: _linearGradient,
xValueMapper: (_SalesData sales, _) => sales.year,
highValueMapper: (_SalesData sales, _) => sales.sales1,
lowValueMapper: (_SalesData sales, _) => sales.sales2
)
]
)
);
}
Rotating the series gradient using the transform property
Step 1: First, initialize the SfCartesianChart with all the required properties.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: SfCartesianChart(
primaryXAxis: NumericAxis(),
series: <AreaSeries<_SalesData, num>>[
AreaSeries<_SalesData, num>(
dataSource: chartData,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
)
]
)
);
}
Step 2: Create an instance variable (object) for the LinearGradient with the required gradient colors and stops for the series. Now, by using the transform property of the LinearGradient rotate gradient to 135 degree so that it starts from the bottom left and ends at the top right.
// Initializing the gradient variable for the series.
final LinearGradient _linearGradient = LinearGradient(
colors: <Color>[
Colors.purpleAccent[700],
Colors.purpleAccent[100],
Colors.purple[600],
Colors.deepPurpleAccent[400],
Colors.purple[900],
],
stops: <double>[0.1, 0.3,0.5, 0.7, 0.9],
// Setting gradient rotation value(degrees in radian) to transform the series gradient
transform: GradientRotation(
(135 * (3.14 / 180)) // Converted 135 degree to radian
)
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter Gradient Area chart'),
),
body: SfCartesianChart(
primaryXAxis: NumericAxis(),
primaryYAxis: NumericAxis(minimum: 20),
series: <SplineRangeAreaSeries<_SalesData, num>>[
SplineRangeAreaSeries<_SalesData, num>(
dataSource: chartData,
// Setting the gradient for the series
gradient: _linearGradient,
xValueMapper: (_SalesData sales, _) => sales.year,
highValueMapper: (_SalesData sales, _) => sales.sales1,
lowValueMapper: (_SalesData sales, _) => sales.sales2
)
]
)
);
}
Screenshot
For more information on the gradient property, please click here.
Conclusion
I hope you enjoyed learning about how to apply and rotate gradient in the chart (SfCartesianchart).
You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.
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!
