If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useRef } from 'react';
import Chart, {
Series,
Legend,
Tooltip,
ArgumentAxis,
Label,
ValueAxis,
VisualRange,
} from 'devextreme-react/chart';
import Button from 'devextreme-react/button';
import { mountains } from './data.ts';
function customizeTooltipText(pointInfo) {
return {
text: `<span class='title'>${pointInfo.argumentText}</span><br /> <br />System: ${pointInfo.point.data.system}<br />Height: ${pointInfo.valueText} m`,
};
}
function customizeLabelText({ value }) {
return `${value} m`;
}
function App() {
const chartRef = useRef(null);
const printChart = useCallback(() => {
chartRef.current.instance().print();
}, []);
const exportChart = useCallback(() => {
chartRef.current.instance().exportTo('Example', 'png');
}, []);
return (
<React.Fragment>
<Chart
id="chart"
ref={chartRef}
dataSource={mountains}
title="The Highest Mountains"
>
<Series argumentField="name" valueField="height" type="bar" color="#E55253" />
<ArgumentAxis visible={true} />
<ValueAxis>
<VisualRange startValue={8000} />
<Label customizeText={customizeLabelText} />
</ValueAxis>
<Tooltip enabled={true} customizeTooltip={customizeTooltipText} />
<Legend visible={false} />
</Chart>
<div id="buttonGroup">
<Button icon="print" text="Print" onClick={printChart} />
<Button icon="export" text="Export" onClick={exportChart} />
</div>
</React.Fragment>
);
}
export default App;
xxxxxxxxxx
import React, { useCallback, useRef } from 'react';
import Chart, {
Series,
Legend,
Tooltip,
ArgumentAxis,
Label,
ValueAxis,
VisualRange,
} from 'devextreme-react/chart';
import Button from 'devextreme-react/button';
import { mountains } from './data.js';
function customizeTooltipText(pointInfo) {
return {
text: `<span class='title'>${pointInfo.argumentText}</span><br /> <br />System: ${pointInfo.point.data.system}<br />Height: ${pointInfo.valueText} m`,
};
}
function customizeLabelText({ value }) {
return `${value} m`;
}
function App() {
const chartRef = useRef(null);
const printChart = useCallback(() => {
chartRef.current.instance().print();
}, []);
const exportChart = useCallback(() => {
chartRef.current.instance().exportTo('Example', 'png');
}, []);
return (
<React.Fragment>
<Chart
id="chart"
ref={chartRef}
dataSource={mountains}
title="The Highest Mountains"
>
<Series
argumentField="name"
valueField="height"
type="bar"
color="#E55253"
/>
<ArgumentAxis visible={true} />
<ValueAxis>
<VisualRange startValue={8000} />
<Label customizeText={customizeLabelText} />
</ValueAxis>
<Tooltip
enabled={true}
customizeTooltip={customizeTooltipText}
/>
<Legend visible={false} />
</Chart>
<div id="buttonGroup">
<Button
icon="print"
text="Print"
onClick={printChart}
/>
<Button
icon="export"
text="Export"
onClick={exportChart}
/>
</div>
</React.Fragment>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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',
}];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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/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',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'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.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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',
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#chart {
height: 440px;
margin-bottom: 30px;
}
#buttonGroup {
text-align: center;
margin-bottom: 20px;
}
#buttonGroup > .dx-button {
margin: 0 20px;
}
.title {
font-size: 15px;
font-weight: 500;
}
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.
Need to create printable documents simply? Try our .NET-based DevExpress Reports: they ship with an intuitive Visual Studio Report Designer, Web Report Designer for end-user ad-hoc reporting, and a rich set of report controls, including cross tabs and charts.
You can generate a variety of report types — from simple mail-merge, table, and vertical reports to master-detail (hierarchical) and cross-tab reports, print or export them to PDF, Excel, and other formats.
Develop using VS Code? Leverage the capabilities of a brand new VS Code Report Designer extension to create and edit reports/documents on any platform, be it Windows, macOS, or Linux.