# 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>
2
3
Original data:
Reversed data:
# 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>
2
3
Original:
Reversed datasets:
# 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>
2
3
Original:
Reversed data & datasets: