How to export Cartesian Chart as an image in Flutter?
In this article, we explain how to export the cartesian chart as an image using the Flutter Cartesian chart.
The SfCartesianChart widget provides an option to export the chart as an image. The following steps explain how to accomplish this exporting functionality.
Step 1: Initialize the variable _chartData which stores the data source and initialize the variable _cartesianChartKey which stores the global key of the SfCartesianChart widget. This key is used to convert the chart into an image.
late GlobalKey<SfCartesianChartState> _cartesianChartKey;
late List<ChartSampleData> _chartData;
@override
void initState() {
_cartesianChartKey = GlobalKey();
_chartData = < ChartSampleData >[
ChartSampleData ('Jan', 12),
ChartSampleData ('Feb', 28),
ChartSampleData ('Mar', 35),
ChartSampleData ('Apr', 27),
ChartSampleData ('Jun', 42),
ChartSampleData ('Jul', 33)
];
super.initState();
}
class ChartSampleData {
ChartSampleData ({this.x, this.y});
final String? x;
final num? y;
}
Step 2: Now create the SfCartesianChart widget with the ColumnSeries and assign the _chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively. And also assign the _cartesianChartKey to the key property. Assign CategoryAxis for primaryXAxis because we are using strings as x values here.
SfCartesianChart( key: _cartesianChartKey, primaryXAxis: CategoryAxis(), series: <ColumnSeries< ChartSampleData, String>>[ ColumnSeries< ChartSampleData, String>( dataSource: _chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y ) ], )
Step 3: Import the dart files dart:typed_data and dart.ui files to use the Uint8List, ByteData.
import 'dart:typed_data'; import 'dart:ui' as ui;
Step 4: Create a separate method called _renderChartAsImage in which we have converted the rendered cartesian chart to Image by using the toImage method. Then using this Image, converted it into a byte array using toByteData method. Further creates the Uint8List from the byte array which was shown on the new page.
Future<void> _renderChartAsImage() async {
final ui.Image data = await _ cartesianChartKey.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)
);
},
),
);
}
Step 5: Add the TextButton widget and call the _renderChartAsImage method to render the chart image on a new page.
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SfCartesianChart(
key: _ cartesianChartKey,
primaryXAxis: CategoryAxis(),
series: <ColumnSeries<ChartSampleData, String>>[
ColumnSeries<ChartSampleData, String>(
dataSource: _chartData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
)
]
),
TextButton(
child: const Text('Export as image'),
onPressed: () {
_renderChartAsImage ();
},
)
]
);
}
Now, if we tapped the TextButton, the exported image of the cartesian chart will render on the new page.
Conclusion
I hope you enjoyed learning about how to export Cartesian Chart as an image (SfCartesianChart).
You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
