The following style properties can be used in CSS stylesheets to customize the appearance of this component.
To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector.
See Lumo Style Properties for more information on style properties.
Common Properties
| Feature |
Property |
Default Value |
|---|
Background | --vaadin-charts-background
| --lumo-base-color
|
Axis line | --vaadin-charts-axis-line
| --lumo-contrast-5pct
|
Grid line | --vaadin-charts-grid-line
| --lumo-contrast-20pct
|
X-axis line width | --vaadin-charts-xaxis-line-width
| 0
|
Data Series Colors
| Feature |
Property |
Default Value |
|---|
Charts color 0 | --vaadin-charts-color-0
| #5ac2f7
|
Charts color 1 | --vaadin-charts-color-1
| #1676f3
|
Charts color 2 | --vaadin-charts-color-2
| #ff7d94
|
Charts color 3 | --vaadin-charts-color-3
| #c5164e
|
Charts color 4 | --vaadin-charts-color-4
| #15c15d
|
Charts color 5 | --vaadin-charts-color-5
| #0e8151
|
Charts color 6 | --vaadin-charts-color-6
| #c18ed2
|
Charts color 7 | --vaadin-charts-color-7
| #9233b3
|
Charts color 8 | --vaadin-charts-color-8
| #fda253
|
Charts color 9 | --vaadin-charts-color-9
| #e24932
|
Color for positive values | --vaadin-charts-color-positive
| --vaadin-charts-color-4
|
Color for negative values | --vaadin-charts-color-negative
| --vaadin-charts-color-9
|
Text Colors
| Feature |
Property |
Default Value |
|---|
Chart title | --vaadin-charts-title-label
| --lumo-header-text-color
|
Axis title | --vaadin-charts-axis-title
| --lumo-secondary-text-color
|
Axis label | --vaadin-charts-axis-label
| --lumo-secondary-text-color
|
Data label | --vaadin-charts-data-label
| --lumo-body-text-color
|
Secondary label | --vaadin-charts-secondary-label
| --lumo-secondary-text-color
|
Disabled label | --vaadin-charts-disabled-label
| --lumo-disabled-text-color
|
Other Chart Colors
| Feature |
Property |
Default Value |
|---|
Contrast | --vaadin-charts-contrast
| --lumo-contrast
|
Contrast 5% | --vaadin-charts-contrast-5pct
| --lumo-contrast-5pct
|
Contrast 10% | --vaadin-charts-contrast-10pct
| --lumo-contrast-10pct
|
Contrast 20% | --vaadin-charts-contrast-20pct
| --lumo-contrast-20pct
|
Contrast 60% | --vaadin-charts-contrast-60pct
| --lumo-contrast-60pct
|
Style properties for range selector buttons.
| Feature |
Property |
Default Value |
|---|
Button label | --vaadin-charts-button-label
| --lumo-primary-text-color
|
Button background | --vaadin-charts-button-background
| --lumo-contrast-5pct
|
Button hover background | --vaadin-charts-button-hover-background
| --lumo-primary-color-10pct
|
Button active label | --vaadin-charts-button-active-label
| --lumo-primary-contrast-color
|
Button active background | --vaadin-charts-button-active-background
| --lumo-primary-color
|
| Feature |
Property |
Default Value |
|---|
Tooltip background | --vaadin-charts-tooltip-background
| --lumo-base-color
|
Tooltip border | --vaadin-charts-tooltip-border-color
| inherit
|
Tooltip background opacity | --vaadin-charts-tooltip-background-opacity
| 1
|