# Export Chart to Image

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



Blazor FlexChart allows you to export the chart to multiple image formats. The supported formats are PNG, JPEG, and SVG.

You can use the [SaveImage](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.FlexChartBase.SaveImage.html) method to export a FlexChart to an image format. The **SaveImage** method takes parameter for image format and saves the chart as an image using the specified format using the [ImageFormat](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Chart/C1.Blazor.Chart.ImageFormat.html) enumeration. This enumeration allows you to export the chart to PNG, JPEG, or SVG format.

The following code shows the implementation of exporting a FlexChart to an image (with PNG format) on a button click.

```razor
@using C1.Blazor.Core
@using C1.Chart;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;
<FlexChart @ref="chart" Class="chart" ChartType="ChartType.Scatter" 
        HeaderContent="Phase II Test Results" HeaderStyle="font-size:24px"
        BindingX="X" Binding="Y">
      <SeriesCollection>
        <Series Name="Experiment 1" ItemsSource="Data1" />
        <Series Name="Experiment 2" ItemsSource="Data2" />
        <Series Name="Experiment 3" ItemsSource="Data3" />
    </SeriesCollection>
</FlexChart>
    <Title>Export To Image</Title>
    <Settings>Save as:
        <button @onclick="SavePng">PNG</button>
    </Settings>
@code {
    FlexChart chart;
    List<C1Point> Data1 { get; set; }
    List<C1Point> Data2 { get; set; }
    List<C1Point> Data3 { get; set; }
    protected override void OnInitialized()
    {
        Data1 = DataSource.GetData(50,0,3);
        Data2 = DataSource.GetData(40,100,12);
        Data3 = DataSource.GetData(30,-100,24);
    }
    void SavePng()
    {
        chart.SaveImage("chart", ImageFormat.Png);
    }
    public class DataSource
    {
        private static Random rnd = new Random();
        public static List<C1Point> GetData(int cnt, double a, double b)
        {
            var data = new List<C1Point>();
            var  x = -2.5 * cnt;
            for (var i = 0; i < cnt; i++)
            {
                var val = rnd.NextDouble() * cnt - cnt / 2;
                data.Add(new C1Point( x, a + x * (b + val) + val));
                x += .5 + rnd.NextDouble() * 10;
            }
            return data;
        }
    }
}
```