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 those gradients in our 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, in which both 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 explains how to apply the 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

 

Define the _degreeToRadian and _resolveTransform methods, which are used to convert the 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 explains how to apply the 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 explains how to apply the 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 gradient to the individual data points using the pointShaderMapper property. For further information, refer to this help document.

 

Thus, the gradient has been filled into the Flutter pie chart.

 

View the sample in GitHub.

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