# Bar

Bar charts display raw data as horizontal bars.

# Usage

To visualize your data with a bar chart, the main .charts-css class should be followed by the .bar class.

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

1
2
3

# Wrapper

It's recommended to wrap the chart with a wrapper element. This element is used not only to hold the chart components, but also for scoping the styles.

<div id="my-chart">

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

  <ul class="charts-css legend">
    ...
  </ul>

</div>

1
2
3
4
5
6
7
8
9
10
11

To set the chart dimensions, add some CSS:

#my-chart {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
#my-chart .bar {
  ...
}
#my-chart .legend {
  ...
}

1
2
3
4
5
6
7
8
9
10
11

# Heading

Add a heading to your chart using the <caption> tag. By default, the heading is hidden. To display the heading use the .show-heading class.

<div id="my-chart">

  <table class="charts-css bar show-heading">
    <caption> Descriptive Bar Chart Heading </caption>
    ...
  </table>

</div>

1
2
3
4
5
6
7
8

# Data

To transform HTML tables into charts, you need to provide data. The chart requires unitless numbers, between 0 to 1.

<tr>
  <td> $ 40K </td>
</tr>

1
2
3

Use the --size variable to set the data.

<tr>
  <td style="--size: 0.4"> $ 40K </td>
</tr>

1
2
3

To help the framework identify the text, wrap the content with a <span class="data"> tag.

<tr>
  <td style="--size: 0.4"> <span class="data"> $ 40K </span> </td>
</tr>

1
2
3

Bar Example #1
$ 20K
$ 40K
$ 60K
$ 80K
$ 100K

Open in:

# Multiple Datasets

Single dataset have one <td> tag in each <tr>.

<tr>
  <td> Data </td>
</tr>

1
2
3

Multiple datasets have several <td> tags in each <tr>.

<tr>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>

1
2
3
4
5

As any other data item, they should have the relevant structure.

<tr>
  <td style="--size: 0.2"> <span class="data"> Data </span> </td>
  <td style="--size: 0.4"> <span class="data"> Data </span> </td>
  <td style="--size: 0.6"> <span class="data"> Data </span> </td>
</tr>

1
2
3
4
5

When using multiple datasets you should add the .multiple class to let the framework apply different styles.

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

1
2
3

Bar Example #2
$ 20K
$ 40K
$ 60K
$ 80K
$ 100K

Open in:

Bar Example #3
$ 20K	$ 40K	$ 600K	$ 80K	$ 100K
$ 20K	$ 40K	$ 60K	$ 80K	$ 100K

Open in:

# Labels

Add labels to your data and control the labels' positions and size. Labels added using <th> tag inside the <tr>.

<tr>
  <th scope="row"> Label </th>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>

1
2
3
4
5
6

By default, labels are hidden. To display labels use the .show-labels class.

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

1
2
3

Bar Example #4
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #5
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Axes

Control the axes displayed on the chart.

# Primary Axis

To add a primary axis, separating the labels from the data, use the .show-primary-axis class.

<table class="charts-css bar show-primary-axis">
  ...
</table>

1
2
3

Bar Example #6
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #7
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Secondary Axes

To add secondary axes, located behind the chart data, use the .show-*-secondary-axes class. Use the .show-*-secondary-axes class. Replace the * in the class name, with any number 1-10. For example, to display four axes use the .show-4-secondary-axes class.

<table class="charts-css bar show-4-secondary-axes">
  ...
</table>

1
2
3

Bar Example #8
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #9
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Data Axes

Data axes are auto-generated based on the amount of rows (<tr> tags) in the chart. Add data axes using the .show-data-axes class.

<table class="charts-css bar show-data-axes">
  ...
</table>

1
2
3

Bar Example #10
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #11
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Spacing

Control the space between the data items and the datasets.

# Data Spacing

To add space between data items use the .data-spacing-* class.

<table class="charts-css bar data-spacing-10">
  ...
</table>

1
2
3

Bar Example #12
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #13
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Datasets Spacing

To add space between data items use the .datasets-spacing-* class.

<table class="charts-css bar multiple datasets-spacing-10">
  ...
</table>

1
2
3

Bar Example #14
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

Bar Example #15
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

# Orientation

Control the chart orientation, or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).

# Reverse

Use the .reverse class to reverse the orientation.

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

1
2
3

Bar Example #16
2016
2017
2018
2019
2020

Open in:

Bar Example #17
2016
2017
2018
2019
2020

Open in:

# Reverse Labels

Use the .reverse-labels class to reverse the labels position.

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

1
2
3

Bar Example #18
2016
2017
2018
2019
2020

Open in:

Bar Example #19
2016
2017
2018
2019
2020

Open in:

# Reverse Data

To reverse the data order use the .reverse-data class.

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

1
2
3

Bar Example #20
Year	Progress
2016
2017
2018
2019
2020

Open in:

Bar Example #21
Year	Progress
2016
2017
2018
2019
2020

Open in:

# Reverse Datasets

To reverse the datasets order use the .reverse-datasets class.

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

1
2
3

Bar Example #22
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

Bar Example #23
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

# Reverse Data & Datasets

Combine the two classes to reverse the data order and the datasets order.

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

1
2
3

Bar Example #24
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

Bar Example #25
Year	Progress 1	Progress 2	Progress 3	Progress 4	Progress 5
2000
2020

Open in:

← Charts Column →