# Line
Line charts display raw data connected with a straight line.
# Usage
To visualize your data with an line chart, the main .charts-css
class should be followed by the .line
class.
<table class="charts-css line">
...
</table>
2
3
# Data
When you add data, you need to supply not only the data --size
variable but also the --start
variable that indicates the starting point.
<table class="charts-css line" id="my-chart">
<tbody>
<tr>
<td style="--start: 0.2; --size: 0.4"> <span class="data"> $ 40K </span> </td>
</tr>
<tr>
<td style="--start: 0.4; --size: 0.8"> <span class="data"> $ 80K </span> </td>
</tr>
<tr>
<td style="--start: 0.8; --size: 0.6"> <span class="data"> $ 60K </span> </td>
</tr>
<tr>
<td style="--start: 0.6; --size: 1.0"> <span class="data"> $ 100K </span> </td>
</tr>
<tr>
<td style="--start: 1.0; --size: 0.3"> <span class="data"> $ 30K </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
# Dimensions
To control the chart dimensions you can use regular CSS. You can use media queries to set different dimensions for smaller devices.
#my-chart.line {
height: 200px;
max-width: 400px;
margin: 0 auto;
}
2
3
4
5
<table class="charts-css line" id="my-chart">
...
</table>
2
3
# Orientation
You can control the chart orientation, or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages). Using the .reverse
class you can reverse the orientation.
<table class="charts-css line reverse">
...
</table>
2
3
# Heading
You can 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.
<table class="charts-css line show-heading">
<caption> Descriptive Chart Heading </caption>
...
</table>
2
3
4
# Multiple Datasets
You can use a single dataset (one <td>
tag in each <tr>
).
<tr>
<td> Data </td>
</tr>
2
3
Or multiple datasets (many <td>
tags in <tr>
).
<tr>
<td> Data </td>
<td> Data </td>
<td> Data </td>
</tr>
2
3
4
5
But when using multiple datasets you should add the .multiple
class.
<table class="charts-css line multiple">
...
</table>
2
3
# Labels
You can 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 the labels are hidden. To display the labels use the .show-labels
class.
<table class="charts-css line show-labels">
...
</table>
2
3
Some charts use long labels others use short ones. To customize the label size use the --labels-size
variable.
#my-chart.line {
--labels-size: 3rem;
}
2
3
# Axes
You can control the axes that will be displayed on the chart.
# Primary Axis
To add a primary axis to separate the labels from the chart itself use the .show-primary-axis
class.
<table class="charts-css line show-primary-axis">
...
</table>
2
3
# Secondary Axes
To add secondary axes, located inside the chart itself, use the .show-*-secondary-axes
class.
<table class="charts-css line show-4-secondary-axes">
...
</table>
2
3
# Data Axes
To add data axes which are auto-generated based on the amount of rows (<tr>
tags) you have. Use the .show-data-axes
class to add them.
<table class="charts-css line show-data-axes">
...
</table>
2
3
# Reverse Order
You can reverse the order of the elements without changing the HTML markup.
# Reverse Data Order
To reverse thr data order use the .reverse-data
class.
<table class="charts-css line reverse-data">
...
</table>
2
3