Docs

Docs

Exporting Charts as SVG

How to export charts to SVG format.

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:

Source code
XML
<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.
Source code
Java
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.
Source code
Java
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.
Source code
Java
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.
Source code
Java
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