Articles in this section
Category / Section

How to apply and rotate gradient in the chart (SfCartesianChart)?

3 mins read

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

 Gradient for the series in the chart

 

For more information on the gradient property, please click here.

 

View sample in GitHub


 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment