diff --git a/README.md b/README.md index d12ce08..6b8697c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,27 @@ # How to Export Chart as Image in WinUI Chart This article provides a detailed walkthrough on how to export a [WinUI Cartesian Chart](https://www.syncfusion.com/winui-controls/cartesian-charts) as an image. You can export the chart view in your desired file format, with supported formats being **JPEG** and **PNG.** +The Syncfusion WinUI Chart control supports exporting rendered charts to image formats, enabling developers to preserve visual data for reporting, sharing, or archival purposes. + +## Overview + +The chart export functionality is exposed via the ExportToImage method in the SfCartesianChart and SfCircularChart classes. This method allows you to capture the current visual state of the chart and save it to a file or stream in various image formats. + +## Supported Image Formats +You can export charts to the following formats: +- PNG (lossless, widely supported) +- JPEG (compressed, suitable for web) + +## Use Cases + +- Business Reporting: Export charts to image files for embedding in PDF or Word documents used in financial or operational reports. +- Data Sharing: Share chart visuals with stakeholders via email, chat, or collaboration platforms without requiring access to the application. +- Archival and Compliance: Save chart snapshots as part of audit trails or historical data records for regulatory compliance. +- Presentation Materials: Include exported chart images in PowerPoint slides or dashboards for meetings and presentations. +- Offline Access: Provide users with downloadable chart images for viewing when internet or application access is unavailable. +- Documentation and Tutorials: Use chart images in technical documentation, user guides, or training materials to illustrate data insights. +- Social Media and Marketing: Share chart visuals on social platforms to highlight trends, performance metrics, or product analytics. + ### Initialize SfCartesianChart: Set up the **SfCartesianChart** following the [ Syncfusion WinUI Cartesian Chart documentation.](https://help.syncfusion.com/winui/cartesian-charts/getting-started) @@ -83,6 +104,10 @@ private async void Button_Click(object sender, RoutedEventArgs e) ![chart.png](https://support.syncfusion.com/kb/agent/attachment/article/18644/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0MjMyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.VhSO304zS7VSvBDSySJWOBxdySgRK0LWuAdmx3Vl4No) +## Troubleshooting + +If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project. + ### KB link For a more detailed, refer to the [Export Chart View as Image KB.](https://support.syncfusion.com/kb/article/18644/how-to-export-chart-as-image-in-winui-chart-sfcartesianchart) diff --git a/WinUISampleDemo/WinUISampleDemo/App.xaml b/WinUIExportSample/App.xaml similarity index 88% rename from WinUISampleDemo/WinUISampleDemo/App.xaml rename to WinUIExportSample/App.xaml index 1992c70..432db7c 100644 --- a/WinUISampleDemo/WinUISampleDemo/App.xaml +++ b/WinUIExportSample/App.xaml @@ -1,9 +1,9 @@ + xmlns:local="using:WinUIExportSample"> diff --git a/WinUISampleDemo/WinUISampleDemo/App.xaml.cs b/WinUIExportSample/App.xaml.cs similarity index 89% rename from WinUISampleDemo/WinUISampleDemo/App.xaml.cs rename to WinUIExportSample/App.xaml.cs index b6d1f9f..995e7c9 100644 --- a/WinUISampleDemo/WinUISampleDemo/App.xaml.cs +++ b/WinUIExportSample/App.xaml.cs @@ -19,20 +19,22 @@ // To learn more about WinUI, the WinUI project structure, // and more about our project templates, see: http://aka.ms/winui-project-info. -namespace WinUISampleDemo +namespace WinUIExportSample { /// /// Provides application-specific behavior to supplement the default Application class. /// public partial class App : Application { + private Window? _window; + /// /// Initializes the singleton application object. This is the first line of authored code /// executed, and as such is the logical equivalent of main() or WinMain(). /// public App() { - this.InitializeComponent(); + InitializeComponent(); } /// @@ -41,10 +43,8 @@ public App() /// Details about the launch request and process. protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args) { - m_window = new MainWindow(); - m_window.Activate(); + _window = new MainWindow(); + _window.Activate(); } - - private Window? m_window; } } diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/LockScreenLogo.scale-200.png b/WinUIExportSample/Assets/LockScreenLogo.scale-200.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/LockScreenLogo.scale-200.png rename to WinUIExportSample/Assets/LockScreenLogo.scale-200.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/SplashScreen.scale-200.png b/WinUIExportSample/Assets/SplashScreen.scale-200.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/SplashScreen.scale-200.png rename to WinUIExportSample/Assets/SplashScreen.scale-200.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/Square150x150Logo.scale-200.png b/WinUIExportSample/Assets/Square150x150Logo.scale-200.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/Square150x150Logo.scale-200.png rename to WinUIExportSample/Assets/Square150x150Logo.scale-200.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/Square44x44Logo.scale-200.png b/WinUIExportSample/Assets/Square44x44Logo.scale-200.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/Square44x44Logo.scale-200.png rename to WinUIExportSample/Assets/Square44x44Logo.scale-200.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/Square44x44Logo.targetsize-24_altform-unplated.png b/WinUIExportSample/Assets/Square44x44Logo.targetsize-24_altform-unplated.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/Square44x44Logo.targetsize-24_altform-unplated.png rename to WinUIExportSample/Assets/Square44x44Logo.targetsize-24_altform-unplated.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/StoreLogo.png b/WinUIExportSample/Assets/StoreLogo.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/StoreLogo.png rename to WinUIExportSample/Assets/StoreLogo.png diff --git a/WinUISampleDemo/WinUISampleDemo/Assets/Wide310x150Logo.scale-200.png b/WinUIExportSample/Assets/Wide310x150Logo.scale-200.png similarity index 100% rename from WinUISampleDemo/WinUISampleDemo/Assets/Wide310x150Logo.scale-200.png rename to WinUIExportSample/Assets/Wide310x150Logo.scale-200.png diff --git a/WinUIExportSample/MainWindow.xaml b/WinUIExportSample/MainWindow.xaml new file mode 100644 index 0000000..9f9eefd --- /dev/null +++ b/WinUIExportSample/MainWindow.xaml @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + +