Charts.css

# Datasets

Datasets are different series of data displayed in the chart.

# Add Datasets

To add multiple datasets, simply add more than one <td> tag to each of the <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

We also recommend adding legends 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 this issue.

# Dataset Colors

By default, Charts.css assumes you are using 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 a 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:

# Dataset Display Alternatives

Multiple datasets can display the same data in two different ways.

The first method uses two <tr> elements, each containing five <td> elements:

  • 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:

While the second method uses five <tr> elements, each containing two <td> elements:

  • 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:

← Data Position →