All Components

Export Options

The Kendo UI RadialGauge allows you to export it to PDF, PNG, or SVG formats.

To implement the desired export options, use the pdfExport, imageExport, or svgExport configuration respectively.

<div id="vueapp" class="vue-app">
    <kendo-radialgauge ref="radialgauge" :scale-min="0"
                        :scale-max="50"
                        :scale-vertical="false">
        <kendo-radialgauge-pointer :value="30" :color="'#ff6358'"></kendo-radialgauge-pointer>
    </kendo-radialgauge>
    <button @click="pdfExport">Export as PDF</button>
    <button @click="imageExport">Export as Image</button>
    <button @click="svgExport">Export as SVG</button>
</div>
Vue.use(GaugesInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        pdfExport: function () {
            var gauge = this.$refs.radialgauge.kendoWidget();
            gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.pdf",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
        imageExport: function () {
            var gauge = this.$refs.radialgauge.kendoWidget();
            gauge.exportImage().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.png",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
        svgExport: function () {
            var gauge = this.$refs.radialgauge.kendoWidget();
            gauge.exportSVG().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.svg",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
    }
})
In this article