CSS variables
Every CSS variable, and what it sets.
Chart
Every variable is optional. Set them on :root, on a class or on a chart. See Styling. Variables that set the same part of a chart start the same way, such as --tablechart-name- for all names.
| Variable | Default | Sets |
|---|---|---|
--tablechart-color |
The text colour | The colour of text and marks |
--tablechart-color-1 |
None | The palette, for donut slices and several lines. The numbers go on: --tablechart-color-2, --tablechart-color-3 and so on |
--tablechart-font-size |
1em |
All text in a chart. The other sizes are relative to it |
--tablechart-line-height |
1.25 |
The line height of all text in a chart |
--tablechart-margin |
0 |
The space around a chart |
--tablechart-min-height |
200px |
The least height of a chart, on a narrow screen |
--tablechart-surface |
The page background | The background colour, for lighter lines and slices |
--tablechart-type |
None | Shows a column chart as a bar chart, or a bar chart as a column chart: bar or column |
Names
A name is the name of a row: under a column, beside a bar or at the end of a line.
| Variable | Default | Sets |
|---|---|---|
--tablechart-name-color |
The text colour | The colour of the names |
--tablechart-name-gap |
0.45em |
The space between the columns and the names under them |
--tablechart-name-max |
40% |
The widest a name beside a bar may be, as a share of the chart’s width. A longer name wraps |
--tablechart-name-padding |
0 0.2em |
The padding of a name under a column |
--tablechart-name-size |
0.95em |
All names |
Values
A value is the number on a bar, column or point.
| Variable | Default | Sets |
|---|---|---|
--tablechart-value-align |
end, center on a waterfall |
Where a number inside its bar goes: start, center or end |
--tablechart-value-color |
The text colour | The numbers on the bars, outside the bars |
--tablechart-value-group-size |
0.95em |
The numbers of columns or bars side by side |
--tablechart-value-size |
1.3 times the name size | The numbers on the bars |
Bars and columns
| Variable | Default | Sets |
|---|---|---|
--tablechart-bar-color |
The text colour | All bars and a single line |
--tablechart-bar-max |
60px |
The widest a bar may be |
--tablechart-bar-value-color |
Dark or light, whichever reads on the bar | The number inside a bar |
--tablechart-piece-value-color |
Dark or light, whichever reads on the part | The number inside a part of a stacked column or bar |
Waterfall
| Variable | Default | Sets |
|---|---|---|
--tablechart-connector-color |
The text colour | The line between two columns |
--tablechart-connector-dash |
2 3 |
The dash pattern of that line, in pixels |
--tablechart-connector-opacity |
0.55 |
The opacity of that line |
--tablechart-connector-width |
1px |
The width of that line |
--tablechart-down-color |
The bar colour | Falling steps |
--tablechart-down-value-color |
Dark or light, whichever reads on the step | The number inside a falling step |
--tablechart-total-color |
The bar colour | Totals |
--tablechart-total-value-color |
Dark or light, whichever reads on the total | The number inside a total |
--tablechart-up-color |
The bar colour | Rising steps |
--tablechart-up-value-color |
Dark or light, whichever reads on the step | The number inside a rising step |
Lines and areas
| Variable | Default | Sets |
|---|---|---|
--tablechart-area-color |
The colour of its line | The fill under a line, in an area chart |
--tablechart-area-opacity |
0.25, 0.5 when stacked |
The opacity of that fill |
--tablechart-point-color |
The colour of its line | The points on a line |
--tablechart-series-color |
The bar colour | Lines without a palette. Each next line is lighter |
--tablechart-series-dash |
6 4 |
The pattern of a dashed line, in pixels |
--tablechart-series-dot |
0 4 |
The pattern of a dotted line, in pixels |
--tablechart-series-fade |
30% |
How much lighter each next line is |
--tablechart-series-min |
40% |
The lightest a line may be |
--tablechart-series-muted-share |
45% |
How much of its colour a line keeps next to a highlighted line |
--tablechart-series-own-color |
From the palette or the series colour | The colour of one line, set on [data-series="2"] and so on |
--tablechart-series-width |
2px |
The width of a line |
Donut
| Variable | Default | Sets |
|---|---|---|
--tablechart-centre-color |
The text colour | The number in the middle of a donut |
--tablechart-centre-size |
1.6em |
The size of that number |
--tablechart-leader-color |
The text colour | The line from a slice to its number |
--tablechart-leader-opacity |
0.45 |
The opacity of that line |
--tablechart-leader-width |
1px |
The width of that line |
--tablechart-slice-color |
The text colour | Slices without a palette. Each next slice is lighter |
--tablechart-slice-fade |
15% |
How much lighter each next slice is |
--tablechart-slice-gap |
4 |
The gap between slices. It grows with the ring |
--tablechart-slice-min |
20% |
The lightest a slice may be |
Legend
| Variable | Default | Sets |
|---|---|---|
--tablechart-legend-border |
none |
The border of the legend |
--tablechart-legend-gap |
0.6em |
The space above the legend |
--tablechart-legend-key-size |
0.6em |
The dot before each name in the legend |
--tablechart-legend-padding |
0 |
The padding of the legend |
--tablechart-legend-radius |
0 |
The corners of the legend |
--tablechart-legend-surface |
none |
The background of the legend |
Annotations
| Variable | Default | Sets |
|---|---|---|
--tablechart-annotation-color |
The text colour | Annotation lines, arrowheads and badges |
--tablechart-annotation-width |
1.25px |
The width of annotation lines |
--tablechart-badge-border-width |
1px |
The border of the badge |
--tablechart-badge-padding |
0.5em 1.25em |
The padding of the badge |
--tablechart-badge-radius |
50% |
The corners of the badge |
--tablechart-badge-surface |
none |
The background of the badge |
Baseline and scale breaks
| Variable | Default | Sets |
|---|---|---|
--tablechart-baseline-color |
The text colour | The baseline |
--tablechart-baseline-opacity |
0.45 |
The opacity of the baseline |
--tablechart-baseline-width |
1px |
The width of the baseline |
--tablechart-break-color |
The text colour | The lines of a break in the scale |
--tablechart-break-gap |
1.3% of the chart width | The empty space between the two lines of a break |
--tablechart-break-opacity |
1 |
The opacity of those lines |
--tablechart-break-width |
1px |
The width of those lines |
Axes and gridlines
On a scatter chart, and on the other types with data-chart-axis or data-chart-grid. See Axes and gridlines.
| Variable | Default | Sets |
|---|---|---|
--tablechart-axis-color |
The text colour, at 55% | The lines of the axes |
--tablechart-axis-size |
The name size | The numbers and titles along the axes |
--tablechart-axis-text-color |
The text colour | The colour of the numbers and titles along the axes |
--tablechart-axis-width |
1px |
The width of the lines of the axes |
--tablechart-grid-color |
The text colour | The gridlines, with data-chart-grid |
--tablechart-grid-opacity |
0.09 |
The opacity of the gridlines |
--tablechart-grid-width |
1px |
The width of the gridlines |
Tooltip
See Styling tooltips. The tooltip reads these from the chart when it opens.
| Variable | Default | Sets |
|---|---|---|
--tablechart-tooltip-border |
A thin line in the text colour | The border of the tooltip |
--tablechart-tooltip-color |
The text colour of the chart | The text colour of the tooltip |
--tablechart-tooltip-padding |
0.45em 0.7em |
The space inside the tooltip |
--tablechart-tooltip-radius |
0.4em |
The corners of the tooltip |
--tablechart-tooltip-shadow |
A shadow, so it stands out | The shadow under the tooltip |
--tablechart-tooltip-surface |
White; in dark mode the background of the chart, a little lighter | The background of the tooltip |
Animation
See Animation.
| Variable | Default | Sets |
|---|---|---|
--tablechart-animation-ease |
Slow at the start and the end for columns and bars; fast at the start, settling at the end for the other types | The easing of bars, donuts, and lines and areas that grow |
--tablechart-animation-element-duration |
0.8s for columns and bars, 0.5s for the other types |
How long one bar, column, point or donut slice takes |
--tablechart-animation-max |
Four times the element time | The longest a chart may take to build |
--tablechart-animation-stagger |
0.06 for columns and bars, 0.6 for a waterfall, 0.24 for the other types |
When the next element starts, as a share of the element time |
--tablechart-annotation-duration |
0.6s |
How long an annotation line takes |
--tablechart-queue-duration |
0.4s |
How long a chart in a sequence takes to fade in |