# Anatomy

The chart is made of several components grouped together. The structure built with a simple HTML <table> element. The different components are styled using CSS classes which are defined on the parent element but applied on inner HTML tags.

# Chart Layers

The following animation shows how the various elements are separated into layers:

2016
2017
2018
2019
2020
Chart Heading
Open in:

As it was previously mentioned, the layers are composed of different HTML elements that are nestled inside the <table> tag.

For example, the heading layer created from the <caption> tag, the data labels are created from the <th> tags, the data/dataset using <td> tags, and the axes layer is generated from the <tg> tags.

# HTML Table

The raw data is a basic HTML <table> tag visible to search engines and screen readers:

Chart Heading
Year Value
2016 20
2017 40
2018 60
2019 80
2020 100

# Chart Table

With the use of CSS classes, we can convert the raw data into a chart. These classes change the HTML structure's appearance.

<table class="charts-css column show-heading show-labels show-primary-axis show-4-secondary-axes show-data-axes data-spacing-15 hide-data">

  <caption> Chart Heading </caption>

  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Value </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th> 2016 </th>
      <td style="--size:0.2;"></td>
    </tr>
    <tr>
      <th> 2017 </th>
      <td style="--size:0.4;"></td>
    </tr>
    <tr>
      <th> 2018 </th>
      <td style="--size:0.6;"></td>
    </tr>
    <tr>
      <th> 2019 </th>
      <td style="--size:0.8;"></td>
    </tr>
    <tr>
      <th> 2020 </th>
      <td style="--size:1.0;"></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

The result is an <table> tag displayed to the user as a chart:

Chart Heading
Year Value
2016 20
2017 40
2018 60
2019 80
2020 100
Open in: