The Chart provides support for Image, PDF, and SVG export using theDrawing package.
As a result, you can send a Base64-encoded file to a service or save it on the client machine by using theFile Saver package.
The Chart supports the following options:
In order to export a Chart component as a Drawing scene use theexportVisual method and pass a Chart instance and export options.
The following example demonstrates how to export the Chart as a Drawing visual scene by using theexportVisual method. All examples in this article use a definition similar to the below to generate the Drawing scene of the Chart.
exportChartVisual(callback){const chartVisual=exportVisual(this.$refs.chart,{});if(chartVisual){callback(chartVisual);}}Once the Chart is exported as Drawing scene, the following example demonstrates how to save this visual as PNG image using theexportImage method of theDrawing package.
By default, the exported image is of the same size as the Chart DOM element. If required, you can export the file to a different resolution. If you change the image size, the image quality will not be affected because the rendering of the Chart is based on vector graphics.
TheexportPDF method from theDrawing library takes a visual element and produces a PDF file out of it.
The following example demonstrates how to save the Chart as a PDF file by using theexportPDF method.
If the rendered Chart is bigger than the exported PDF paper size, then the Chart is clipped. To avoid this behavior, either:
exportVisual size, orexportVisual method.The following example demonstrates how to fit the exported Chart to the paper size of the PDF file.
Once the Chart is exported as Drawing scene, the following example demonstrates how to save this visual as an SVG using theexportSVG method of theDrawing package.