1.3. Charts Export

All charts can be exported from the running application as a picture or a source data. The chart:export element is used to create 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…​ which is used to add personal notes and vector shapes to the chart. You can find information on the annotation plugin here.

  • Print that opens the standard print settings window.

charts export menu 1

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:

charts export menu 2

You can define the following export settings:

  • backgroundColor - code of the color for the background of the exported image. Default value is #FFFFFF.

  • dataDateFormat - the 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. Default value is false.

  • exportTitles - exchanges the data field names with its dedicated title. Default value is false.

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

  • fileName - a file name to use for generated export files (an extension will be appended to it based on the export format).

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

  • position - position of export icon. Possible values: TOP_LEFT, TOP_RIGHT (DEFAULT), BOTTOM_LEFT, BOTTOM_RIGHT.

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

The following properties enable you to customize each export option:

JPG

  • quality - quality of the resulting image. Possible values 0 - 1. Default value is 1.

PNG, JPG, SVG, PDF

  • multiplier - scale factor for the generated image.

CSV

  • quotes - sets whether to enclose strings in double quotes. Default value is true.

  • delimiter - a string to use as a column delimiter. Default value is "," (comma).

  • escape - defines whether to escape strings. Default value is true.

  • withHeader - adds header row with column names. Default value is true.

XLSX

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

  • stringify - converts all cell content to strings. Default value is false.

  • withHeader - adds header row with column names. Default value is true.

PDF

  • pageOrientation - the page orientation. Default value is PORTRAIT.

  • pageOrigin - shows / hides the origin of the generated PDF. Default value is true.

  • pageSize - the format of PDF list. Default value is A4.

Additionally, you can override the string for label.saved.from message in the main message pack.

PRINT

  • delay - delay before triggering print in seconds.

  • lossless - enables or disables image optimization when printing. Default value is false.