How to export chart as PowerPoint Presentation in Blazor?

This article explains how to export chart as PowerPoint Presentation in Blazor.

Exporting chart as PPT

Currently Blazor Charts does not provide a direct built-in API to export charts in PowerPoint(.pptx) format. This functionality can be achieved by combining the chart export feature with Syncfusion.Presentation library.

Initially, the chart is exported as an image that is Base64 PNG using the built in ExportAsync method. In OnExportComplete event the Base64 string will be captured. Then this Base64 string can be converted into the byte array and load it as a stream. This chart image will be inserted into PowerPoint slide using Syncfusion.Presentation library. Finally you can save and download the PPTX file from Blazor Server. In this sample, the PPT file is downloaded to the wwwroot folder located inside the project directory.

Code Example

The following code example demonstrates how to export chart as PPT.

@using Syncfusion.Blazor.Charts
@using Syncfusion.Presentation
@inject IWebHostEnvironment Env

<SfChart @ref="ChartObj" Title="Sales Comparison By Category">
   <ChartEvents OnExportComplete="ExportComplete"></ChartEvents>
   <ChartPrimaryXAxis Title="Product Category" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
   <ChartPrimaryYAxis Title="Sales"></ChartPrimaryYAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ChartData1" XName="X" YName="Y1" Type="ChartSeriesType.Column" Name="Online Sales">
           <ChartMarker>
               <ChartDataLabel Visible="true" Position="LabelPosition.Outer"></ChartDataLabel>
           </ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@ChartData1" XName="X" YName="Y2" Type="ChartSeriesType.Column" Name="Retail Sales">
           <ChartMarker>
               <ChartDataLabel Visible="true" Position="LabelPosition.Outer"></ChartDataLabel>
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

<button @onclick="ExportChart">Download PPT</button>

@code {
   private SfChart ChartObj;
   private List<ChartData> ChartData1 = new()
   {
       new ChartData("Electronics", 12000, 10000),
       new ChartData("Furniture", 8500, 9000),
       new ChartData("Clothing", 15000, 14000),
       new ChartData("Books", 5000, 6000),
       new ChartData("Groceries", 11000, 10500),
   };

   public class ChartData
   {
       public string X { get; set; }
       public double Y1 { get; set; }
       public double Y2 { get; set; }
       public ChartData(string x, double y1, double y2) { X = x; Y1 = y1; Y2 = y2; }
   }
   public string base64 { get; set; }
   public bool isChartExported { get; set; }
   private async void ExportComplete(ExportEventArgs exportEventArgs)
   {
       base64 = exportEventArgs.Base64;
       isChartExported = true;
       await ExportToPPT();
   }
   private async Task ExportChart()
   {
       isChartExported = false;
       base64 = null;
       await ChartObj.ExportAsync(ExportType.PNG, "Charts", null, false, true);

   }
   private async Task ExportToPPT()
   {
       // Step 1: Export chart to PNG (as base64)

       if (isChartExported)
       {

           byte[] chartBytes = Convert.FromBase64String(base64);

           // Step 2: Create PPT with Syncfusion.Presentation
           using IPresentation pptx = Presentation.Create();
           ISlide slide = pptx.Slides.Add(SlideLayoutType.Blank);

           // Add chart image to PPT
           using MemoryStream ms = new(chartBytes);
           IPicture picture = slide.Pictures.AddPicture(ms, 20, 20, 900, 400);

           // Step 3: Save PPT
           using MemoryStream outputStream = new();
           pptx.Save(outputStream);
           outputStream.Position = 0;

           // Step 4: Download PPT
           var fileName = "ChartExport.pptx";
           using var fs = new FileStream(Path.Combine(Env.WebRootPath, fileName), FileMode.Create, FileAccess.Write);
           outputStream.CopyTo(fs);

           // Optionally trigger browser download if using Blazor WebAssembly
       }
   }
}

Output

Sample

Sample for PPT Export

Conclusion

I hope you enjoyed learning about how to export chart as PowerPoint Presentation in Blazor.

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

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Chart and other Blazor components.

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