# Basic Styling
Charts are styled using regular CSS rules. You can apply custom styles on any HTML element or chart layer inside the <table> element.
# Style Specific Elements
To style specific elements, use any method supported by CSS.
# CSS Selectors
Use CSS :nth-of-type() pseudo-class to match the nth data CSS based on the position among siblings.
<tbody>
<tr>
<td> 20 </td>
</tr>
<tr>
<td> 40 </td>
</tr>
<tr>
<td> 60 </td>
</tr>
<tbody>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#my-chart tbody tr:nth-of-type(2) td {
font-weight: bold;
}
1
2
3
2
3
# CSS Classes
Use custom classes on the element you want to style, and apply custom styles only on that CSS class.
<tr>
<td> 20 </td>
<td> 40 </td>
<td> 60 </td>
<td> 80 </td>
<td class="highlight"> 100 </td>
</tr>
1
2
3
4
5
6
7
2
3
4
5
6
7
.highlight {
font-weight: bold;
}
1
2
3
2
3
# Style Chart Elements
To style specific chart elements or layers, use one of the HTML tag - <caption>, <tbody>, <tr>, <th> or <td>.
# Colors
To control the color of different elements, simply use element selector.
/* Heading */
#my-chart caption {
color: red;
}
/* Labels */
#my-chart tbody th {
color: green;
}
/* Data */
#my-chart tbody td {
color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Backgrounds
To control the backgrounds of different elements, use one of the following selectors.
/* Heading */
#my-chart caption {
background-color: hotpink;
color: white;
}
/* Chart */
#my-chart tbody {
background-color: beige;
color: black;
}
/* Labels */
#my-chart tbody th {
background-color: deepskyblue;
color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17