# Colors
Chart colors help users distinguish between data items and datasets.
# Color System
The default color system consists of ten repeating colors. With the help of CSS variables you can override the default colors to create custom themes. More advanced users may choose to create entirely new color systems based on unique design requirements.
# Default Colors
The Charts.css color system consists of the following 10 colors:
- rgba(240 50 50 / 75%)
- rgba(255 180 50 / 75%)
- rgba(255 220 90 / 75%)
- rgba(100 210 80 / 75%)
- rgba(90 165 255 / 75%)
- rgba(170 90 240 / 75%)
- rgba(180 180 180 / 75%)
- rgba(110 110 110 / 75%)
- rgba(170 150 110 / 75%)
- rgba(130 50 20 / 75%)
All colors have an alpha-value of 75%. The semi-transparent color makes sure that axes and other background elements are always visible.
# Color Customization
The color system can be customized by changing the value of the --color or --color-* variables. Replace the * with any number 1-10.
# Change All Colors
The most basic way to change colors is to use the --color variable, applying it on the entire chart. This way all the inner elements will inherit the color.
#my-chart .column {
--color: blue;
}
2
3
# Change Specific Colors
To change the color of a specific element, we need to apply the --color variable on a specific <td> tag. This way the inheritance rules only apply to that element.
<tr>
<th scope="row"> Label </th>
<td style="--size: 0.5; --color: orange;"> Data </td>
</tr>
2
3
4
This method can also be applied to all the <td> elements one by one.
<tr>
<th scope="row"> Label </th>
<td style="--size: 0.2; --color: red;"> Data </td>
</tr>
<tr>
<th scope="row"> Label </th>
<td style="--size: 0.4; --color: green;"> Data </td>
</tr>
<tr>
<th scope="row"> Label </th>
<td style="--size: 0.6; --color: blue;"> Data </td>
</tr>
2
3
4
5
6
7
8
9
10
11
12
Note: With small data tables it's acceptable to override colors for each <td> element but with large tables it's not recommended. Keep reading to learn how to change global colors.
# Change Global Colors
As mentioned above, the framework has a set of ten default colors repeating themselves. Override these colors to create your own custom theme.
#my-chart .column {
--color-1: rgba(255, 170, 170, 0.2);
--color-2: rgba(255, 170, 170, 0.4);
--color-3: rgba(255, 170, 170, 0.5);
--color-4: rgba(255, 170, 170, 0.6);
--color-5: rgba(255, 170, 170, 1.0);
--color-6: rgba(255, 170, 170, 1.0);
--color-7: rgba(255, 170, 170, 0.8);
--color-8: rgba(255, 170, 170, 0.6);
--color-9: rgba(255, 170, 170, 0.4);
--color-10: rgba(255, 170, 170, 0.2);
}
2
3
4
5
6
7
8
9
10
11
12
This works well with single datasets:
And with multiple datasets:
Note: As mentioned above, the framework has a set of 10 default colors repeating themselves. You can create your own custom color system based on three, five, or even 20 repeating colors.
# Custom Images
External images can be used instead of colors.
#my-chart .column {
--color: url("https://.../");
}
2
3
# Use Gradients
Set gradients on any CSS variables mentioned above.
#my-chart .column,
#my-chart .area {
--color: linear-gradient(red, yellow);
}
2
3
4
# Use Pseudo Classes
Use CSS pseudo-classes to target the elements you want to color.
#my-chart .column tr {
--color: #fdc;
}
#my-chart .column tr:nth-child(n+8):not(:last-child) {
--color: #f84;
}
#my-chart .column tr:last-child {
--color: repeating-linear-gradient(135deg, #fdc 0px, #fdc 6px, #f84 6px, #f84 12px);
}
2
3
4
5
6
7
8
9
# Use Patterns
Use custom CSS patterns instead of colors.
#my-chart .column {
--color-1: repeating-linear-gradient(#f80, #f80 10px, #e34 10px, #e34 20px);
--color-2: repeating-linear-gradient(45deg, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-3: repeating-linear-gradient(90deg, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-4: repeating-linear-gradient(-45deg, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-5: repeating-linear-gradient(transparent, #e34 20px),
repeating-linear-gradient(90deg, transparent, #e34 20px);
--color-6: repeating-radial-gradient(circle, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-7: repeating-radial-gradient(circle at 50% 100%, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-8: repeating-radial-gradient(circle at 50% 0%, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-9: repeating-radial-gradient(circle at 0% 50%, #f80, #f80 10px, #e34 10px, #e34 20px);
--color-10: repeating-radial-gradient(circle at 100% 50%, #f80, #f80 10px, #e34 10px, #e34 20px);
}
2
3
4
5
6
7
8
9
10
11
12
13
Create CSS patterns using repeating gradients.
# Custom Color System
For more advanced use-cases there is an option to replace the current color system. Let's say we want 3 repeating colors.
/* Multiple Datasets */
#my-chart .column.multiple tbody tr td:nth-of-type(3n + 1) {
background-color: red;
}
#my-chart .column.multiple tbody tr td:nth-of-type(3n + 2) {
background-color: green;
}
#my-chart .column.multiple tbody tr td:nth-of-type(3n + 3) {
background-color: blue;
}
/* Single Dataset */
#my-chart .column:not(.multiple) tbody tr:nth-of-type(3n + 1) td {
background-color: red;
}
#my-chart .column:not(.multiple) tbody tr:nth-of-type(3n + 2) td {
background-color: green;
}
#my-chart .column:not(.multiple) tbody tr:nth-of-type(3n + 3) td {
background-color: blue;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
A single dataset table with three repeating colors:
Multiple datasets with three repeating colors:
← Orientation Stacked →