# Reverse Order

You can reverse the order of the elements without changing the HTML markup.

# Reordering Data

Generally speaking, the framework doesn't deal with data - it only styles the data.

But in some unique cases you don't have access to the HTML markup. In other cases you receive an auto-generate HTML table from a backend server you have no control over.

You can use JS to alter the content, but Chart.css has two utility classes that can change displayed order without changing the HTML markup.

Note: Before changing content order using CSS, make sure there are no focusable elements (<button>, <a> etc.). It can be very confusing for users using a keyboard.

# Reverse Data Order

When using a single datasets, you can use the .reverse-data class to reverse the order of your data.

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

Original data:

Reverse Data Example #1
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:

Reverse Data Example #2
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 a multiple datasets, you can use the .reverse-datasets class to reverse the order of your datasets.

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

Original:

Reverse Datasets Example #1
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:

Reverse Datasets Example #2
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

You can combine the two classes to reverse data order and datasets order.

<table class="charts-css column reverse-data reverse-datasets">
  ...
</table>
1
2
3

Original:

Reverse Data & Datasets Example #1
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:

Reverse Data & Datasets Example #2
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: