How to Export Chart as Image in WinUI Chart (SfCartesianChart)?

This article provides a detailed walkthrough on how to export a WinUI Cartesian Chart as an image. You can export the chart view in your desired file format, with supported formats being JPEG and PNG.

Step 1: Initialize SfCartesianChart:

Set up the SfCartesianChart following the Syncfusion WinUI Cartesian Chart documentation.

<StackPanel Orientation="Vertical">
<chart:SfCartesianChart x:Name="Chart" Background="White" IsTransposed="True" 
                        Header="Daily Water Consumption Tracking">
    ....
    <chart:ColumnSeries ItemsSource="{Binding DailyWaterIntake}"
                        XBindingPath="Day" 
                        YBindingPath="Liters"
                        ShowDataLabels="True">
        <chart:ColumnSeries.DataLabelSettings>
            <chart:CartesianDataLabelSettings Position="Inner"/>
        </chart:ColumnSeries.DataLabelSettings>
    </chart:ColumnSeries>
</chart:SfCartesianChart>

    <Button x:Name="button" Content="Export as Image" Click="Button_Click" />
</StackPanel> 

Step 2: Export the Chart as an Image:

private async void Button_Click(object sender, RoutedEventArgs e)
 {
     await SaveAsImageAsync(Chart, "chart.png");
 }

 private async Task SaveAsImageAsync(SfCartesianChart chart, string fileName)
 {
     if (chart == null)
         return;

     // Render the chart to a RenderTargetBitmap
     var renderTargetBitmap = new RenderTargetBitmap();
     await renderTargetBitmap.RenderAsync(chart);

     // Get pixel data
     var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
     var pixels = pixelBuffer.ToArray();

     // Determine file format and encoder
     string extension = Path.GetExtension(fileName)?.ToLower() ?? ".png";
     var encoderId = extension == ".jpg" || extension == ".jpeg"
         ? BitmapEncoder.JpegEncoderId
         : BitmapEncoder.PngEncoderId;

     // Choose image save path
     var folder = await Windows.Storage.StorageFolder.GetFolderFromPathAsync(@"D:\");
     var picturesFolder = await folder.CreateFileAsync( fileName, Windows.Storage.CreationCollisionOption.ReplaceExisting);

     // Encode the image
     using (var stream = await picturesFolder.OpenAsync(FileAccessMode.ReadWrite))
     {
         var encoder = await BitmapEncoder.CreateAsync(encoderId, stream);

         encoder.SetPixelData(
             BitmapPixelFormat.Bgra8,
             BitmapAlphaMode.Premultiplied,
            (uint)renderTargetBitmap.PixelWidth,
            (uint)renderTargetBitmap.PixelHeight,
             96.0, // DPI X
             96.0, // DPI Y
             pixels);

         await encoder.FlushAsync();
     }
 } 

Note: By default, the chart background is transparent. When using JPEG format, RenderTargetBitmap converts the transparent background to black. To resolve this, set the chart’s BackgroundColor to white or any preferred color.

Chart output

Exported PNG Chart Image

Github

For a more detailed implementation and to view the sample demo, refer to the Export Chart View as Image GitHub sample.

Conclusion

I hope you enjoyed learning about how to Export Chart as Image in WinUI Chart.

You can refer to our WinUI charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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, Display-Trac, or feedback portal. We are always happy to assist you!