# Colors

Chart colors help end-users to distinguish between data items and datasets.

# 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 {
  --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 specific element color, we need to apply the --color variable on a specific <td> tag. This way the inheritance rules apply only on 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 be also applied on all the <td> elements.



 



 



 


<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 an acceptable method but with large tables it's a not a recommended practice. Keep reading to learn how to change global colors.

# Change Global Colors

The framework has a set of 10 default color repeating themselves. You can override those colors to create your own custom theme.

#my-chart {
  --color-1: rgba(230, 30, 30, 0.2);
  --color-2: rgba(230, 30, 30, 0.4);
  --color-3: rgba(230, 30, 30, 0.5);
  --color-4: rgba(230, 30, 30, 0.6);
  --color-5: rgba(230, 30, 30, 1.0);
  --color-6: rgba(230, 30, 30, 1.0);
  --color-7: rgba(230, 30, 30, 0.8);
  --color-8: rgba(230, 30, 30, 0.6);
  --color-9: rgba(230, 30, 30, 0.4);
  --color-10: rgba(230, 30, 30, 0.2);
}
1
2
3
4
5
6
7
8
9
10
11
12

It 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 color repeating themselves. You can create your own custom color system based on 3 or 5 or even 20 repeating colors.

# Custom Images

External images can be places instead of the color.

#my-chart {
  --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

You can set gradients on any CSS variables mentioned above.

#my-chart {
  --color: linear-gradient(red, yellow);
}
1
2
3
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 Patterns

You can even use custom CSS patterns.

#my-chart {
  --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

Repeating gradients will do the trick.

Colors Example #9
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.multiple tbody tr td:nth-of-type(3n + 1) {
  background-color: red;
}
#my-chart.multiple tbody tr td:nth-of-type(3n + 2) {
  background-color: green;
}
#my-chart.multiple tbody tr td:nth-of-type(3n + 3) {
  background-color: blue;
}

/* Single Dataset */
#my-chart:not(.multiple) tbody tr:nth-of-type(3n + 1) td {
  background-color: red;
}
#my-chart:not(.multiple) tbody tr:nth-of-type(3n + 2) td {
  background-color: green;
}
#my-chart: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

Three repeating colors in a single datasets table:

Colors Example #10
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:

Three repeating colors in a multiple datasets table:

Colors Example #11
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: