Vaadin 17 includes a major Vaadin Charts upgrade

We released a major upgrade for Vaadin Charts as part of Vaadin 17. Read on to learn about the Java API for styling, new chart types, and how to upgrade.

Java API to style charts returns

The Java API to style charts is back in Vaadin 17! In Vaadin 8, it was possible to style charts using only Java, but this feature was dropped in Vaadin 10. The API is back and it’s as comprehensive as before: it covers colors, grid-line widths, border widths, dash styles, font sizes, and more. Using CSS files to style charts is now optional, and the new (old) API is the default.

For example, if you want to set the plot band colors with the Java API, you can simply provide the value in the constructor or call a setter.

YAxis yAxis = conf.getyAxis();
yAxis.addPlotBand(new PlotBand(0, 150, new SolidColor("#666666")));

Alternatively, you can use CSS for styling. Include the default theme module and import your custom CSS module for Charts.

@CssImport(value = "./styles/my-chart-styles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
@JsModule("@vaadin/vaadin-charts/theme/vaadin-chart-default-theme")
public class MyView extends VerticalLayout {
  // ...
}

Create your Chart in styled mode.

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

To change the plot band’s color, simply add your custom CSS class name.

PlotBand band0 = new PlotBand();
band0.setFrom(0);
band0.setTo(150);
band0.setClassName("my-color-0");

Then change the color in your CSS file.

/* <project-root>/frontend/styles/my-chart-styles.css */
.highcharts-plot-band.my-color-0 {
	fill: #666666;
}

New chart types and other improvements

The new Charts version introduces four new chart types: Bullet, Organization, X Range, and Timeline.

Bullet

Organization

X Range

Timeline

We reintroduced a couple of features from the Vaadin 8 version of Charts. You can set the Lang object for localization and other global chart options.

Here’s how to add localisations for month names:

// Months in Finnish
String[] fiMonths = new String[] {"Tammikuu", "Helmikuu", "Maaliskuu",
    "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu",
    "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"};
Lang fi = new Lang();
fi.setMonths(fiMonths);
ChartOptions options  = ChartOptions.get();
options.setLang(fi);

The DrillDown event callback is also available. It allows you to create lazy-loading data for drill-down graphs.

private void createMyChart() {
  final Chart chart = new Chart(ChartType.COLUMN);
  conf = chart.getConfiguration();

	// PlotOptions omitted
  
  DataSeries series = new DataSeries();
  DataSeriesItem item = new DataSeriesItem("LUAE", 42);
  item.setId("1");
  series.addItemWithDrilldown(item);
  
  conf.addSeries(series);
  chart.setDrilldownCallback(event -> getPointDrilldown(event.getItem()));
}

private Series getPointDrilldown(DataSeriesItem item) {
  // Create and return a new DataSeries based on item.getId()
}

How to upgrade

The new Charts version is part of Vaadin 17. If you are using Vaadin 16, simply upgrade the version number of the Vaadin platform dependency.

As a Vaadin 14 user, you should still be able to use the LTS version of the platform and only upgrade the Charts version to the latest one, but we haven’t tested that yet extensively. If you have already tried the new version with Vaadin 14, let me know in the comments.  Be aware that the LTS support does not yet cover new Charts. Alternatively, you can wait for the backport of Charts to an upcoming Vaadin 14 minor version. We currently estimate that it will be available in version 14.5.0.