CSS Styling

Chart appearance is primarily controlled by using Java API.

Note	CSS styling is not the default, but can be enabled by setting styledMode to true.

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.

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

After enabling styledMode and creating a theme module including vaadin-chart-default-theme, as described later, the chart appearance is primarily controlled by CSS style rules.

A comprehensive list of the supported style classes can be found here.

Steps for styling a chart

Create a CSS file (by convention this should be at frontend/styles/).
Specify the desired CSS rules in the theme file.
If multiple charts are present, each one can be specifically targeted by the host selector e.g :host(.first-chart-class).

Add the annotations to import the default theme module and the style file:

@JsModule("@vaadin/vaadin-charts/theme/vaadin-chart-default-theme")
@CssImport(value = "./styles/my-charts-styles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")

Note	If there are multiple theme modules only one of them should declare the `include` in step 4 above.

Example 1: Chart with Yellow Point Markers and Red Labels

custom-chart-styles.css

:host(.first-chart) g.highcharts-markers > .highcharts-point {
  fill: yellow;
}

:host(.first-chart) .highcharts-data-label text {
  fill: red;
}

CssStyleExample.java

@JsModule("@vaadin/vaadin-charts/theme/vaadin-chart-default-theme")
@CssImport(value = "./styles/custom-chart-styles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
public class CssStyleExample extends Div {

    public CssStyleExample() {
        Chart chart = new Chart();
        Configuration configuration = chart.getConfiguration();

        configuration.getChart().setType(ChartType.LINE);

        configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");

        DataSeries ds = new DataSeries();
        ds.setData(7.0, 6.9, 9.5, 14.5);

        DataLabels callout = new DataLabels(true);
        callout.setShape(Shape.CALLOUT);
        callout.setY(-12);
        ds.get(1).setDataLabels(callout);
        ds.get(2).setDataLabels(callout);
        configuration.addSeries(ds);

        chart.addClassName("first-chart");
        add(chart);
    }
}

Chart with Yellow Point Markers and Red Labels

Example 2: Exposing a Chart element in Java for CSS Styling

huge-axis.css

.huge-axis {
  fill: red;
  font-size: xx-large;
}