|
1 | | -# How-to-Export-Chart-as-Image-in-WinUI-Chart |
2 | | -How to Export Chart as Image in WinUI Chart |
| 1 | +# How to Export Chart as Image in WinUI Chart |
| 2 | +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.** |
| 3 | + |
| 4 | +### Initialize SfCartesianChart: |
| 5 | + |
| 6 | +Set up the **SfCartesianChart** following the [ Syncfusion WinUI Cartesian Chart documentation.](https://help.syncfusion.com/winui/cartesian-charts/getting-started) |
| 7 | + ```xml |
| 8 | +<StackPanel Orientation="Vertical"> |
| 9 | + <chart:SfCartesianChart x:Name="Chart" Background="White" IsTransposed="True" |
| 10 | + Header="Daily Water Consumption Tracking"> |
| 11 | + .... |
| 12 | + <chart:ColumnSeries ItemsSource="{Binding DailyWaterIntake}" |
| 13 | + XBindingPath="Day" |
| 14 | + YBindingPath="Liters" |
| 15 | + ShowDataLabels="True"> |
| 16 | + <chart:ColumnSeries.DataLabelSettings> |
| 17 | + <chart:CartesianDataLabelSettings Position="Inner"/> |
| 18 | + </chart:ColumnSeries.DataLabelSettings> |
| 19 | + </chart:ColumnSeries> |
| 20 | + </chart:SfCartesianChart> |
| 21 | + |
| 22 | + <Button x:Name="button" Content="Export as Image" Click="Button_Click" /> |
| 23 | + </StackPanel> |
| 24 | + ``` |
| 25 | + |
| 26 | +### Export the Chart as an Image: |
| 27 | + |
| 28 | + ```csharp |
| 29 | +private async void Button_Click(object sender, RoutedEventArgs e) |
| 30 | + { |
| 31 | + await SaveAsImageAsync(Chart, "chart.png"); |
| 32 | + } |
| 33 | + |
| 34 | + private async Task SaveAsImageAsync(SfCartesianChart chart, string fileName) |
| 35 | + { |
| 36 | + if (chart == null) |
| 37 | + return; |
| 38 | + |
| 39 | + // Render the chart to a RenderTargetBitmap |
| 40 | + var renderTargetBitmap = new RenderTargetBitmap(); |
| 41 | + await renderTargetBitmap.RenderAsync(chart); |
| 42 | + |
| 43 | + // Get pixel data |
| 44 | + var pixelBuffer = await renderTargetBitmap.GetPixelsAsync(); |
| 45 | + var pixels = pixelBuffer.ToArray(); |
| 46 | + |
| 47 | + // Determine file format and encoder |
| 48 | + string extension = Path.GetExtension(fileName)?.ToLower() ?? ".png"; |
| 49 | + var encoderId = extension == ".jpg" || extension == ".jpeg" |
| 50 | + ? BitmapEncoder.JpegEncoderId |
| 51 | + : BitmapEncoder.PngEncoderId; |
| 52 | + |
| 53 | + // Choose image save path |
| 54 | + var folder = await Windows.Storage.StorageFolder.GetFolderFromPathAsync(@"D:\"); |
| 55 | + var picturesFolder = await folder.CreateFileAsync( fileName, Windows.Storage.CreationCollisionOption.ReplaceExisting); |
| 56 | + |
| 57 | + // Encode the image |
| 58 | + using (var stream = await picturesFolder.OpenAsync(FileAccessMode.ReadWrite)) |
| 59 | + { |
| 60 | + var encoder = await BitmapEncoder.CreateAsync(encoderId, stream); |
| 61 | + |
| 62 | + encoder.SetPixelData( |
| 63 | + BitmapPixelFormat.Bgra8, |
| 64 | + BitmapAlphaMode.Premultiplied, |
| 65 | + (uint)renderTargetBitmap.PixelWidth, |
| 66 | + (uint)renderTargetBitmap.PixelHeight, |
| 67 | + 96.0, // DPI X |
| 68 | + 96.0, // DPI Y |
| 69 | + pixels); |
| 70 | + |
| 71 | + await encoder.FlushAsync(); |
| 72 | + } |
| 73 | + } |
| 74 | + ``` |
| 75 | + |
| 76 | +**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. |
| 77 | + |
| 78 | +**Chart output** |
| 79 | + |
| 80 | +  |
| 81 | + |
| 82 | +**Exported Chart Image** |
| 83 | + |
| 84 | +  |
| 85 | + |
| 86 | +### KB link |
| 87 | +For a more detailed, refer to the [Export Chart View as Image KB.](https://support.syncfusion.com/agent/kb/18644) |
| 88 | + |
0 commit comments