Charts Export

You can export any chart from the running application as a picture or source data. The chart:export element is used to create a default export menu that enables the following options:

  • Download as with available formats: PNG, JPG, SVG, PDF.

  • Save as with available formats: CSV, XLSX, JSON.

  • Annotate​ is used to add personal notes and vector shapes to the chart. You can find information on the annotation plugin here.

  • Print opens a standard print settings window.

export
Charts export menu

The export menu can be customized to limit user access to the chart data, for example:

<chart:export fileName="my-chart" position="TOP_RIGHT">
    <chart:menu>
        <chart:item label="PNG" title="Save as PNG" format="PNG"/>
        <chart:item label="JPG" title="Save as JPG" format="JPG"/>
    </chart:menu>
</chart:export>

In this case, only direct download buttons for chosen formats will be available:

export customised
Customized charts export menu

You can define the following export settings:

  • backgroundColor – a code of color for the background of the exported image. The default value is #FFFFFF.

  • dataDateFormat – a format to convert date strings to date objects in data export only.

  • dateFormat – formats the category field in the given date format (data export only).

  • enabled – enables or disables the export functionality.

  • exportSelection – exports the current data selection only. The default value is false.

  • exportTitles – exchanges data field names with their dedicated title. The default value is false.

  • fileListener – if true, it observes the drag and drop feature and loads the dropped image file into the annotation. The default value is false.

  • fileName – a file name that is used for generated export files. An extension will be appended depending on the export format.

  • keyListener – if true, observes the pressed keys to undo/redo the annotations.

  • position – a position of the export icon. Possible values: TOP_LEFT, TOP_RIGHT (default value), BOTTOM_LEFT, BOTTOM_RIGHT.

  • removeImages – if true, export checks for and removes unnecessary images that are loaded from different domains.

The following properties enable you to customize each export option: JPG

  • quality – a quality of the resulting image. Possible values are 0 – 1. The default value is 1.

PNG, JPG, SVG, PDF

  • multiplier – a scale factor for the generated image.

CSV

  • quotes – sets whether to enclose strings in double-quotes. The default value is true.

  • delimiter – a string to use as a column delimiter. The default value is “,” (comma).

  • escape – defines whether to escape strings. The default value is true.

  • withHeader – adds header row with column names. The default value is true.

XLSX

  • dateFormat – an XLSX date format mask. Do not forget to set parseDates to true in CategoryAxis.

  • stringify – converts all cell content to strings. The default value is false.

  • withHeader – adds header row with column names. The default value is true.

PDF

  • pageOrientation – a page orientation. The default value is PORTRAIT.

  • pageOrigin – shows/hides the origin of the generated PDF. The default value is true.

  • pageSize – a format of PDF page. The default value is A4. Additionally, you can override the string for label.saved.from message in the messages.properties file.

PRINT

  • delay – delay before triggering print in seconds.

  • lossless – enables or disables image optimization when printing. The default value is false.