Free Trial Buy
    Your search did not match any results.
    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 ]
]

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodeSandBox
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.chartOptions = { rotated: true, title: 'Olympic Gold Medals in 2008', dataSource: goldMedals, series: { color: '#f3c40b', argumentField: 'country', valueField: 'medals', type: 'bar', label: { visible: true, }, }, legend: { visible: false, }, }; $scope.pieOptions = { palette: 'Harmony Light', dataSource: allMedals, title: 'Total Olympic Medals\n in 2008', series: [{ argumentField: 'country', valueField: 'medals', label: { visible: true, connector: { visible: true, }, }, }], }; $scope.buttonOptions = { icon: 'export', text: 'Export', type: 'default', width: 145, onClick() { const chartInstance = $('#chart').dxChart('instance'); const pieChartInstance = $('#pieChart').dxPieChart('instance'); DevExpress.viz.exportWidgets([[chartInstance, pieChartInstance]], { fileName: 'chart', format: 'PNG', }); }, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="chart-demo"> <div class="charts"> <div id="chart" dx-chart="chartOptions"></div> <div id="pieChart" dx-pie-chart="pieOptions"></div> </div> <div class="controls-pane"> <div dx-button="buttonOptions"></div> </div> </div> </div> </body> </html>
    #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; }
    const allMedals = [{ country: 'USA', medals: 110, }, { country: 'China', medals: 100, }, { country: 'Russia', medals: 71, }, { country: 'UK', medals: 47, }, { country: 'Australia', medals: 46, }, { country: 'Germany', medals: 41, }, { country: 'France', medals: 41, }, { country: 'South Korea', medals: 31, }]; const goldMedals = [{ country: 'China', medals: 51, }, { country: 'USA', medals: 36, }, { country: 'Russia', medals: 22, }, { country: 'UK', medals: 19, }, { country: 'Germany', medals: 16, }, { country: 'Australia', medals: 14, }, { country: 'South Korea', medals: 13, }, { country: 'France', medals: 7, }];