Exporting Charts as SVG

How to export charts to SVG format.

Installing
Using the Generator
Customizing SVG Generation
Preview SVG (For Debugging)

Charts can be exported as SVG by using the SVGGenerator class. This allows you to generate an SVG string of any chart, using a Configuration object with the chart’s data.

Installing

Add the vaadin-charts-flow-svg-generator dependency to your project’s pom.xml as follows:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow-svg-generator</artifactId>
</dependency>

Note	Node.js required Node.js must be installed for the generator to work. See the configuration instructions in Installing Node.js.

Using the Generator

Create an instance of SVGGenerator and call the generate() method, passing the chart’s Configuration as an argument. The method returns a string with the SVG data of the chart.

Warning

Close the generator

Remember to close the generator when you’re done using it. It’s recommended to use a try-with-resources block, so the generator is automatically closed.

Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}

Customizing SVG Generation

You can customize some attributes of the resulting SVG.

The customizable options include the following:

Width
Height
Theme
Language
Showing timeline
Executing JavaScript code (formatter functions)

Any customizations are handled with the ExportOptions class.

Note	CSS styling not supported CSS styling isn’t supported when exporting a chart as SVG.

Configuration configuration = new Configuration();
// ...
ExportOptions options = new ExportOptions();
options.setWidth(800);
options.setHeight(600);
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}

Executing JavaScript Functions

You can execute functions from Configuration objects, for example, formatter functions. Executing functions must be explicitly enabled by setting the executeFunctions flag to true.

Caution

Only Run Trusted Code

Enabling this option allows JavaScript code to run on your server. Make sure to only allow safe and trusted code.

Configuration configuration = new Configuration();
configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' mm'; }");
// ...
ExportOptions options = new ExportOptions();
options.setExecuteFunctions(true);
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}

Preview SVG (For Debugging)

You can add the generated SVG to a component to see the resulting image.

Caution

For debugging purposes only

Use the Chart component to render charts. This approach is only intended to help you debug your application.

Div div = new Div();
Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration);
    div.getElement().setProperty("innerHTML", svg);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}
add(div);

C8510402-621D-437D-ADD9-E219BBDB532D

Docs