How to export all the Charts in a Panel?

This article describes how to export multiple UWP Charts contained within a panel like a Grid, as a single image in UWP applications.

Step 1: Define a layout panel, such as a Grid, and place multiple SfChart instances within it. Give the panel a unique name so it can be referenced in the code-behind for export.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" /> 
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid x:Name="chartPanel" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <syncfusion:SfChart>
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:CategoryAxis/>
            </syncfusion:SfChart.PrimaryAxis>

           <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.SecondaryAxis>

            <syncfusion:ColumnSeries ItemsSource="{Binding Data1}"      
                                     XBindingPath="Category"
                                     YBindingPath="Value" />
        </syncfusion:SfChart>

        <syncfusion:SfChart Grid.Row="1">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:CategoryAxis/>
            </syncfusion:SfChart.PrimaryAxis>

           <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
           </syncfusion:SfChart.SecondaryAxis>

           <syncfusion:ColumnSeries ItemsSource="{Binding Data2}"      
                                    XBindingPath="Category"
                                    YBindingPath="Value" />
        </syncfusion:SfChart>
    </Grid>

    <Button Content="Save Charts"
            Click="SaveImage_Click" />
</Grid>

Step 2: Create a button click event that calls a Save method. Implement the Save method that uses RenderTargetBitmap to render the entire UIElement (the chartPanel in this case) into a bitmap, then saves it to a file selected by the user via FileSavePicker.

private void SaveImage_Click(object sender, RoutedEventArgs e)
{
      // Call the Save method to export the chartPanel content.
      Save(chartPanel);
}
 
private async void Save(UIElement element)
{
      var renderTargetBitmap = new RenderTargetBitmap();
      await renderTargetBitmap.RenderAsync(element);
      var pixels = await renderTargetBitmap.GetPixelsAsync();
 
      // Initialize FileSavePicker with the image formats and its default file name
      var fileSavePicker = new FileSavePicker();
      fileSavePicker.FileTypeChoices.Add("BMP", new List<string>() { ".bmp" });
      fileSavePicker.FileTypeChoices.Add("GIF", new List<string>() { ".gif" });
      fileSavePicker.FileTypeChoices.Add("PNG", new List<string>() { ".png" });
      fileSavePicker.FileTypeChoices.Add("JPG", new List<string>() { ".jpg" });
      fileSavePicker.FileTypeChoices.Add("JPG-XR", new List<string>() { ".jxr" });
      fileSavePicker.FileTypeChoices.Add("TIFF", new List<string>() { ".tiff" });
      fileSavePicker.SuggestedFileName = "untitled";
 
      var file = await fileSavePicker.PickSaveFileAsync();
      if (file != null)
      {
           Guid encoderId = GetBitmapEncoderId(file.FileType);
           using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
           {
                var encoder = await BitmapEncoder.CreateAsync(encoderId, stream);
                encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)renderTargetBitmap.PixelWidth,
                        (uint)renderTargetBitmap.PixelHeight, 96.0, 96.0, pixels.ToArray());
                await encoder.FlushAsync();
           }
     }
}
 
private Guid GetBitmapEncoderId(string type)
{
       switch (type)
       {
                case ".bmp":
                    return BitmapEncoder.BmpEncoderId;
                case ".jpg":
                case ".jpeg":
                    return BitmapEncoder.JpegEncoderId;
                case ".jxr":
                    return BitmapEncoder.JpegXREncoderId;
                case ".png":
                    return BitmapEncoder.PngEncoderId;
                case ".tif":
                case ".tiff":
                    return BitmapEncoder.TiffEncoderId;
       }
       return BitmapEncoder.BmpEncoderId;
}

Conclusion

I hope this article helped you learn how to export multiple charts from a panel effectively.

You can refer to our UWP Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our UWP Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms 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 UWP Charts and other UWP components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!