Charts.css

# Usage

Charts.css visualize data by applying CSS classes on HTML tags. The data is structured using semantic HTML tags and styled using CSS classes which change the visual representation displayed to the end user.

# Data Table

The raw data placed in the document as HTML <table> tag, making it visible to search engines and screen readers.

Example data table:

<table>

  <caption> 2016 Summer Olympics Medal Table </caption>

  <thead>
    <tr>
      <th scope="col"> Country </th>
      <th scope="col"> Gold </th>
      <th scope="col"> Silver </th>
      <th scope="col"> Bronze </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> USA </th>
      <td> 46 </td>
      <td> 37 </td>
      <td> 38 </td>
    </tr>
    <tr>
      <th scope="row"> GBR </th>
      <td> 27 </td>
      <td> 23 </td>
      <td> 17 </td>
    </tr>
    <tr>
      <th scope="row"> CHN </th>
      <td> 26 </td>
      <td> 18 </td>
      <td> 26 </td>
    </tr>
  </tbody>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Result:

2016 Summer Olympics Medal Table
Country Gold Silver Bronze
USA 46 37 38
GBR 27 23 17
CHN 26 18 26

# Apply Charts.css

To display the data as a chart, first you need to add the .charts-css class to the <table> element:

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

# Chart Types

Next, choose one of the chart types and apply it on your data table using a simple CSS class. For example, add the .bar class to display the data as a bar chart:

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

# Component Classes

The framework offers many utility classes to enhance chart visibility. For example, you can reverse the order of the data without changing the markup. You can add all kind of axes to your chart. You can add tooltip describing the data. And much more.

<table class="charts-css bar hide-data show-primary-axis show-data-axes">
  ...
</table>
1
2
3

If your class becomes longer then expected and unreadable, you can use class grouping (opens new window) technique introduced by Andy Bell.

<table class="charts-css [ line ] [ multiple ] [ show-labels labels-align-start ] [ hide-data reverse-data data-spacing-5 ] [ show-primary-axis show-data-axes ] ">
  ...
</table>
1
2
3

# Custom Styling

The best advantage the framework has to offer is the ability to customize the visibility using CSS. You can select any HTML element inside the <table> and add your own CSS rules.

You can use either an id or a class for your custom styles. In any case, you need to know basic concepts like CSS specificity, and know when one rule overrides the other.

 



<table class="charts-css bar ..." id="my-chart">
  ...
</table>
1
2
3
#my-chart {
  ...
}
1
2
3

Or with a wrapper element:

 





<div id="my-chart">
  <table class="charts-css bar ...">
    ...
  </table>
</div>
1
2
3
4
5
#my-chart .bar {
  ...
}
1
2
3

To demonstrate how easy it is, check out our basic examples for creating 3D effects, motion effects and animations. It's amazing what you can do with a few lines of CSS.

← Components →