> Markdown version of [CSS Styling](https://vaadin.com/docs/v10/charts/java-api/css-styling). Section index: [llms.txt](https://vaadin.com/docs/v10/charts/llms.txt)

# <a id="css.styling"></a>CSS Styling

Chart appearance is primarily controlled by CSS style rules. A comprehensive list of the supported style classes can be found [here](https://www.highcharts.com/docs/chart-design-and-style/style-by-css).

## <a id="css.styling.steps"></a>Steps for styling a chart

1. Create a theme file (by convention this should be `webapp/frontend/styles/shared-styles.html`). The theme’s dom-module must declare `theme-for=vaadin-chart`.

2. Declare `include="vaadin-chart-default-theme"` on the theme module’s style element to customize Chart’s default theme.

3. Specify the desired CSS rules in the theme file.

4. If multiple charts are present, each one can be specifically targeted by the host selector e.g `:host(.first-chart-class)`.

5. Import the theme file.

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

## <a id="css.styling.example1"></a>Example 1: Chart with Yellow Point Markers and Red Labels

shared-styles.html

```css
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart-default-theme.html">

<dom-module id="css-style-example" theme-for="vaadin-chart">
  <template>
    <style include="vaadin-chart-default-theme">
      :host(.first-chart) g.highcharts-markers > .highcharts-point {
        fill: yellow;
      }

      :host(.first-chart) .highcharts-data-label text {
        fill: red;
      }
    </style>
  </template>
</dom-module>
```

CssStyleExample.java

```java
@HtmlImport("frontend://styles/shared-styles.html")
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);
    }
}
```

 

[Image: css styling1]

Chart with Yellow Point Markers and Red Labels

## <a id="css.styling.example2"></a>Example 2: Exposing a Chart element in Java for CSS Styling

shared-styles.html

```css
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart-default-theme.html">

<dom-module id="css-style-example" theme-for="vaadin-chart">
  <template>
    <style include="vaadin-chart-default-theme">
      .huge-axis {
        fill: red;
        font-size: xx-large;
      }
    </style>
  </template>
</dom-module>
```

CssStyleExample.java

```java
@HtmlImport("frontend://styles/shared-styles.html")
public class CssStyleExample extends Div {

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

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

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

        // Expose the X-Axis for CSS targeting.
        configuration.getxAxis().setClassName("huge-axis");

        add(chart);
    }
}
```

 

[Image: css styling2]

Chart with a Huge X-Axis