# 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;
}
1
2
3
Colors Example #1
Month Progress
Jan 100
Feb 50
Mar 80
Apr 30
May 50
Jun 90
Jul 100
Aug 70
Sep 40
Oct 60
Nov 20
Dec 90
Open in:

# 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>
1
2
3
4
Colors Example #2
Month Progress
Jan 100
Feb 50
Mar 80
Apr 30
May 50
Jun 90
Jul 100
Aug 70
Sep 40
Oct 60
Nov 20
Dec 90
Open in:

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>
1
2
3
4
5
6
7
8
9
10
11
12
Colors Example #3
Month Progress
Jan 100
Feb 50
Mar 80
Apr 30
May 50
Jun 90
Jul 100
Aug 70
Sep 40
Oct 60
Nov 20
Dec 90
Open in:

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);
}
1
2
3
4
5
6
7
8
9
10
11
12

This works well with single datasets:

Colors Example #4
Month Progress
Jan 60
Feb 70
Mar 80
Apr 90
May 100
Jun 100
Jul 90
Aug 80
Sep 70
Oct 60
Open in:

And with multiple datasets:

Colors Example #5
Year Progress
1900 60 70 80 90 100 100 90 80 70 60
2000 60 70 80 90 100 100 90 80 70 60
Open in:

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://.../");
}
1
2
3
Colors Example #6
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

# Use Gradients

Set gradients on any CSS variables mentioned above.

#my-chart .column,
#my-chart .area {
  --color: linear-gradient(red, yellow);
}
1
2
3
4
Colors Example #7
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:
Colors Example #8
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

# 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);
}
1
2
3
4
5
6
7
8
9
Colors Example #9
Month Progress
Jan 48
Feb 40
Mar 36
Apr 38
May 48
Jun 60
Jul 78
Aug 88
Sep 96
Oct 100
Nov 97
Dec 84
Open in:

# 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Create CSS patterns using repeating gradients.

Colors Example #10
Month Progress
Jan 100
Feb 90
Mar 100
Apr 90
May 100
Jun 90
Jul 100
Aug 90
Sep 100
Oct 90
Open in:

# 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;
}
1
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:

Colors Example #11
Month Progress
Jan 33
Feb 66
Mar 100
Apr 33
May 66
Jun 100
Jul 33
Aug 66
Sep 100
Oct 33
Nov 66
Dec 100
Open in:

Multiple datasets with three repeating colors:

Colors Example #12
Year Progress
1900 60 70 80 90 100 100 90 80 70 60
2000 60 70 80 90 100 100 90 80 70 60
Open in: