Docs

Docs

Migrating from Earlier Versions

Information on migrating chart components from earlier versions of Vaadin.

Charts 9 comes with new chart types and brings back the Java styling API. This page provides information on migrating chart components from earlier versions.

Summary of Changes

Migration Guide

If you are migrating your project from an earlier Vaadin version, the steps vary depending on the version number and the styling option you choose.

Caution
You cannot use both CSS and Java styling in the same project
Only one styling method should be used across all charts. While there is no error thrown when different styling methods are used in the same project, using both may lead to unexpected results.

Migrating from Vaadin 8

Using Java API Styling

No action is required since Charts uses the Java API for styling by default.

Note
Small Changes
There might be some small changes to the APIs compared to the Highcharts version used in Vaadin 8.

Using CSS Styling

If you want to convert your project to use CSS styling instead of Java, you can enable it by setting styledMode to true:

Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getChart().setStyledMode(true);

See the CSS Styling guide for detailed instructions.

Migrating from Vaadin 10

Using Java API Styling

No action is required if your project doesn’t have custom Charts themes.

If it has custom themes, you need to remove them and their @CssImport annotations before using the Java API for styling.

Using CSS Styling

To keep using CSS styling, you can enable it by setting styledMode to true:

Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getChart().setStyledMode(true);

See the CSS Styling guide for detailed instructions.

Running Charts 9 in Vaadin 14

Although Charts 9 was released in a later Vaadin version, you can use it in a Vaadin 14 project in npm mode by overriding the version number in the pom.xml file:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow</artifactId>
    <version>9.0.0</version>
</dependency>
Tip
Version Number
You can find the latest version on the Charts release page.

Using Java API Styling

No action is required if your project doesn’t have custom Charts themes.

If it has custom themes, you need to remove them and their @CssImport annotations before using the Java API for styling.

Using CSS Styling

To keep using CSS styling, you can enable it by setting styledMode to true:

Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getChart().setStyledMode(true);

See the CSS Styling guide for detailed instructions.

CA191212-B228-4F07-9F40-BC0C68F84FA0