Charts.css

# Spacing

Spacing refers to the space between the data items and 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. Replace the * in the class name, with any number 1-20. For example, to display 5 pixels spacing use the .data-spacing-5 class.

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

Note that this adds padding 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 multiple datasets, we can use the .datasets-spacing-* class to add spacing between datasets. Replace the * in the class name, with any number 1-20. For example, to display 4 pixels spacing use the .datasets-spacing-4 class.

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

Note that this 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:

← Orientation →