Charts.css

# 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>
1
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.0; --size: 0.4"> <span class="data"> $ 40K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.4; --size: 0.2"> <span class="data"> $ 20K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.2; --size: 0.6"> <span class="data"> $ 60K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.6; --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>
  </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
25
26
27
Line Example #1
$ 40K
$ 20K
$ 60K
$ 40K
$ 80K
$ 60K
$ 100K
Open in:

# 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;
}
1
2
3
4
5
<table class="charts-css line" id="my-chart">
  ...
</table>
1
2
3
Line Example #2
Open in:

# 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>
1
2
3
Line Example #3
Open in:

# 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>
1
2
3
4
Descriptive Chart Heading
Open in:

# Multiple Datasets

You can use a single dataset (one <td> tag in each <tr>).


 


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

Or multiple datasets (many <td> tags in <tr>).


 
 
 


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

But when using multiple datasets you should add the .multiple class.

<table class="charts-css line multiple">
  ...
</table>
1
2
3
Line Example #5
30 40 70 100
10 60 90 70
30 40 80 90
10 60 80 90
30 40 100 70
Open in:

# 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>
1
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>
1
2
3
Line Example #6
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Line Example #7
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

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;
}
1
2
3
Line Example #8
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Line Example #9
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# 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>
1
2
3
Line Example #10
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Line Example #11
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 inside the chart itself, use the .show-*-secondary-axes class.

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

# 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>
1
2
3
Line Example #14
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Line Example #15
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

# 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>
1
2
3
Line Example #16
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:
Line Example #17
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Open in:

← Radial →