In case of PieChart with syncfusion_flutter_charts, the chart screen cannot be output to an image file.

[TakaTeke]

Hello.

I'm trying to draw a chart with syncfusion_flutter_charts and output it to an image file.
I'm having the following problem and it's bothering me.
In the case of ColumnSeries and BarSeries of SfCartesianChart, the chart screen can be output to an image file,
However, PieSeries of SfCircularChart cannot be output to an image file.
The code for outputting to an image file looks like this:

405 Future _renderChartAsImage(String sFileName) async {
406 print('_cartesianChartKey.currentState: ${_cartesianChartKey.currentState}');
407 final ui. Image data =
408 await _cartesianChartKey.currentState!.toImage(pixelRatio: 3.0);
409 final ByteData? bytes =
410 await data.toByteData(format: ui.ImageByteFormat.png);
411 final Uint8List imageBytes =
412 bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
413
414 File file = File(sFileName);
415 print('file: $file');
416 //Write image bytes data
417 await file.writeAsBytes(imageBytes, flush: true);
418 //Open the image file in mobile
419 OpenFile.open(sFileName);
420 }

The execution result logs are as follows.

●For SfCircularChart and PieSeries
flutter: _cartesianChartKey.currentState: null
[ERROR: flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value
#0 GraphDisplayPageState._renderChartAsImage (package:my_material_survey/pages/graph_display_page.dart:408:42)
#1 GraphDisplayPageState._fileSavePicker (package:my_material_survey/pages/graph_display_page.dart:389:13)

#2 GraphDisplayPageState.build. (package:my_material_survey/pages/graph_display_page.dart:186:25)

●SfCartesianChart, ColumnSeries
flutter: _cartesianChartKey.currentState: SfCartesianChartState#b170c(tickers: tracking 1 ticker)
flutter: file: File: '/Volumes/Macintosh HD/Users/taka/testFile2/export/output.png'

●SfCartesianChart, BarSeries
flutter: _cartesianChartKey.currentState: SfCartesianChartState#b170c(tickers: tracking 3 tickers)
flutter: file: File: '/Volumes/Macintosh HD/Users/taka/testFile2/export/output.png'

I will explain the situation.
For PieSeries of SfCircularChart, _cartesianChartKey.currentState is null. This seems to be the cause.
For SfCartesianChart ColumnSeries and BarSeries, _cartesianChartKey.currentState is not null.

The version of the syncfusion_flutter_charts package is ^22.2.9.
Please let me know if you have a better solution.
Thank you.

The code for PieSeries in SfCircularChart looks like this:

final List _pieChartData = [];

SfCircularChart(
backgroundColor: const Color(0xFFFFFFE6),
key: _cartesianChartKey,
legend: const Legend(
isVisible: true,
position: LegendPosition.right,
alignment: ChartAlignment.center,
iconWidth: 24.0,
iconHeight: 24.0,
textStyle:
TextStyle(color: Colors.black, fontSize: 30.0)),
title: ChartTitle(
alignment: ChartAlignment.near,
text: '${widget.questText}',
textStyle: const TextStyle(
fontSize: 28.0,
color: Colors.black,
)),
series: [
// Initialize circular series
(PieSeries<PieChartData, String>(
dataSource: _pieChartData,
pointColorMapper: (PieChartData data, _) =>
data. color,
xValueMapper: (PieChartData data, _) => data.x,
yValueMapper: (PieChartData data, _) => data.y,
radius: '100%',
dataLabelSettings: const DataLabelSettings(
color: Colors.white,
opacity: 1.0,
textStyle: TextStyle(
fontSize: 30.0, color: Colors.black),
isVisible: true),
)),
]
)

class PieChartData {
PieChartData(this.x, this.y, [this.color]);

final String x;
final double y;
final Color? color;
}

The code for ColumnSeries in SfCartesianChart looks like this:

final List _columnChartData = [];

SfCartesianChart(
backgroundColor: const Color(0xFFFFFFE6),
key: _cartesianChartKey,
// title
title: ChartTitle(
alignment: ChartAlignment.near,
text: ' ${widget.questText}',
textStyle: const TextStyle(
fontSize: 28.0,
color: Colors.black,
)),
primaryXAxis: CategoryAxis(
labelStyle: const TextStyle(
fontSize: 24.0, color: Colors.black)),
primaryYAxis: NumericAxis(
labelStyle: const TextStyle(fontSize: 20.0),
),
//tooltipBehavior: _tooltip,
series: <ChartSeries<ColumnChartData, String>>[
// Renders column chart
ColumnSeries<ColumnChartData, String>(
dataSource: _columnChartData,
xValueMapper: (ColumnChartData data, _) => data.x,
yValueMapper: (ColumnChartData data, _) => data.y,
dataLabelSettings: const DataLabelSettings(
color: Colors.white,
opacity: 1.0,
textStyle: TextStyle(
fontSize: 30.0, color: Colors.black),
isVisible: true),
),
]
)

class ColumnChartData {
ColumnChartData(this.x, this.y);

final String x;
final double y;
}

[sfHariHaraSudhan]

Hi @TakaTeke,

From the provided code snippet, we suspect that you have initialized the Global Key with SfCartesianChartState type instead of SfCircularChartState for exporting the Pie Series as well. We have prepared a sample with the provided code snippet to export the Pie Series as an image and to display it in the Dialog box when the text button is clicked. Now, the Pie Series is exported as an image as per your mentioned requirement and it is working properly.

Kindly refer the code snippet below:

class _ExportState extends State<ExportChart> {
  _ExportState();
 
  late GlobalKey<SfCircularChartState> _circularChartKey;
  late List<PieChartData> _pieChartData;
 
  @override
  void initState() {
    _circularChartKey = GlobalKey();
    _pieChartData = <PieChartData>[
      PieChartData('Jan', 12, Colors.blue),
      PieChartData('Feb', 28, Colors.red),
      PieChartData('Mar', 35, Colors.green),
      PieChartData('Apr', 27, Colors.purple),
      PieChartData('May', 42, Colors.cyan),
      PieChartData('Jun', 33, Colors.deepOrangeAccent)
    ];
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            SfCircularChart(
              key: _circularChartKey,
              legend: const Legend(
                isVisible: true,
                position: LegendPosition.right,
                alignment: ChartAlignment.center,
                iconWidth: 24.0,
                iconHeight: 24.0,
                textStyle: TextStyle(
                  color: Colors.black,
                  fontSize: 30.0,
                ),
              ),
              title: ChartTitle(
                  alignment: ChartAlignment.near,
                  text: 'Pie Chart',
                  textStyle: const TextStyle(
                    fontSize: 28.0,
                    color: Colors.black,
                  )),
              series: <CircularSeries<PieChartData, String>>[
                PieSeries<PieChartData, String>(
                  dataSource: _pieChartData,
                  pointColorMapper: (PieChartData data, _) => data.color,
                  xValueMapper: (PieChartData data, _) => data.x,
                  yValueMapper: (PieChartData data, _) => data.y,
                  radius: '100%',
                  dataLabelSettings: const DataLabelSettings(
                    color: Colors.white,
                    opacity: 1.0,
                    textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
                    isVisible: true,
                  ),
                ),
              ],
            ),
            TextButton(
              child: const Text('Export as image'),
              onPressed: () {
                _renderChartAsImage();
              },
            )
          ]),
    );
  }
 
  Future<void> _renderChartAsImage() async {
    final ui.Image data =
        await _circularChartKey.currentState!.toImage(pixelRatio: 3.0);
    final ByteData? bytes =
        await data.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List imageBytes =
        bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
 
    // ignore: use_build_context_synchronously
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.memory(imageBytes),
              TextButton(
                child: const Text('Close'),
                onPressed: () {
                  Navigator.pop(context); // Close the dialog
                },
              ),
            ],
          ),
        );
      },
    );
  }
} 

Snapshot:

Also shared the User Guide documentation link below regarding exporting the Circular chart as an image.
UG: https://help.syncfusion.com/flutter/circular-charts/export-circular-chart#export-image

Attached the sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.
_493873.zip

[TakaTeke]

Hi Hari Hara Sudhan. K.

Thank you for your prompt reply.

From the provided code snippet, we suspect that you have initialized the Global Key with SfCartesianChartState type instead of SfCircularChartState for exporting the Pie Series as well.

I checked my code and you are right.
I was initializing the global key with SfCartesianChartState type instead of SfCircularChartState for exporting circle series.
When I initialized it with SfCircularChartState, everything worked fine and I was able to output to an image file.

So I have to initialize the global keys depending on the chart type.

Thank you.
TakaTeke