Charts.css

# Spacing

Spacing refers to the space between the data items and between the datasets.

# Add Data Spacing

When using a single datasets table, sometimes we want to add space between the items. Use the .data-spacing-* class to add spacing to the data.

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

Note that it adds paddings to <tr> elements.

Spacing 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:

# Add Dataset Spacing

When using a multiple datasets, we can use the .datasets-spacing-* class to add spacing between datasets.

<table class="charts-css column multiple data-spacing-20 datasets-spacing-4">
  ...
</table>
1
2
3

Note that it adds margins to <td> elements.

Spacing 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 Order →