# Datasets
Datasets are different series of data.
# Add Datasets
To add multiple datasets simply add more than one <td>
tag to each of your <tr>
tags.
<table class="charts-css column">
<caption> Front End Developer Salary </caption>
<tbody>
<tr>
<th scope="row"> Asia </th>
<td style="--size: calc( 20 / 100 );"> <span class="data"> $20K </span> </td>
<td style="--size: calc( 30 / 100 );"> <span class="data"> $30K </span> </td>
<td style="--size: calc( 40 / 100 );"> <span class="data"> $40K </span> </td>
<td style="--size: calc( 50 / 100 );"> <span class="data"> $50K </span> </td>
<td style="--size: calc( 75 / 100 );"> <span class="data"> $75K </span> </td>
</tr>
<tr>
<th scope="row"> Europe </th>
<td style="--size: calc( 40 / 100 );"> <span class="data"> $40K </span> </td>
<td style="--size: calc( 60 / 100 );"> <span class="data"> $60K </span> </td>
<td style="--size: calc( 75 / 100 );"> <span class="data"> $75K </span> </td>
<td style="--size: calc( 90 / 100 );"> <span class="data"> $90K </span> </td>
<td style="--size: calc( 100 / 100 );"> <span class="data"> $100K </span> </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
It is also recommended to add a legend and labels to describe the datasets.
<ul class="charts-css legend">
<li> 1st year </li>
<li> 2nd year </li>
<li> 3rd year </li>
<li> 4th year </li>
<li> 5th year </li>
</ul>
2
3
4
5
6
7
The result:
Asia | $20K | $30K | $40K | $50K | $75K |
---|---|---|---|---|---|
Europe | $40K | $60K | $75K | $90K | $100K |
- 1st year
- 2nd year
- 3rd year
- 4th year
- 5th year
As you can see we have an issue with colors in our datasets. Continue reading to see how to solve the issue.
# Datasets Colors
By default, Chart.css assumes you use a single dataset. The framework uses different colors for each data record.
On charts with multiple datasets you should add the .multiple
class to make the framework use different color for each dataset.
<table class="charts-css column multiple">
...
</table>
2
3
- 1st year
- 2nd year
- 3rd year
- 4th year
- 5th year
Asia | $20K | $30K | $40K | $50K | $75K |
---|---|---|---|---|---|
Europe | $40K | $60K | $75K | $90K | $100K |
# Datasets Display Alternatives
You can display multiple datasets in two ways:
- 1st year
- 2nd year
- 3rd year
- 4th year
- 5th year
Asia | $20K | $30K | $40K | $50K | $75K |
---|---|---|---|---|---|
Europe | $40K | $60K | $75K | $90K | $100K |
Or:
- Asia
- Europe
1st year | $20K | $40K |
---|---|---|
2nd year | $30K | $60K |
3rd year | $40K | $75K |
4th year | $50K | $90K |
5th year | $75K | $100K |
The same data, with multiple datasets, displayed in two different ways.
← Data Orientation →