# Axes
Chart axes are used to visually categorize and measure the data.
# Axis System
The axis system was designed as 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 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
deprecated early-on in favor of .show-primary-axis
, .show-*-secondary-axes
and .show-data-axes
.
# Supported Axes
Charts.css axis system supports 3 types of axes:
- Primary Axis (
.show-primary-axis
) separating the labels from the chart. - Secondary Axes (
.show-*-secondary-axes
) located inside the chart itself, parallel to the primary axis. - Data Axes (
.show-data-axes
) located inside the chart itself, crossing the primary axis.
# Add Primary Axis
The primary axis separate the labels from the chart itself. To display the primary axis use the .show-primary-axis
class.
Note that in bar chart the primary axis is horizontal while in column chart it is vertical. If the change the labels position (before of after), the primary axis will change its position too.
<table class="charts-css bar show-labels show-primary-axis">
...
</table>
2
3
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
To customize the primary axis use the following CSS variables:
#my-chart {
--primary-axis-color: rgba(0, 0, 0, 1);
--primary-axis-style: solid;
--primary-axis-width: 1px;
}
2
3
4
5
# Add Secondary Axes
If the primary axis separate the labels from the chart, the secondary axes are located inside the chart itself. Therefor you can choose how much axes to display. Use the .show-*-secondary-axes
class.
<table class="charts-css bar show-labels show-4-secondary-axes">
...
</table>
2
3
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
To customize the secondary axes use the following CSS variables:
#my-chart {
--secondary-axes-color: rgba(0, 0, 0, 1);
--secondary-axes-style: solid;
--secondary-axes-width: 1px;
}
2
3
4
5
# Add Data Axes
Data axes are based on the amount of rows (<tr>
tags), therefor data axes are auto-generated using CSS border property. To display data axes use the .show-data-axes
class.
<table class="charts-css bar show-labels show-data-axes">
...
</table>
2
3
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
To customize the data axes use the following CSS variables:
#my-chart {
--data-axes-color: rgba(0, 0, 0, 0.15);
--data-axes-style: solid;
--data-axes-width: 1px;
}
2
3
4
5
# Axis Title
To add informative titles for your axes, you can use <table>
tags. To add axis titles we will use a wrapper div. The title will be outside of the chart because HTML <table>
s don't have HTML tags we can use.
<div id="my-chart">
<table class="charts-css column"> ... </table>
<div class="primary-axis"> Primary Axis Title </div>
<div class="data-axis"> Data Axis Title </div>
</div>
2
3
4
5
6
7
8
9
#my-chart {
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 50px 1fr;
grid-template-rows: 250px 50px;
grid-template-areas:
"data-axis chart"
". primary-axis";
}
#my-chart > table {
grid-area: chart;
}
#my-chart > .primary-axis {
grid-area: primary-axis;
}
#my-chart > .data-axis {
grid-area: data-axis;
writing-mode: tb-rl;
transform: rotateZ(180deg);
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 |