This feature allows a user to print a chart displayed by the control or export it to one of the supported document formats. The control displays an "Exporting/Printing" button when exporting is enabled, which invokes a drop-down menu that lists exporting and printing commands. The following document formats are supported: PNG, PDF, JPEG, SVG and GIF.
Set the SettingsExport.Enabled property to true to display the Export button. The SettingsExport.PrintingEnabled property allows you to specify whether or not the Export menu should contain the Print item.
You can specify the name of the exported file using the SettingsExport.FileName property.
<dx:BootstrapPieChart runat="server" DataSourceID="ConfectionsSalesDataSource" Type="Doughnut" TitleSettings-Text="Confections Sales" InnerRadius="0.3">
<SettingsExport Enabled="true" Formats="JPEG, PNG, SVG, GIF, PDF" FileName="confections_sales" />
<SeriesCollection>
<dx:BootstrapPieChartSeries ArgumentField="ProductName" ValueField="ProductSales">
<Label Visible="true">
<Format Type="Currency" />
</Label>
</dx:BootstrapPieChartSeries>
</SeriesCollection>
</dx:BootstrapPieChart>
Export and Printing API
This demo illustrates the ExportTo and Print client API methods used to initiate exporting and printing from code using the Print and Export buttons above the Chart. Clicking the Print button invokes the browser's Print dialog and clicking the Export button saves the chart as a PNG file to your local storage.
Relative Masses of the Heaviest Solar System Objects
<div>
<div class="btn-group" role="group" aria-label="Printing and Export">
<dx:BootstrapButton runat="server" Text="Print" AutoPostBack="false">
<CssClasses Icon="fa fa-print" />
<ClientSideEvents Click="onPritClick" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Export" AutoPostBack="false">
<CssClasses Icon="far fa-file-image" />
<ClientSideEvents Click="onExportClick" />
</dx:BootstrapButton>
</div>
</div>
<br />
<dx:BootstrapChart runat="server" ClientInstanceName="massChart" DataSourceUrl="~/jsondata/solarsystem.json"
TitleSettings-Text="Relative Masses of the Heaviest Solar System Objects" OnClientCustomizePoint="customizePoint">
<SeriesCollection>
<dx:BootstrapChartScatterSeries ArgumentField="name" ValueField="mass" TagField="type">
<Point Size="20" />
</dx:BootstrapChartScatterSeries>
</SeriesCollection>
<ArgumentAxis Visible="true">
<Label OverlappingBehavior="Rotate" RotationAngle="30" />
</ArgumentAxis>
<ValueAxisCollection>
<dx:BootstrapChartValueAxis Type="Logarithmic" TitleSettings-Text="Mass Relative to the Earth" Visible="true" />
</ValueAxisCollection>
<SettingsCommonAxis GridVisible="true" />
<SettingsLegend Visible="false" />
<SettingsToolTip Enabled="true" />
</dx:BootstrapChart>
function customizePoint() {
var color, hoverStyle;
switch (this.tag) {
case "Star":
color = "red";
hoverStyle = { border: { color: "red" } };
break;
case "Satellite":
color = "gray";
hoverStyle = { border: { color: "gray" } };
break;
}
return { color: color, hoverStyle: hoverStyle };
}
function onExportClick() {
massChart.ExportTo("png", "mass_chart");
}
function onPritClick() {
massChart.Print();
}