Articles in this section
Category / Section

How to export all the charts in the panel properly?

1 min read


This article describes how to export more than one chart in a panel when more than one chart is added to a panel such as grid and need to view all the charts in single image.



By using the RenderTargetBitmap property, we can export multiple charts as shown in the following code example.



<Grid x:Name="chartPanel" Background="White">
            <syncfusion:SfChart Grid.Column="1">



     private void SaveImage_Click(object sender, RoutedEventArgs e)
            //To export panel which contains charts.
        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;


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment