Series customization Donut Chart - DoHow do I make gradient color with Donut Chart?

[mdmota]

Gradient.linear does not compile. Can someone send a complete example? My graph will have only one value and with two colors forming a gradient

[sfHariHaraSudhan]

Hi @mdmota,

We have analyzed your query and implemented the workaround sample for the doughnut series with linear gradient as mentioned. Here, we have rendered the doughnut series and provided the gradient fill using the onCreateShader callback.

Also shared the User Guide documentation regarding the gradient fill in the circular chart on below,

UG: https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#linear-gradient.

Kindly review the code snippet below:

class _MyHomePageState extends State<MyHomePage> {
  List<Color> colors = <Color>[
    Colors.blue.shade100,
    Colors.blue.shade500,
  ];
  List<double> stops = <double>[
    0.2,
    0.8,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCircularChart(
        onCreateShader: (ChartShaderDetails chartShaderDetails) {
          return ui.Gradient.linear(chartShaderDetails.outerRect.topRight,
              chartShaderDetails.outerRect.bottomRight, colors, stops);
        },
        series: <CircularSeries<ChartSampleData, String>>[
          DoughnutSeries<ChartSampleData, String>(
            dataSource: <ChartSampleData>[
              ChartSampleData(x: 'David', y: 14, text: '14%'),
              ChartSampleData(x: 'Steve', y: 15, text: '15%'),
              ChartSampleData(x: 'Jack', y: 30, text: '30%'),
              ChartSampleData(x: 'Others', y: 41, text: '41%')
            ],
            xValueMapper: (ChartSampleData sales, _) => sales.x,
            yValueMapper: (ChartSampleData sales, _) => sales.y,
          ),
        ],
      ),
    );
  }
}

Snapshot:

Also attached the sample below for your reference.

Regards, Hari Hara Sudhan. K.

481819.zip