# Bar

Bar charts display raw data as horizontal bars.

# Usage

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

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

# Dimensions

To control the chart dimensions you can use regular CSS. You can use media queries to set different dimensions for smaller devices.

#my-chart.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}
1
2
3
4
5
<table class="charts-css bar" id="my-chart">
  ...
</table>
1
2
3
Bar Example #1
Open in:

# Orientation

You can control the chart orientation, or direction. The initial orientation depends on your language writing direction. Using the .reverse class you can reverse the orientation.

<table class="charts-css bar reverse">
  ...
</table>
1
2
3
Bar Example #2
Open in:

# Heading

You can 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.

<table class="charts-css bar show-heading">
  <caption> Descriptive Chart Heading </caption>
  ...
</table>
1
2
3
4
Descriptive Chart Heading
Open in:

# Multiple Datasets

You can use a single dataset (one <td> tag in each <td>).


 


<tr>
  <td> Data </td>
</tr>
1
2
3

Or multiple datasets (many <td> tags in <td>).


 
 
 


<tr>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>
1
2
3
4
5

But when using multiple datasets you should add the .multiple class.

<table class="charts-css bar multiple">
  ...
</table>
1
2
3
Bar Example #4
Open in:
Bar Example #5
Open in:

# Labels

You can 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 the labels are hidden. To display the labels use the .show-labels class.

<table class="charts-css bar show-labels">
  ...
</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:

Some charts use long labels others use short ones. To customize the label size use the --labels-size variable.

#my-chart.bar {
  --labels-size: 50px;
}
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:

# Axes

You can control the axes that will be displayed on the chart.

# Primary Axis

To add a primary axis to separate the labels from the chart itself use the .show-primary-axis class.

<table class="charts-css bar show-primary-axis">
  ...
</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:

# Secondary Axes

To add secondary axes, located inside the chart itself, use the .show-*-secondary-axes class.

<table class="charts-css bar show-4-secondary-axes">
  ...
</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:

# Data Axes

To add data axes which are auto-generated based on the amount of rows (<tr> tags) you have. Use the .show-data-axes class to add them.

<table class="charts-css bar show-data-axes">
  ...
</table>
1
2
3
Bar Example #14
Year Progress
2016
2017
2018
2019
2020
Open in:
Bar Example #15
Year Progress
2016
2017
2018
2019
2020
Open in:

# Spacing

You can control the space between the data items and between the datasets.

# Data Spacing

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

<table class="charts-css bar data-spacing-10">
  ...
</table>
1
2
3
Bar Example #16
Year Progress
2016
2017
2018
2019
2020
Open in:
Bar Example #17
Year Progress
2016
2017
2018
2019
2020
Open in:

# Datasets Spacing

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

<table class="charts-css bar multiple datasets-spacing-10">
  ...
</table>
1
2
3
Bar Example #18
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000
2020
Open in:
Bar Example #19
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000
2020
Open in:

# Reverse Order

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

# Reverse Data Order

To reverse thr 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 Order

To reverse 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 Order

You can combine the two classes to reverse data order and 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: