Export

The Gauges supports image, PDF, and SVG export by utilizing the Kendo UI Drawing library.

As a result, you can send a Base64-encoded file to a service or save it on the client machine by using the File Saver package.

The Gauges support the following export options:

Exporting to Images

The exportImage method from the Drawing library takes a visual element and produces an image file. To get the Gauge visual, use the exportVisual method which returns a Promise that is resolved with the Gauge visual.

The following example demonstrates how to save the Gauges as a PNG image by using the exportImage method.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
    ArcGauge,
    LinearGauge,
    RadialGauge
} from '@progress/kendo-react-gauges';
import { Button } from '@progress/kendo-react-buttons';

import { exportImage } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class GaugeExportComponent extends React.Component {
    _arcGauge;
    _linearGauge;
    _radialGauge;

    exportGaugeVisual = (gauge, callback) => {
        gauge.exportVisual().then(gaugeVisual => callback(gaugeVisual));
    }

    exportGauge = (gauge) => {
        this.exportGaugeVisual(gauge, (gaugeVisual) =>
            exportImage(gaugeVisual).then(dataURI => saveAs(dataURI, 'gauge.png')));
    }

    exportLinearGauge = () => {
        this.exportGauge(this._linearGauge);
    }

    exportRadialGauge = () => {
        this.exportGauge(this._radialGauge);
    }

    exportArcGauge = () => {
        this.exportGauge(this._arcGauge);
    }

    arcCenterRenderer = (value, color) => {
        return (<div style={{ color: color }}>{value}%</div>);
    }

    render() {
        const value = 30;
        const pointer = {
            value: value
        };

        const gaugeStyles = {
            display: 'block'
        };

        return (
            <div>
                <h5>Export to PNG</h5>
                <div className="example-config">
                    <Button onClick={this.exportLinearGauge}>
                        Export Linear Gauge
                    </Button>
                    <Button onClick={this.exportRadialGauge}>
                        Export Radial Gauge
                    </Button>
                    <Button onClick={this.exportArcGauge}>
                        Export Arc Gauge
                    </Button>
                </div>
                <div className="row">
                    <div className="col-sm-12 col-md-2">
                        <LinearGauge
                            ref={(cmp) => this._linearGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <RadialGauge
                            ref={(cmp) => this._radialGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <ArcGauge
                            ref={(cmp) => this._arcGauge = cmp}
                            arcCenterRender={this.arcCenterRenderer}
                            style={gaugeStyles}
                            value={value}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <GaugeExportComponent />,
    document.querySelector('my-app')
);

Exporting to PDF

The exportPDF method from the Drawing library takes a visual element and produces a PDF file. To get the Gauge visual, use the exportVisual method which returns a Promise that is resolved with the Gauge visual.

The following example demonstrates how to save the Gauges as a PDF file by using the exportPDF method.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
    ArcGauge,
    LinearGauge,
    RadialGauge
} from '@progress/kendo-react-gauges';
import { Button } from '@progress/kendo-react-buttons';

import { exportPDF } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class GaugeExportComponent extends React.Component {
    _arcGauge;
    _linearGauge;
    _radialGauge;

    exportGaugeVisual = (gauge, callback) => {
        gauge.exportVisual().then(gaugeVisual => callback(gaugeVisual));
    }

    exportGauge = (gauge) => {
        this.exportGaugeVisual(gauge, (gaugeVisual) =>
            exportPDF(gaugeVisual).then(dataURI => saveAs(dataURI, 'gauge.pdf')));
    }

    exportLinearGauge = () => {
        this.exportGauge(this._linearGauge);
    }

    exportRadialGauge = () => {
        this.exportGauge(this._radialGauge);
    }

    exportArcGauge = () => {
        this.exportGauge(this._arcGauge);
    }

    render() {
        const value = 30;
        const pointer = {
            value: value
        };

        const gaugeStyles = {
            display: 'block'
        };

        return (
            <div>
                <h5>Export to PDF</h5>
                <div className="example-config">
                    <Button onClick={this.exportLinearGauge}>
                        Export Linear Gauge
                    </Button>
                    <Button onClick={this.exportRadialGauge}>
                        Export Radial Gauge
                    </Button>
                    <Button onClick={this.exportArcGauge}>
                        Export Arc Gauge
                    </Button>
                </div>
                <div className="row">
                    <div className="col-sm-12 col-md-2">
                        <LinearGauge
                            ref={(cmp) => this._linearGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <RadialGauge
                            ref={(cmp) => this._radialGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <ArcGauge
                            ref={(cmp) => this._arcGauge = cmp}
                            style={gaugeStyles}
                            value={value}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <GaugeExportComponent />,
    document.querySelector('my-app')
);

Exporting to SVG

The exportSVG method from the Drawing library takes a visual element and produces an image file. To get the Gauge visual, use the exportVisual method which returns a Promise that is resolved with the Gauge visual.

The following example demonstrates how to save the Gauges as an SVG file by using the exportSVG method.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
    ArcGauge,
    LinearGauge,
    RadialGauge
} from '@progress/kendo-react-gauges';
import { Button } from '@progress/kendo-react-buttons';

import { exportSVG } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class GaugeExportComponent extends React.Component {
    _arcGauge;
    _linearGauge;
    _radialGauge;

    exportGaugeVisual = (gauge, callback) => {
        gauge.exportVisual().then(gaugeVisual => callback(gaugeVisual));
    }

    exportGauge = (gauge) => {
        this.exportGaugeVisual(gauge, (gaugeVisual) =>
            exportSVG(gaugeVisual).then(dataURI => saveAs(dataURI, 'gauge.svg')));
    }

    exportLinearGauge = () => {
        this.exportGauge(this._linearGauge);
    }

    exportRadialGauge = () => {
        this.exportGauge(this._radialGauge);
    }

    exportArcGauge = () => {
        this.exportGauge(this._arcGauge);
    }

    render() {
        const value = 30;
        const pointer = {
            value: value
        };

        const gaugeStyles = {
            display: 'block'
        };

        return (
            <div>
                <h5>Export to PDF</h5>
                <div className="example-config">
                    <Button onClick={this.exportLinearGauge}>
                        Export Linear Gauge
                    </Button>
                    <Button onClick={this.exportRadialGauge}>
                        Export Radial Gauge
                    </Button>
                    <Button onClick={this.exportArcGauge}>
                        Export Arc Gauge
                    </Button>
                </div>
                <div className="row">
                    <div className="col-sm-12 col-md-2">
                        <LinearGauge
                            ref={(cmp) => this._linearGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <RadialGauge
                            ref={(cmp) => this._radialGauge = cmp}
                            style={gaugeStyles}
                            pointer={pointer}
                        />
                    </div>
                    <div className="col-sm-12 col-md-5">
                        <ArcGauge
                            ref={(cmp) => this._arcGauge = cmp}
                            style={gaugeStyles}
                            value={value}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <GaugeExportComponent />,
    document.querySelector('my-app')
);

In this article