Charts - Export Several Charts

The DevExpress.viz.exportWidgets(widgetInstances, options) method allows you to export several charts to a single image or document.

The widgetInstances parameter accepts an array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div id="chart-demo"> <div class="charts"> @(Html.DevExtreme().Chart() .ID("chart") .DataSource(new[] { new { country = "China", medals = 51 }, new { country = "USA", medals = 36 }, new { country = "Russia", medals = 22 }, new { country = "UK", medals = 19 }, new { country = "Germany", medals = 16 }, new { country = "Australia", medals = 14 }, new { country = "South Korea", medals = 13 }, new { country = "France", medals = 7 } }) .Series(s => s.Add() .ArgumentField("country") .ValueField("medals") .Type(SeriesType.Bar) .Color("#f3c40b") .Label(l => l .Visible(true) ) ) .Title("Olympic Gold Medals in 2008") .Rotated(true) .Legend(l => l.Visible(false)) ) @(Html.DevExtreme().PieChart() .ID("pieChart") .DataSource(new[] { new { country = "USA", medals = 110 }, new { country = "China", medals = 100 }, new { country = "Russia", medals = 71 }, new { country = "UK", medals = 47 }, new { country = "Australia", medals = 46 }, new { country = "Germany", medals = 41 }, new { country = "France", medals = 41 }, new { country = "South Korea", medals = 31 } }) .Series(s => s.Add() .ArgumentField("country") .ValueField("medals") .Label(l => l .Visible(true) .Connector(c => c .Visible(true) ) ) ) .Title("Total Olympic Medals\n in 2008") .Palette(VizPalette.HarmonyLight) ) </div> <div class="controls-pane"> @(Html.DevExtreme().Button() .Icon("export") .Text("Export") .OnClick("exportChart") .Type(ButtonType.Default) .Width(145) ) </div> </div> <script> function exportChart() { var chartInstance = $("#chart").dxChart("instance"), pieChartInstance = $("#pieChart").dxPieChart("instance"); DevExpress.viz.exportWidgets([[chartInstance, pieChartInstance]], { fileName: "chart", format: 'PNG' }); } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult ExportSeveralCharts() { return View(); } } }

#chart-demo { height: 460px; } .charts { width: 820px; margin: 0 auto; height: 374px; margin-bottom: 40px; font-size: 0; } #chart, #pieChart{ width: 395px; height: 100%; display: inline-block; vertical-align: top; } #chart { margin-right: 30px; } .controls-pane { text-align: center; }

Each nested array contains component instances that should be in the same row in the exported document. In this demo, chartInstance and pieChartInstance occupy the only row in the document.

The options parameter accepts an object whose fields allow you to configure export properties. In this demo, we specify the fileName and format. Refer to the method description for information on other available fields.