Migrating from earlier versions

Charts 9 comes with new chart types and brings back the API to style from Java.

Summary

Migration guide

If you are migrating your project to platform V17, there might be different approaches related with which styling option you will pick.

Caution
Both CSS and Java styling cannot be used in the same project
While no error is thrown if different styling methods are used in the same project, only one method should be used across all charts, since having both could lead to unexpected results.

From a V8 or older project

Using Java API styling

Since V17 uses Java API for styling by default, there’s no needed to do any extra step.

Note
There might be small changes for APIs that no longer work between the Highcharts versions used for V8 and V17.

Using CSS styling

If you want to convert your project to use CSS styling, there are a few steps needed to make it work:

  1. Enable CSS style by setting styledMode to true:

    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    conf.getChart().setStyledMode(true);
  2. Import the charts default theme module to your view with:

    @JsModule("@vaadin/vaadin-charts/theme/vaadin-chart-default-theme")

For more detailed instructions, please check the "CSS Styling guide"

From a V10+ project

Using Java API styling

If your project does not have any Charts custom theme, then there’s no extra step needed to do.

In the other hand, if it has custom themes, then they should be removed, along aside their @CssImport annotations. You can, then, use the Java API for styling the charts.

Using CSS styling

To keep using CSS styling, make sure your project is importing the Charts default theme module and enable the styledMode as described on this same topic at the previous section.

Running Charts 9 in V14

While Charts 9 is released for V17, a project running V14 in npm mode could use the new Charts by overriding the version at the project’s POM file:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow</artifactId>
    <version>9.0.0</version>
</dependency>
Note
Check the latest version on the Charts release page.

Then, to start using it, check the From a V10+ project instructions presented on this page.