Charts.css

# Labels

Labels describe the data or the dataset along the chart primary axis.

# Add Labels

To add labels to the primary axis, use <th> heading tags. To mark them as a row heading add the scope="row" attribute.












 



 



 



 



 



 



 



 



 



 



 



 






<table class="charts-css column hide-data">

  <thead>
    <tr>
      <th scope="col"> Month </th>
      <th scope="col"> Progress </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> Jan </th>
      <td style="--size: 0.3;"> <span class="data"> 30 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Feb </th>
      <td style="--size: 0.5;"> <span class="data"> 50 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Mar </th>
      <td style="--size: 0.8;"> <span class="data"> 80 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Apr </th>
      <td style="--size: 1;"> <span class="data"> 100 </span> </td>
    </tr>
    <tr>
      <th scope="row"> May </th>
      <td style="--size: 0.65;"> <span class="data"> 65 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Jun </th>
      <td style="--size: 0.45;"> <span class="data"> 45 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Jul </th>
      <td style="--size: 0.15;"> <span class="data"> 15 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Aug </th>
      <td style="--size: 0.32;"> <span class="data"> 32 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Sep </th>
      <td style="--size: 0.6;"> <span class="data"> 60 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Oct </th>
      <td style="--size: 0.9;"> <span class="data"> 90 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Nov </th>
      <td style="--size: 0.55;"> <span class="data"> 55 </span> </td>
    </tr>
    <tr>
      <th scope="row"> Dec </th>
      <td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
    </tr>
  </tbody>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Labels Example #1
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:

# Show Labels

By default, labels are hidden. To display labels use the .show-labels class.

<table class="charts-css column hide-data show-labels">
  ..
</table>
1
2
3
Labels Example #2
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:

When using this class the framework will allocate space automatically for the labels at the expense of the chart data.

# Hide Specific Labels

To control which labels to hide, use .show-labels class on the main table to display all the labels and then use .hide-label class on specific <tr> or <th> elements.

 











 






<table class="charts-css column show-labels">

  <tbody>
    <tr>
      <th scope="row"> Label </th>
      <td> Data </td>
    </tr>
    <tr>
      <th scope="row"> Label </th>
      <td> Data </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label"> Label </th>
      <td> Data </td>
    </tr>
  </tbody>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Labels Example #3
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:

# Label Size

Some charts use long labels, others use short ones. To customize the label size use the --labels-size CSS variable.

Custom label size for bar charts:


 


#my-chart .bar {
  --labels-size: 200px;
}
1
2
3

Custom label size for column charts:


 


#my-chart .column {
  --labels-size: 4rem;
}
1
2
3
Labels Example #4
Day Forecast
Mon
28°
Tue
25°
Wed
23°
Thu
16°
Fri
14°
Sat
18°
Sun
22°
Open in:

# Align Labels

Lastly, play with the label text alignment. Use the following classes:

  • labels-align-block-start
  • labels-align-block-center
  • labels-align-block-end
  • labels-align-inline-start
  • labels-align-inline-center
  • labels-align-inline-end

The alignment class uses logical properties naming conventions to keep the chart flow-relative based on the page writing directions.

 



<table class="charts-css column multiple show-labels labels-align-inline-start">
  ...
</table>
1
2
3
Labels Example #5
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2010 10 30 50 70 90
2020 20 40 60 80 100
Open in:
Labels Example #6
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2010 10 30 50 70 90
2020 20 40 60 80 100
Open in:

To override a specific label, use the --labels-align-inline or --labels-align-block variables on <th> or <tr> elements.

For example, use labels-align-block-end to align all the labels to the end on the block axis, and align a specific label to the start using --labels-align-block: start style.

 











 










<table class="charts-css column show-labels labels-align-block-end">

  <tbody>
    <tr>
      <th scope="row"> Label </th>
      <td> Data </td>
    </tr>
    <tr>
      <th scope="row"> Label </th>
      <td> Data </td>
    </tr>
    <tr>
      <th scope="row" style="--labels-align-block: start"> Label </th>
      <td> Data </td>
    </tr>
    <tr>
      <th scope="row"> Label </th>
      <td> Data </td>
    </tr>
  </tbody>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Labels Example #3
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:

← Axes →