# 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>
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:
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>
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>
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>
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>
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>
2
3
#my-chart {
...
}
2
3
Or with a wrapper element:
<div id="my-chart">
<table class="charts-css bar ...">
...
</table>
</div>
2
3
4
5
#my-chart .bar {
...
}
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.