2.2. 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
Figure 11. 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:

charts export menu 2
Figure 12. Charts Export Menu

You can define the following export settings:

  • backgroundColor – code of the color for the background of the exported image. The 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. The default value is false.

  • exportTitles – exchanges the data field names with its 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 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 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 0 – 1. The 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. 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 – the 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 – the page orientation. The default value is PORTRAIT.

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

  • pageSize – the format of PDF list. The 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. The default value is false.