# 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>
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>
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 {
...
}
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>
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>
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>
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>
2
3
# Multiple Datasets
Single dataset have one <td> tag in each <tr>.
<tr>
<td> Data </td>
</tr>
2
3
Multiple datasets have several <td> tags in each <tr>.
<tr>
<td> Data </td>
<td> Data </td>
<td> Data </td>
</tr>
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>
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>
2
3
# 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>
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>
2
3
# 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>
2
3
# 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>
2
3
# 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>
2
3
# 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>
2
3
# Reverse Labels
Use the .reverse-labels class to reverse the labels position.
<table class="charts-css area reverse-labels">
...
</table>
2
3
# Reverse Data
To reverse the data order use the .reverse-data class.
<table class="charts-css area reverse-data">
...
</table>
2
3