# Orientation

The orientation sets the direction of the chart components without changing the HTML markup.

# Orientation System

The orientation system is a core functionality which helps you reorder chart elements with simple CSS utility classes.

# Reordering Elements

Generally speaking, Charts.css doesn't deal with data - it only styles the data by positioning different HTML elements.

To reorder elements you can simply change the HTML table structure. However, with large datasets it requires a lot of manual work. In these cases, Charts.css offers CSS utility classes that change the elements order without changing the HTML markup.

# Orientation Classes

The orientation system supports the following classes:

  • .reverse - Reverse the general direction of the chart.
  • .reverse-labels - Reverse the labels position.
  • .reverse-data - Reverse the order of the data items, when using a single dataset.
  • .reverse-datasets - Reverse the order of the data items, when using multiple datasets.

Charts may combine multiple orientation classes.

# Reverse Orientation

Each chart has an initial orientation. Column charts display data from top to bottom. Bar charts display data from left to right in LTR languages and from right to left in RTL languages.

Reverse the initial orientation of any chart using the .reverse class.

No matter what writing direction the page uses - left-to-right (LTR), right-to-left (RTL) or top-to-bottom (TTB) - the .reverse class will reverse the initial orientation of the chart.

<table class="charts-css bar reverse">
  ...
</table>
1
2
3

Bar chart with a regular orientation and a reverse orientation:

Bar chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed bar chart
Year Progress
2016
2017
2018
2019
2020
Open in:

Column chart with a regular orientation and a reverse orientation:

Column chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed column chart
Year Progress
2016
2017
2018
2019
2020
Open in:

Area chart with a regular orientation and a reverse orientation:

Area chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed area chart
Year Progress
2016
2017
2018
2019
2020
Open in:

# Reverse Labels

Labels positioned along the chart primary axis. The primary axis depends on the page writing direction and whether the chart orientation is reversed or not.

Charts with reversed labels position the label where the data ends, rather where the data starts.

To reverse the initial orientation of the labels use the .reverse-labels class.

<table class="charts-css bar reverse-labels">
  ...
</table>
1
2
3

Bar chart with a combination of reversed orientation and reversed labels:

Bar chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed bar chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Bar chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed bar chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:

Column chart with a combination of reversed orientation and reversed labels:

Column chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed column chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Column chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed column chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:

Area chart with a combination of reversed orientation and reversed labels:

Area chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed area chart
Year Progress
2016
2017
2018
2019
2020
Open in:
Area chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:
Reversed area chart with reversed labels
Year Progress
2016
2017
2018
2019
2020
Open in:

# Population Pyramid Chart

With the help of .reverse-labels class, it's now possible to create a "Population Pyramid Chart" (also known as "Age Structure Diagram"). By combining two bar charts with reversed labels side by side, one with regular and the other with reversed orientation, you can get a beautiful pyramid chart.

<div id="population-pyramid-chart">

  <table class="charts-css bar show-labels reverse-labels reverse male">
    ...
  </table>

  <table class="charts-css bar show-labels reverse-labels female">
    ...
  </table>

</div>
1
2
3
4
5
6
7
8
9
10
11
#population-pyramid-chart {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}
#population-pyramid-chart .bar {
  --aspect-ratio: 1 / 1;
}
#population-pyramid-chart .bar.male {
  --color: rgba(100, 210, 80, .75);
}
#population-pyramid-chart .bar.female {
  --color: rgba(240, 50, 50, .75);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Male population
Age Population
85+ 1.0%
75-84 2.0%
65-74 3.7%
55-64 4.2%
45-54 5.4%
35-44 6.2%
25-34 6.5%
15-24 7.4%
5-14 8.9%
0-4 4.8%
Female population
Age Population
85+ 0.7%
75-84 1.6%
65-74 3.2%
55-64 4.0%
45-54 5.3%
35-44 6.4%
25-34 6.7%
15-24 7.7%
5-14 9.4%
0-4 5.0%
Open in:

To make it even more informative, each age group can be splitted to sub categories and displayed as a stacked chart.

Male population
Age Population
85+ 0.02% 0.00%
75-84 0.07% 0.02%
65-74 2.2% 0.5%
55-64 3.5% 0.7%
45-54 5.4% 1.0%
35-44 8.4% 0.9%
25-34 8.0% 0.5%
15-24 6.0% 0.6%
5-14 7.3% 1.0%
0-4 3.0% 0.8%
Female population
Age Population
85+ 0.3% 0.0%
75-84 0.9% 0.2%
65-74 2.3% 0.4%
55-64 3.7% 0.6%
45-54 5.3% 1.0%
35-44 8.0% 1.2%
25-34 7.5% 0.8%
15-24 5.3% 1.0%
5-14 7.0% 0.9%
0-4 3.0% 0.6%
Open in:

# Reverse Data Order

When using a single dataset (one <td> in each <tr>), use the .reverse-data class to reverse the order of the data items.

<table class="charts-css column reverse-data">
  ...
</table>
1
2
3
Column chart
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
Open in:
Reversed data column chart
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
Open in:

# Reverse Datasets Order

When using multiple datasets (several <td> elements in each <tr>), use the .reverse-datasets class to reverse the order of the datasets.

<table class="charts-css column reverse-datasets">
  ...
</table>
1
2
3
Column chart
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2010 90 60 40 70 100
2020 20 40 60 80 100
Open in:
Reversed datasets column chart
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2010 90 60 40 70 100
2020 20 40 60 80 100
Open in:

# Reverse Data & Datasets Order

Combine the two classes to reverse the data order and the datasets order.

<table class="charts-css column reverse-data reverse-datasets">
  ...
</table>
1
2
3
Column chart
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2010 90 60 40 70 100
2020 20 40 60 80 100
Open in:
Reversed data & datasets column chart
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2010 90 60 40 70 100
2020 20 40 60 80 100
Open in: