Exporting in Flutter Circular Charts (SfCircularChart)

13 Oct 202314 minutes to read

SfCircularChart provides support to export the circular chart as a PNG image or as PDF document.

Export image

To export the circular chart as a PNG image, we can get the image by calling toImage method in repaint boundary.

DART

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

    
    class ExportCircular extends StatefulWidget {
      
      const ExportCircular({Key? key}) : super(key: key);

      @override
      _ExportState createState() => _ExportState();
    }

    class _ExportState extends State<ExportCircular> {
      _ExportState();

      late GlobalKey<SfCircularChartState> _circularChartKey;
      late List<ChartSampleData> _chartData;

      @override
      void initState() {
        _circularChartKey = GlobalKey();
        _chartData = <ChartSampleData>[
          ChartSampleData(x: 'Jan', y: 12),
          ChartSampleData(x: 'Feb', y: 28),
          ChartSampleData(x: 'Mar', y: 35),
          ChartSampleData(x: 'Apr', y: 47),
          ChartSampleData(x: 'May', y: 56),
          ChartSampleData(x: 'Jun', y: 70),
        ];
        super.initState();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              SfCircularChart(
                key: _circularChartKey,
                series: <CircularSeries<ChartSampleData, String>>[
                  PieSeries<ChartSampleData, String>(
                    dataSource: _chartData,
                    xValueMapper: (ChartSampleData data, _) => data.x,
                    yValueMapper: (ChartSampleData data, _) => data.y,
                  )
                ]
              ),
              TextButton(
                child: const Text('Export as image'),
                onPressed: () {
                  _renderCircularImage();
                },
              )
            ]
          ),
        );
      }

      Future<void> _renderCircularImage() 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);
        await Navigator.of(context).push<dynamic>(
          MaterialPageRoute<dynamic>(
            builder: (BuildContext context) {
              return Scaffold(body: Image.memory(imageBytes));
            },
          ),
        );
      }
    }

    class ChartSampleData {
      ChartSampleData({this.x, this.y});
        final String? x;
        final num? y;
    }

Export PDF

Similar to the above way, we can also export the rendered circular chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.

Add dependency

Add the following additional packages to the dependencies in your pubspec.yaml file.

DART

path_provider: ^2.0.11
    open_file: ^3.2.1
    syncfusion_flutter_pdf: ^latest_version

Include the following code snippet in the main.dart file of your flutter application to export the rendered Circular chart as a PDF document.

DART

import 'dart:io';
    import 'dart:typed_data';
    import 'dart:ui' as ui;
    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:open_file/open_file.dart';
    import 'package:path_provider/path_provider.dart';

    /// Chart import.
    import 'package:syncfusion_flutter_charts/charts.dart';

    /// Pdf import.
    import 'package:syncfusion_flutter_pdf/pdf.dart';


    void main() {
        runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context) {
          return const MaterialApp(
          home: ExportChartToPdf(),
        );
      }
    }

    class ExportChartToPdf extends StatefulWidget {
      const ExportChartToPdf({Key? key}) : super(key: key);

      @override
      ExportChartToPdfState createState() => ExportChartToPdfState();
    }

    class ExportChartToPdfState extends State<ExportChartToPdf> {
      ExportChartToPdfState();
      late GlobalKey<SfCircularChartState> _circularChartKey;
      late List<ChartSampleData> _chartData;

      @override
      void initState() {
        _circularChartKey = GlobalKey();
        _chartData = <ChartSampleData>[
        ChartSampleData(x: 'Jan', y: 35),
        ChartSampleData(x: 'Feb', y: 28),
        ChartSampleData(x: 'Mar', y: 33),
        ChartSampleData(x: 'Apr', y: 32),
        ChartSampleData(x: 'May', y: 40),];
        super.initState();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('Syncfusion Flutter Charts'),),
          body: SfCircularChart(
                key: _circularChartKey,
                series: <PieSeries<ChartSampleData, String>>[
                  PieSeries<ChartSampleData, String>(
                    dataSource: _chartData,
                    xValueMapper: (ChartSampleData data, _) => data.x,
                    yValueMapper: (ChartSampleData data, _) => data.y,
                  )
                ]
          ),
          floatingActionButton: FloatingActionButton(
              onPressed: () {
                _renderPDF();
              },
              child: const Icon(Icons.picture_as_pdf),
          ),
        );
      }

      Future<void> _renderPDF() async {
          final List<int> imageBytes = await _readImageData();
          final PdfBitmap bitmap = PdfBitmap(imageBytes);
          final PdfDocument document = PdfDocument();
          document.pageSettings.size =
          Size(bitmap.width.toDouble(), bitmap.height.toDouble());
          final PdfPage page = document.pages.add();
          final Size pageSize = page.getClientSize();
          page.graphics.drawImage(
              bitmap, Rect.fromLTWH(0, 0, pageSize.width, pageSize.height));
          final List<int> bytes = document.saveSync();
          document.dispose();
          //Get external storage directory
          final Directory directory = await getApplicationSupportDirectory();
          //Get directory path
          final String path = directory.path;
          //Create an empty file to write PDF data
          File file = File('$path/Output.pdf');
          //Write PDF bytes data
          await file.writeAsBytes(bytes, flush: true);
          //Open the PDF document in mobile
          OpenFile.open('$path/Output.pdf');
      }

      Future<List<int>> _readImageData() async {
          final ui.Image data =
              await _circularChartKey.currentState!.toImage(pixelRatio: 3.0);
          final ByteData? bytes =
              await data.toByteData(format: ui.ImageByteFormat.png);
          return bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
      }
    }

    class ChartSampleData {
        ChartSampleData({this.x, this.y});
        final String? x;
        final num? y;
    }