> Markdown version of [Chart Styling](https://vaadin.com/docs/latest/components/charts/styling). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# <a id="charts.styling"></a>Chart Styling

Charts can be styled using CSS, and in Flow applications also through the Java API. Vaadin Charts also has many built-in theme variants.

> **Caution: CSS and the Java Styling API Can’t Be Used in the Same Chart**
>
> While no error is thrown if different styling methods are used in the same chart, **only one method should be used in any chart**, since having both could lead to unexpected results.

## <a id="theme-variants"></a>Theme Variants

| Variant    | Description                             | Supported by |
| ---------- | --------------------------------------- | ------------ |
| `gradient` | Colors varying in hue                   | Lumo         |
| `monotone` | Colors varying in brightness            | Lumo         |
| `classic`  | Colors matching those in older versions | Lumo         |

[Image: charts theme variants]

## <a id="java.styling"></a>Java Styling API in Flow

The default styling mode in Flow applications uses the Java API. See the [Java API reference](https://vaadin.com/api/platform/com/vaadin/flow/component/charts/model/style/package-summary.html) for details.

### <a id="java-api-styling-example"></a>Java API Styling Example

In this example, the Java API is used to change the color of point markers to yellow, their outlines to purple, the X-axis labels to blue, and the line color to black.

`FlowStyleExample.java`

```java
public class FlowStyleExample extends Div {

    public FlowStyleExample() {
        var chart = new Chart();
        var configuration = chart.getConfiguration();

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

        var plotOptions = new PlotOptionsLine();
        plotOptions.setColor(SolidColor.BLACK); // Line color

        var marker = new Marker();
        marker.setFillColor(SolidColor.YELLOW); // Point inside color
        marker.setLineWidth(2);
        marker.setLineColor(SolidColor.PURPLE); // Point outline color

        plotOptions.setMarker(marker);

        ds.setPlotOptions(plotOptions);

        configuration.addSeries(ds);

        configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");
        configuration.getxAxis().getLabels().getStyle().setColor(SolidColor.BLUE); // X-axis label color

        add(chart);
    }
}
```

[Image: flow styling]

Chart styled through the Java API

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

Chart colors and fonts can be customized in any regular application stylesheet with the CSS style properties listed in [Style Properties](https://vaadin.com/docs/latest/components/charts/styling/styling.md).

In Flow, CSS styling requires styled mode. See [CSS Styling Mode for Flow](#css.styling.mode).

Styling individual chart elements with Highcharts CSS class names requires the styles to be injected into the chart’s shadow DOM: create a `vaadin-chart.css` file in your theme’s `components` folder, and place the styles there. This mechanism is disabled by default, and must be enabled with the `themeComponentStyles` [feature flag](https://vaadin.com/docs/latest/flow/configuration/feature-flags.md). See the [Highcharts styling documentation](https://www.highcharts.com/docs/chart-design-and-style/style-by-css) for details on the available class names.

### <a id="css.styling.mode"></a>CSS Styling Mode for Flow

To style a chart with CSS in Flow, enable "styled mode" in the Chart configuration:

```java
var chart = new Chart();
var conf = chart.getConfiguration();
conf.getChart().setStyledMode(true);
```

Styled mode is required for all CSS styling of a chart: the style properties, CSS class names, and the rules in a `vaadin-chart.css` file. Without it, the chart is styled through the [Java API](#java.styling) instead, and doesn’t follow the application’s theme. In Lit and React, styled mode is enabled by default.

### <a id="color.schemes"></a>Light & Dark Color Schemes

A chart follows the application’s [light or dark color scheme](https://vaadin.com/docs/latest/styling/themes.md#color-schemes) only in styled mode. In styled mode, the chart’s default colors and the colors set by the Aura and Lumo themes come from CSS, so they switch with the color scheme.

Without styled mode, a chart uses fixed default colors, such as a white background and dark text, whichever color scheme is active. Colors set through the [Java API](#java.styling) are fixed, as well. To make a chart in Flow work with both light and dark color schemes, enable [styled mode](#css.styling.mode), and customize its colors with CSS instead of the Java API.

Custom colors set with the [style properties](https://vaadin.com/docs/latest/components/charts/styling/styling.md) can adapt to the color scheme by using the `light-dark()` CSS function:

```css
vaadin-chart {
    --vaadin-charts-color-0: light-dark(darkgreen, lightgreen);
}
```

### <a id="css-styling-example"></a>CSS Styling Example

In this example, CSS is used to change the color of point markers to yellow, their outlines to purple, data labels to red, and the series colors to shades of green.

`styles.css`

```css
vaadin-chart.first-chart {
    --vaadin-charts-color-0: green;
    --vaadin-charts-color-1: lightgreen;
    --vaadin-charts-color-2: darkgreen;
    --vaadin-charts-data-label: red;
}
```

`CssStyleExample.java`

```java
public class CssStyleExample extends Div {

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

        var chartModel = configuration.getChart();
        chartModel.setType(ChartType.LINE);
        chartModel.setStyledMode(true);

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

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

        var 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);
    }
}
```

`themes/<my-theme>/components/vaadin-chart.css` (requires the `themeComponentStyles` feature flag)

```css
:host(.first-chart) .highcharts-color-0 .highcharts-point {
    fill: yellow;
    stroke: purple;
    stroke-width: 2px;
}
```

[Image: css styling]

Chart with Yellow Point Markers, Purple Outlines, Red Labels, and Green Lines

### <a id="adding-and-styling-a-class-name"></a>Adding and Styling a Class Name

CSS class names can be applied to both chart instances and individual chart elements. In the example below, the `bold-green-axis` class name is applied to the X-axis of a chart to give it a distinct style.

`CssStyleExample.java`

```java
configuration.getxAxis().setClassName("bold-green-axis");
```

`themes/<my-theme>/components/vaadin-chart.css` (requires the `themeComponentStyles` feature flag)

```css
.bold-green-axis {
  font-weight: bold;
  fill: green;
  font-size: 14px;
}
```

[Image: css styling2]

Chart with Bold, Green, and Slightly Larger X-Axis Labels

`3E5B31FB-DF25-4D1E-80EB-7AB485C7B566`