# Area

Area charts display raw data with colors between axis and line.

# Usage

To visualize your data with an area chart, the main .charts-css class should be followed by the .area class.

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

# Wrapper

It's recommended to wrap the chart with a wrapper element. This element is used not only to hold the chart components, but also for scoping the styles.

<div id="my-chart">

  <table class="charts-css area">
    ...
  </table>

  <ul class="charts-css legend">
    ...
  </ul>

</div>
1
2
3
4
5
6
7
8
9
10
11

To set the chart dimensions, add some CSS:

#my-chart {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
#my-chart .area {
  ...
}
#my-chart .legend {
  ...
}
1
2
3
4
5
6
7
8
9
10
11

# Heading

Add a heading to your chart using the <caption> tag. By default, the heading is hidden. To display the heading use the .show-heading class.

<div id="my-chart">

  <table class="charts-css area show-heading">
    <caption> Descriptive Area Chart Heading </caption>
    ...
  </table>

</div>
1
2
3
4
5
6
7
8

# Data

To transform HTML tables into charts, you need to provide data. The chart requires unitless numbers, between 0 to 1.


 


<tr>
  <td> $ 40K </td>
</tr>
1
2
3

Use the --start and --end variables to set the data. While --end is equivalent to --size in other chart types, --start indicates the starting point.


 


<tr>
  <td style="--start: 0.2; --end: 0.4;"> $ 40K </td>
</tr>
1
2
3

To help the framework identify the text, wrap the content with a <span class="data"> tag.


 


<tr>
  <td style="--start: 0.2; --end: 0.4;"> <span class="data"> $ 40K </span> </td>
</tr>
1
2
3
Area Example #1
$ 40K
$ 80K
$ 60K
$ 100K
$ 30K
Open in:

# Multiple Datasets

Single dataset have one <td> tag in each <tr>.


 


<tr>
  <td> Data </td>
</tr>
1
2
3

Multiple datasets have several <td> tags in each <tr>.


 
 
 


<tr>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>
1
2
3
4
5

As any other data item, they should have the relevant structure.


 
 
 


<tr>
  <td style="--start: 0.2; --end: 0.4;"> <span class="data"> Data </span> </td>
  <td style="--start: 0.4; --end: 0.6;"> <span class="data"> Data </span> </td>
  <td style="--start: 0.6; --end: 0.8;"> <span class="data"> Data </span> </td>
</tr>
1
2
3
4
5

When using multiple datasets you should add the .multiple class to let the framework apply different styles.

<table class="charts-css area multiple">
  ...
</table>
1
2
3
Area Example #2
50 20 40
80 50 10
40 30 20
Open in:

# Labels

Add labels to your data and control the labels' positions and size. Labels added using <th> tag inside the <tr>


 





<tr>
  <th scope="row"> Label </th>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>
1
2
3
4
5
6

By default, labels are hidden. To display labels use the .show-labels class.

<table class="charts-css area show-labels">
  ...
</table>
1
2
3
Area Example #3
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #7
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Axes

Control the axes displayed on the chart.

# Primary Axis

To add a primary axis, separating the labels from the data, use the .show-primary-axis class.

<table class="charts-css area show-primary-axis">
  ...
</table>
1
2
3
Area Example #5
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #6
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Secondary Axes

To add secondary axes, located behind the chart data, use the .show-*-secondary-axes class. Use the .show-*-secondary-axes class. Replace the * in the class name, with any number 1-10. For example, to display four axes use the .show-4-secondary-axes class.

<table class="charts-css area show-4-secondary-axes">
  ...
</table>
1
2
3
Area Example #7
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #8
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Data Axes

Data axes are auto-generated based on the amount of columns (<tr> tags) in the chart. Add data axes using the .show-data-axes class.

<table class="charts-css area show-data-axes">
  ...
</table>
1
2
3
Area Example #9
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #10
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Orientation

Control the chart orientation, or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).

# Reverse

Use the .reverse class to reverse the orientation.

<table class="charts-css area reverse">
  ...
</table>
1
2
3
Area Example #11
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #12
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Reverse Labels

Use the .reverse-labels class to reverse the labels position.

<table class="charts-css area reverse-labels">
  ...
</table>
1
2
3
Area Example #13
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #14
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# Reverse Data

To reverse the data order use the .reverse-data class.

<table class="charts-css area reverse-data">
  ...
</table>
1
2
3
Area Example #15
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Area Example #16
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in: