Charts.css

# 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>
1
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>
1
2
3
4
5
6
7

The result:

Front End Developer Salary
Asia $20K $30K $40K $50K $75K
Europe $40K $60K $75K $90K $100K
  • 1st year
  • 2nd year
  • 3rd year
  • 4th year
  • 5th year
Open in:

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, Charts.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>
1
2
3
  • 1st year
  • 2nd year
  • 3rd year
  • 4th year
  • 5th year
Front End Developer Salary
Asia $20K $30K $40K $50K $75K
Europe $40K $60K $75K $90K $100K
Open in:

# Datasets Display Alternatives

You can display multiple datasets in two ways:

  • 1st year
  • 2nd year
  • 3rd year
  • 4th year
  • 5th year
Front End Developer Salary
Asia $20K $30K $40K $50K $75K
Europe $40K $60K $75K $90K $100K
Open in:

Or:

  • Asia
  • Europe
Front End Developer Salary
1st year $20K $40K
2nd year $30K $60K
3rd year $40K $75K
4th year $50K $90K
5th year $75K $100K
Open in:

The same data, with multiple datasets, displayed in two different ways.

← Orientation →