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

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>

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

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

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; grid-template-rows: 250px 50px; grid-template-areas: "data-axis chart" "primary-axis primary-axis"; background-color: #eee; width: 650px; } #axes-example-13 > table { grid-area: chart; } #axes-example-13 > .primary-axis { grid-area: primary-axis; } #axes-example-13 > .data-axis { grid-area: data-axis; writing-mode: tb-rl; transform: rotateZ(180deg); }