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

Chart.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>

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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;
}

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>

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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;
}

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>

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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 { height: 200px; max-width: 300px; margin: 0 auto; }

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;
}