Articles in this section
Category / Section

How to fill the Flutter Pie Chart with gradient (SfCircularChart) ?

1 min read

SfCircularChart supports three gradient types: linear, sweep, and radial. Follow these steps to achieve these gradients in your chart using the onCreateShader event. For more information, refer to this help document.

Step 1: Along with the charts package, import the packages ‘dart:ui’ and ‘dart:typed data’.

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'package:syncfusion_flutter_charts/charts.dart';

 

Step 2: Declare and define the required list of colors and stops as follows. Both lists must be of equal length.

// Colors to be given for the gradient.
List<Color> colors = <Color> [
  const Color.fromRGBO(75, 135, 185, 1),
  const Color.fromRGBO(192, 108, 132, 1),
  const Color.fromRGBO(246, 114, 128, 1),
  const Color.fromRGBO(248, 177, 149, 1),
  const Color.fromRGBO(116, 180, 155, 1)
];
 
// Stop value denotes fractions along the gradient
List<double> stops = <double> [0.2, 0.4, 0.6, 0.8, 1];

 

Linear Gradient

 

The following code sample demonstrates how to apply a linear gradient to a pie chart:

SfCircularChart(
  onCreateShader: (ChartShaderDetails chartShaderDetails) {
    return ui.Gradient.linear(chartShaderDetails.outerRect.topRight,
      chartShaderDetails.outerRect.centerLeft, colors, stops);
   },
); 

 

linear gradient applied to the chart

 

Sweep Gradient

 

First, define the _degreeToRadian and _resolveTransform methods, which are used to convert degrees to radians and rotate the sweep gradient based on the given start and end angles, respectively.

  // Rotate the sweep gradient according to the start angle 
  Float64List _resolveTransform(Rect bounds, TextDirection textDirection) {
    final GradientTransform transform = GradientRotation(_degreeToRadian(-90));
    return transform.transform(bounds, textDirection: textDirection)!.storage;
  }
 
  // Convert degree to radian
  double _degreeToRadian(int deg) => deg * (3.141592653589793 / 180);
 


The following code sample demonstrates how to apply a sweep gradient to a pie chart:

SfCircularChart(
  onCreateShader: (ChartShaderDetails chartShaderDetails) {
    return ui.Gradient.sweep(
      chartShaderDetails.outerRect.center,
      colors,
      stops,
      TileMode.clamp,
     _degreeToRadian(0),
     _degreeToRadian(360),
     _resolveTransform(chartShaderDetails.outerRect, TextDirection.ltr)
    );
  },
)

 

sweep gradient applied to the chart

 

Radial Gradient

 

The following code sample demonstrates how to apply a radial gradient to a pie chart:

SfCircularChart(
  onCreateShader: (ChartShaderDetails chartShaderDetails) {
    return ui.Gradient.radial(
      chartShaderDetails.outerRect.center,
      chartShaderDetails.outerRect.right - chartShaderDetails.outerRect.center.dx,
      colors,
      stops
    );
  },
)

 

radial gradient applied to the chart

 

You can also apply the gradients to the individual data points using the pointShaderMapper property. For further information, refer to this help document. 

 

Thus, gradients can be effectively applied to Flutter pie charts using SfCircularChart.

 

View the Github Sample here.
Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied