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>

Bar chart with a regular orientation and a reverse orientation:

Bar chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed bar chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Column chart with a regular orientation and a reverse orientation:

Column chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed column chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Area chart with a regular orientation and a reverse orientation:

Area chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-5 { width: 100%; max-width: 300px; margin: 0 auto; } #orientation-example-5 .area { --aspect-ratio: 16 / 9; }

Reversed area chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-6 { width: 100%; max-width: 300px; margin: 0 auto; } #orientation-example-6 .area { --aspect-ratio: 16 / 9; }

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>

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

Bar chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed bar chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Bar chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed bar chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

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

Column chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed column chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Column chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Reversed column chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

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

Area chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-15 { width: 100%; max-width: 300px; margin: 0 auto; } #orientation-example-15 .area { --aspect-ratio: 16 / 9; }

Reversed area chart

Year	Progress
2016
2017
2018
2019
2020

Open in:

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

Area chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-17 { width: 100%; max-width: 300px; margin: 0 auto; } #orientation-example-17 .area { --aspect-ratio: 16 / 9; }

Reversed area chart with reversed labels

Year	Progress
2016
2017
2018
2019
2020

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-18 { width: 100%; max-width: 300px; margin: 0 auto; } #orientation-example-18 .area { --aspect-ratio: 16 / 9; }

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>

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

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-19 { width: 100%; max-width: 600px; margin: 0 auto; display: flex; } #orientation-example-19 .bar { --aspect-ratio: 1 / 1; } #orientation-example-19 .bar.male { --color: rgba(100, 210, 80, .75); } #orientation-example-19 .bar.female { --color: rgba(240, 50, 50, .75); }

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-20 { width: 100%; max-width: 600px; margin: 0 auto; display: flex; } #orientation-example-20 .bar { --aspect-ratio: 1 / 1; } #orientation-example-20 .bar.male { --color-1: rgba(90, 165, 255, .75); --color-2: rgba(90, 165, 255, .5); } #orientation-example-20 .bar.female { --color-1: rgba(255, 180, 50, .75); --color-2: rgba(255, 180, 50, .5); }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-21 { width: 100%; max-width: 600px; margin: 0 auto; }

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-22 { width: 100%; max-width: 600px; margin: 0 auto; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-23 { width: 100%; max-width: 600px; margin: 0 auto; }

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-24 { width: 100%; max-width: 600px; margin: 0 auto; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-25 { width: 100%; max-width: 600px; margin: 0 auto; }

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #orientation-example-26 { width: 100%; max-width: 600px; margin: 0 auto; }