# 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

Open in:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.layers-wrapper {
	position: relative;
	width: calc(100% * 0.42261826174); /* 100% * cos(65deg) */
	width: 75%;
    margin: 0 auto;
	aspect-ratio: 1 / 1;
}
.layers-wrapper .charts-css {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: 10px;
	animation-name: animate_layers;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	--labels-size: 40px !important;
	--heading-size: 40px !important;
}
.layers-wrapper .charts-css caption {
	padding: 10px !important;
}
.layers-wrapper .charts-css:nth-child(1) {
	--distance: -150px;
}
.layers-wrapper .charts-css:nth-child(2) {
	--distance: -50px;
}
.layers-wrapper .charts-css:nth-child(3) {
	--distance: 50px;
}
.layers-wrapper .charts-css:nth-child(4) {
	--distance: 150px;
}
.layers-wrapper:hover .charts-css {
	animation-play-state: paused;
}
@keyframes animate_layers {
	5% {
		transform: rotateX(0) rotate(0) translateZ(0);
		background-color: rgba(255, 255, 255, 0);
		box-shadow: none;
	}
	20%{
		transform: rotateX(65deg) rotate(45deg) translateZ(var(--distance));
		background-color: rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	}
	35% {
		transform: rotateX(65deg) rotate(-135deg) translateZ(var(--distance));
	}
	65% {
		transform: rotateX(65deg) rotate(135deg) translateZ(var(--distance));
	}
	80% {
		transform: rotateX(65deg) rotate(-45deg) translateZ(var(--distance));
		background-color: rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	}
	95% {
		transform: rotateX(0) rotate(0) translateZ(0);
		background-color: rgba(0, 0, 0, 0);
		box-shadow: none;
	}
}

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:

← Usage Components →