Export and Printing API
You can use two approaches to print and export the Chart: call methods, or add a built-in button with drop-down options. The supported export formats are PNG, PDF, JPEG, SVG, and GIF.
Use Methods to Export and Print Chart
Use the exportTo(fileName, format) and print() methods to export and print the Chart. In this demo, two buttons below the chart implement the print and export functionality. A click on the "Print" button calls the Print dialog window, and a click on the "Export" button saves a file with the component to your local storage. You can specify the file name and format in the exportTo(fileName, format) method.
Export and Print Chart with a Built-in Menu
To automatically create a button with export and print options, use the export object and set its enabled property to true. If you want to disable printing, set the printingEnabled property to false.
Set the formats property to specify an array of available export formats. The fileName property allows you to specify the name of the exported file.
You can see how this approach works in the following demo: JSON Data.
Handle Export Events
Use the following events to handle export:
-
onExporting
Occurs before the Chart export. -
onExported
Occurs after the Chart export.
en.wikipedia.org
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div>
<DxChart
id="chart"
ref="chart"
:data-source="mountains"
title="The Highest Mountains"
>
<DxSeries
type="bar"
argument-field="name"
value-field="height"
color="#E55253"
/>
<DxArgumentAxis :visible="true"/>
<DxValueAxis>
<DxVisualRange :start-value="8000"/>
<DxLabel :customize-text="customizeLabelText"/>
</DxValueAxis>
<DxTooltip
:enabled="true"
:customize-tooltip="customizeTooltipText"
/>
<DxLegend :visible="false"/>
</DxChart>
<div id="buttonGroup">
<DxButton
icon="print"
text="Print"
@click="printChart"
/>
<DxButton
icon="export"
text="Export"
@click="exportChart"
/>
</div>
</div>
</template>
<script>
import DxChart, {
DxSeries,
DxLegend,
DxTooltip,
DxArgumentAxis,
DxLabel,
DxValueAxis,
DxVisualRange,
} from 'devextreme-vue/chart';
import DxButton from 'devextreme-vue/button';
import { mountains } from './data.js';
export default {
components: {
DxChart,
DxSeries,
DxLegend,
DxTooltip,
DxArgumentAxis,
DxLabel,
DxValueAxis,
DxVisualRange,
DxButton,
},
data() {
return {
mountains,
};
},
methods: {
printChart() {
this.$refs.chart.instance.print();
},
exportChart() {
this.$refs.chart.instance.exportTo('Example', 'png');
},
customizeTooltipText(pointInfo) {
return {
text: `<span class='title'>${pointInfo.argumentText
}</span><br /> <br />System: ${pointInfo.point.data.system
}<br />Height: ${pointInfo.valueText} m`,
};
},
customizeLabelText({ value }) {
return `${value} m`;
},
},
};
</script>
<style>
#chart {
height: 440px;
margin-bottom: 30px;
}
#buttonGroup {
text-align: center;
margin-bottom: 20px;
}
#buttonGroup > .dx-button {
margin: 0 22px;
}
.title {
font-size: 15px;
font-weight: 500;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
export const mountains = [{
name: 'Everest',
height: 8848,
system: 'Mahalangur Himalaya',
}, {
name: 'Godwin Austen',
height: 8611,
system: 'Baltoro Karakoram',
}, {
name: 'Kangchenjunga',
height: 8586,
system: 'Kangchenjunga Himalaya',
}, {
name: 'Lhotse',
height: 8516,
system: 'Mahalangur Himalaya',
}, {
name: 'Makalu',
height: 8485,
system: 'Mahalangur Himalaya',
}, {
name: 'Cho Oyu',
height: 8188,
system: 'Mahalangur Himalaya',
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);