Axes

Axes are used to visually categorize and measure the data inside the chart.

Axis System

The axis system is a separate component and contains several parts. By default, all axes are hidden, you choose which axes to display using the CSS utility classes.

Naming Conventions

One of the framework's philosophical guidelines is to use direction-free class names. This way it can support all languages out-of-the-box, including left-to-right (LTR), right-to-left (RTL) and top-to-bottom (TTB) languages.

Class like .show-x-axes and .show-y-axes were deprecated early-on in favor of .show-primary-axis, .show-*-secondary-axes and .show-data-axes.

Supported Axes

The Charts.css axis system supports 3 types of axes:

• Primary Axis (.show-primary-axis) is located at the point where the chart data starts.
• Secondary Axes (.show-*-secondary-axes) are located inside the chart itself, parallel to the primary axis.
• Data Axes (.show-data-axes) are located inside the chart itself, crossing the primary axis.

Add Primary Axis

The primary axis separates the labels from the data. To display the primary axis use the .show-primary-axis class.

Note that in a bar chart the primary axis is horizontal, while in a column chart it is vertical. If this changes the label's position (before or after), the primary axis will change its position too.

<table class="charts-css bar show-labels show-primary-axis">
  ...
</table>

Axes Example #1

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-1 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-1 .column { --aspect-ratio: 4 / 3; }

Axes Example #2

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-2 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-2 .column { --aspect-ratio: 4 / 3; }

Axes Example #3

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-3 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-3 .bar { --aspect-ratio: 4 / 3; }

Axes Example #4

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-4 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-4 .bar { --aspect-ratio: 4 / 3; }

To customize the primary axis use the following CSS variables:

#my-chart .bar {
  --primary-axis-color: rgba(0, 0, 0, 1);
  --primary-axis-style: solid;
  --primary-axis-width: 1px;
}

Add Secondary Axes

While the primary axis is located between the labels and the data, the secondary axes are located behind the chart data. The number of displayed axes can be controlled using the .show-*-secondary-axes class. Replace the * in the class name, with any number 1-10. For example, to display 4 secondary axes use the .show-4-secondary-axes class.

<table class="charts-css bar show-labels show-4-secondary-axes">
  ...
</table>

Axes Example #5

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-5 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-5 .column { --aspect-ratio: 4 / 3; }

Axes Example #6

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-6 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-6 .column { --aspect-ratio: 4 / 3; }

Axes Example #7

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-7 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-7 .bar { --aspect-ratio: 4 / 3; }

Axes Example #8

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-8 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-8 .bar { --aspect-ratio: 4 / 3; }

To customize the secondary axes use the following CSS variables:

#my-chart .bar {
  --secondary-axes-color: rgba(0, 0, 0, 1);
  --secondary-axes-style: solid;
  --secondary-axes-width: 1px;
}

Add Data Axes

Data axes are based on the amount of rows (<tr> tags), therefore data axes are auto-generated using the CSS border property. To display data axes use the .show-data-axes class.

<table class="charts-css bar show-labels show-data-axes">
  ...
</table>

Axes Example #9

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-9 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-9 .column { --aspect-ratio: 4 / 3; }

Axes Example #10

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-10 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-10 .column { --aspect-ratio: 4 / 3; }

Axes Example #11

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-11 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-11 .bar { --aspect-ratio: 4 / 3; }

Axes Example #12

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-12 { width: 100%; max-width: 300px; margin: 0 auto; } #axes-example-12 .bar { --aspect-ratio: 4 / 3; }

To customize the data axes use the following CSS variables:

#my-chart .bar {
  --data-axes-color: rgba(0, 0, 0, 0.15);
  --data-axes-style: solid;
  --data-axes-width: 1px;
}

Axis Title

To add informative axis titles use a wrapper div. The title will be placed outside the chart as the HTML <table>s don't have HTML tags that can be used.

<div id="my-chart">

  <table class="charts-css column"> ... </table>

  <div class="primary-axis"> Primary Axis Title </div>

  <div class="data-axis-1"> Data Axis Title 1 </div>

  <div class="data-axis-2"> Data Axis Title 2 </div>

</div>

#my-chart {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: 250px 50px;
  grid-template-areas:
    "data-axis-1 chart data-axis-2"
    ". primary-axis .";
}
#my-chart .column {
  grid-area: chart;
}
#my-chart .primary-axis {
  grid-area: primary-axis;
}
#my-chart .data-axis-1 {
  grid-area: data-axis-1;
  writing-mode: tb-rl;
  transform: rotateZ(180deg);
}
#my-chart .data-axis-2 {
  grid-area: data-axis-2;
  writing-mode: tb-rl;
  transform: rotateZ(360deg);
}

Axes Example #13

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

Month

Progress

Progress

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #axes-example-13 { display: grid; align-items: center; justify-items: center; grid-template-columns: 50px 1fr 50px; grid-template-rows: 250px 50px; grid-template-areas: "data-axis-1 chart data-axis-2" ". primary-axis ."; background-color: #eee; width: 100%; max-width: 650px; margin: 0 auto; } #axes-example-13 .column { grid-area: chart; } #axes-example-13 .primary-axis { grid-area: primary-axis; } #axes-example-13 .data-axis-1 { grid-area: data-axis-1; writing-mode: tb-rl; transform: rotateZ(180deg); } #axes-example-13 .data-axis-2 { grid-area: data-axis-2; writing-mode: tb-rl; transform: rotateZ(360deg); }