Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartBase.ExportAsync(String, ChartExportFormat, Nullable<Int32>, Nullable<Color>) Method

Exports the chart to a file in a specified format with the given margin and background.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public Task ExportAsync(
    string fileName,
    ChartExportFormat format,
    int? margin = null,
    Color? backgroundColor = null
)

#Parameters

Name Type Description
fileName String

The name of a file that stores the chart.

format ChartExportFormat

The format to which the chart is exported.

#Optional Parameters

Name Type Default Description
margin Nullable<Int32> null

The chart margin value.

backgroundColor Nullable<Color> null

The background color.

#Returns

Type Description
Task

A structure that stores an awaitable result of an asynchronous operation.

#Remarks

Warning

The DXChart and DXPieChart components can export data in different formats only if the browser supports these formats. Otherwise, the DXChart and DXPieChart components export data to PNG regardless of which option you select in the menu.

The following example encodes a chart in different formats to a Base64 object. A user can select the format from the Export To drop-down list in the menu at the top.

How to export chart - example result

@page "/"
@using System.Drawing
<DxMenu ItemClick="Export">
    <Items>
        <DxMenuItem Text="Export To:">
            <Items>
                <DxMenuItem Text="PNG"/>
                <DxMenuItem Text="JPEG"/>
                <DxMenuItem Text="PDF"/>
                <DxMenuItem Text="GIF"/>
            </Items>
        </DxMenuItem>
    </Items>
</DxMenu>
<DxChart @ref="@chart"
         Data="@dataPoints"
         LabelOverlap="ChartLabelOverlap.Hide"
         Width=700 Height=400>
    <DxChartBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                      ValueField="@((DataPoint i) => i.Value1)"
                      Name="Series 1"/>
    <DxChartBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                      ValueField="@((DataPoint i) => i.Value2)"
                      Name="Series 2"/>
    <DxChartBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                      ValueField="@((DataPoint i) => i.Value3)"
                      Name="Series 3"/>
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxChart>

@code {
    DxChartBase chart;
    private DataPoint[] dataPoints;
    protected override void OnInitialized() {
        dataPoints = GetDataPoints();
    }
    void Export(MenuItemClickEventArgs args) {
        ChartExportFormat format = ChartExportFormat.Png;
        Color backgroundColor = Color.White;
        int margin = 4;
        if (Enum.TryParse<ChartExportFormat>(args.ItemInfo.Text, true, out format))
            chart?.ExportAsync("Exported_Chart", format, margin, backgroundColor);
    }
    public class DataPoint {
        public string Arg { get; set; }
        public int Value1 { get; set; }
        public int Value2 => (int)(Value1 * 1.2);
        public double Value3 { get; set; }
    }
    public DataPoint[] GetDataPoints() {
        DataPoint[] dataPoints = new DataPoint[] {
            new DataPoint() { Arg = "I", Value1 = 26, Value3 = 23},
            new DataPoint() { Arg = "II", Value1 = 24, Value3 = 23},
            new DataPoint() { Arg = "III", Value1 = 25, Value3 = 24},
        };
        return dataPoints;
    }
}
See Also