Export Options in Highcharts

If anyone has tried its hands on creating different types of charts like bar, column, pie, spline, range or bubble chart etc, then you must know about the highcharts by Torstein Honsi.

In this article, I will tell you about the downloading those chart as an image or want to export the chart values in the file ( CSV/ Xls ). For that requirement, two methods have been provided by highcharts –

Export Module –

The exporting module allows your users to download the chart as PDF, PNG, JPG or SVG vector images.

To enable exporting, the module needs to be included for exporting are mentioned below. Either you can also use cloud URL like –

Export URL must be included after highchart js. As soon as you include you can see a context button with a menu appears in the top right corner of the chart.  You can see the screenshot here.

Using the export server, It will download the image by sending the chart configs to Highsoft’s servers.

Client Side Export –

The offline-exporting module allows for image export of charts without sending data to an external server

If you want to avoid sending of your data on highsoft’s server you can use the offline exporting module. But it has a drawback that it doesn’t support old browsers like IE8.

The required scripts you have to include are –

Exporting.js is the required script to be included as a fallback export server if offline exporting.js won’t work for an unsupported browser.

It won’t send a request on a highsoft server so no worries of data sharing. It works on the client side . It has the almost same feature as exporting server.

If you want some other feature also without sharing data or want support for IE8 then you have to use dedicated server along with exporting js indicated in the first part.

Further Export Options –

If you noticed in the first method you have seen that in export module screenshot, I have shown more export options rather than in client export module. Like to download chart data as file in Csv or xls or data-table or show chart on a highchart cloud.

To add those options, you have to include export-data.js module after exporting.js, You can see further options start appearing in the context menu below that.

Reference link –

https://www.highcharts.com/

Please follow and like us:
20