How to export chart in required location using Blazor Charts?

This article explains how to export a chart to a required location.

Exporting a Chart to a Required Location

Blazor Charts provides an option to export the chart to a required location using the ExportComplete event.

This can be achieved by specifying the AllowDownload parameter as false and the IsBase64 parameter as true while triggering the ExportAsync method on button click. Then, using the ExportComplete event, you can obtain the Base64 string from the event argument. Then, define the path where the image will be saved and combine it with the desired filename. By opening a FileStream to create a new file at the specified path and using a BinaryWriter, you can convert the Base64 string to a byte array and write it to the file.

The code example below demonstrates how to export a chart to a required location.

Index.razor:

@using Syncfusion.Blazor.Charts;
<div id="button">
   <button onclick="@ExportChart"> Export </button>
</div>
<div id="chart">
   <SfChart @ref="@chartInstance">      
       <ChartEvents OnExportComplete="ExportComplete"></ChartEvents>
   </SfChart>
</div>
@code {
   private SfChart chartInstance;
   public string FileName { get; set; } = "Charts";
   public string Format { get; set; } = "{value} GW";
   public LabelIntersectAction Label { get; set; } = LabelIntersectAction.Trim;

   public List<ExportData> ChartPoints { get; set; } = new List<ExportData>
   {
       new ExportData { Country="India", GigaWatts = 35.5 },
       new ExportData { Country="China", GigaWatts = 18.3 },
       //...
   };

   public async Task ExportChart(MouseEventArgs args)
   {
       await chartInstance.ExportAsync(ExportType.PNG, FileName, null, false, true);
   }

   public class ExportData
   {
       public string Country { get; set; }
       public double GigaWatts { get; set; }
   }

   public void ExportComplete(ExportEventArgs exportEventArgs)
   {
       string base64 = exportEventArgs.Base64;
       string path = @"D:\Blazor Samples\"; // To specify the path where you want to save the chart image in the application.
       var filepath = path + "Charts.png"; // To specify the chart file name
       using (FileStream fs = new FileStream(filepath, FileMode.Create))
       {
           using (BinaryWriter bw = new BinaryWriter(fs))
           {
               string convert = base64.Replace("data:image/png;base64,", String.Empty);
               byte[] data = Convert.FromBase64String(convert);
               bw.Write(data);
               bw.Close();
           }
       }
   }
} 

The following screenshot illustrates the output of the code snippet:

Output:

Sample for Exporting a Chart to a Required Path.

Conclusion:

We hope you enjoyed learning how to export a chart to a required location in Blazor Chart.

You can refer to our Blazor Chart feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

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

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