Orientation / Resolution of Exporting Chart to PDF

Question

I used the code as provided at https://support.syncfusion.com/kb/article/11557/how-to-export-the-cartesian-chart-as-a-pdf-document-sfcartesianchart to add support to my application to export charts as PDF.

1) When exporting the chart it is exported in portrait mode; though the chart that I am printing has screen dimensions where it is much wider than it's height. The function documentation states "The returned ui.Image has uncompressed raw RGBA bytes in the dimensions of the render object, multiplied by the pixelRatio." So, I would have thought my image should have rendered in landscape mode. Is there a way to render the image in landscape mode?

2) The x axis and y axis labels are blurry (Especially when the chart has a dark theme); is there someway to fix this?

Thanks!

Jeff

Hariharasudhan Kanagaraj · Answer

Hi Jeffrey,Query 1 : Export chart as PDF in landscape orientation.You can export the chart as a PDF in landscape orientation by setting the orientation property of the PdfPageSettings inside the PdfDocument class based on the specified conditions in the _renderPdf method as shown in the code snippet below. Future _renderPdf(BuildContext context) 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, ); final PdfBitmap bitmap = PdfBitmap(imageBytes); final PdfDocument document = PdfDocument(); // Decides to render the pdf in landscape or portrait orientation. if (bitmap.width > bitmap.height) { document.pageSettings.orientation = PdfPageOrientation.landscape; } else { document.pageSettings.orientation = PdfPageOrientation.portrait; } // Set the page size based on the chart dimensions 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), ); await FileSaveHelper.saveAndLaunchFile( await document.save(), 'cartesian_chart.pdf', ); ScaffoldMessenger.of(context).showSnackBar( const SnackBar( behavior: SnackBarBehavior.floating, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(5), ), ), duration: Duration(milliseconds: 200), content: Text('Chart has been exported as PDF document.'), ), ); } Query 2 : X Axis and Y Axis labels are blurry in dark mode. We would like to inform you that when we apply the dark mode to the SfCartesianChart using the SfChartTheme, both the x-axis and y-axis labels are rendering properly and displayed in white color. As a result, this may cause the labels to appear blurry. To avoid the mentioned behavior, we recommend setting the backgroundColor to black or any desired color. This will ensure that both the x-axis labels and y-axis labels are displayed properly.Kindly refer the code snippet below. SfChartTheme( data: SfChartThemeData( backgroundColor: Colors.black, brightness: Brightness.dark, ), child: SfCartesianChart( key: _cartesianChartKey, primaryXAxis: CategoryAxis(), series: >[ ColumnSeries( dataSource: _chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y, ), ], ), ), Snapshot for both the queries :Also 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. Attachment: 185251_6b44df7b.zip