Orientation

The orientation sets the general direction of the chart.

Reverse Orientation

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

You can reverse the initial orientation using the .reverse class.

It does not matter what's your language writing direction, left-to-right (LTR), right-to-left (RTL) or top-to-bottom (TTB), the .reverse class will reverse the initial orientation.

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

Bar chart with a regular orientation and a reverse orientation:

Orientation Example #1

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

Orientation Example #2

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

Column chart with a regular orientation and a reverse orientation:

Orientation Example #3

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

Orientation Example #4

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

Area chart with a regular orientation and a reverse orientation:

Orientation Example #5

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

Orientation Example #6

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