Commentary
The charts component has a variety of chart types that are used to show data series relationships. This component is inspired by chart.css an all CSS charts project. Charts.css is a more comprehensive and heavy weight approach to pure HTML and CSS based charts.
The Goldilocks-CSS charts add-on is a lighter weight subset designed to be used in administrative information presentation. Column, line graph, pie and donut charts are supported. Basic support for axes, captions, labels and legends are provided.
The starting point is a semantically correct HTML and accessible table tag. This means that a caption should
be included to help describe the chart. Column and row headings are strongly recommended as screen readers will
identify all headers and use them to make programmatic associations between those headers and the cells they relate to.
This helps to ensure that screen readers can provide the meaning of the values in the table cells.
Note also that table cell td should not be empty.
The charts component then uses CSS to take the table data and create a visual chart.
When using pure CSS, data value extraction and computation capability is limited. Consequently, we need to use
the style attribute to build local scoped variables that can then be used in the CSS file to calculate
the required controls. The variable --chart-max is used to normalize the data values to stay
within the range of [0,1]. The variable --column-count is used as divisor to adjust column width
for multi-column groups per category. Multi-columns groups in a category is achieved by adding rows of data
values (including the row heading).
Finally, each cell in a row uses the variable --td-cell to hold the numeric value to graph. This value is
divided by --chart-max and is used to adjust the height of the background in the cell. For connected values
(such as for line, pie and donut charts), a starting point --td-start is required to properly position each
data point. Note that for pie and donut charts, the --td-start sums the previous data values to rotate the
displayed segment around a circle.
The td table cell also holds a span element with the screen reader accessible data value.
Wrapping this data value in a span allows us to control the position of the data value above the
displayed column or rotated with the segment to be better visible.
A list of the available charts and their configuration is:
- Basic Chart - No Frills - Simplest column chart type
- Basic Line Chart - No Frills - Line Chart similar to basic column chart
- Basic Chart - All features activated - Simplest column chart with caption, labels and data values
- Basic Line Chart - All features activated - Line Chart similar to basic column chart with all features on.
- Chart - Multiple Columns - Chart with multiple columns per category
- Line Chart - Multiple data lines - Line Chart similar to multi-column chart with appropriate features on.
- Chart with multi-colour columns - Simplest column chart with caption, labels and data values
- Pie Chart - Alternative columnar display of data. Pie chart includes caption, data values and legend.
- Donut Chart - Alternative columnar display of data. Donut chart includes caption, data values and legend.
Usage
| Classes: | |
|---|---|
.charts-wrapper |
Defines the parent component and is a flexbox that wraps the data table and an optional legend.
The chart and legend are vertically centered.
|
.charts-column |
Shows the table as classic vertical columns. May include an optional caption and
optional thead for category labels. |
.charts-line |
Shows the table as classic horizontal lines. May include an optional caption and
optional thead for category labels. |
.charts-pie |
Shows the table as classic pie chart. May include an optional caption and
optional thead for category labels. |
.charts-donut |
Shows the table as classic pie chart with a hole in the middle. May include an optional
caption and optional thead for category labels. |
.unique-colors |
Optional chart modifier that provider a different color for each column in a basic chart. |
.show-caption |
Optional chart modifier that displays the chart caption at the top of the chart area. |
.show-labels |
Optional chart modifier that displays the labels from the table thead.
These labels are below the chart and are centered with the column. |
.show-grid |
Optional chart modifier that displays a y-axis grid around the table. The grid is fixed to be 5 steps or 20% steps. |
.multiple |
Optional column and line chart modifier that displays multiple columns in a category (label) area or multiple lines. |
.has-buffer |
Optional donut chart modifier that adds a buffer between segments to highlight the transition. |
| Variable Dependencies: | |
|---|---|
--chart-max |
Denominator for data values and is used normalize values to be in range of [0,1]. |
--td-value |
Extracts the column value and then gets normalized by --chart-max.
This sets the column vertical height for a data value in the chart. |
--column-count |
When using .multiple columns per category, set this variable to the number of rows.
This adjusts the width and spacing of the columns in a label category. |
| Dependencies: | |
|---|---|
| File: | charts.css |
| Variables: | --bg-component, --border-main, --gap-col, --main-color-complement-low, --padding-normal, --radius-comp, --radius-elem, --size-4, --text, --text-comp |
| Variables From HTML: | --chart-max, --column-count, --td-start, --td-value |
| Variables Internal: | --buffer, --column-buffer, --column-buffer-td, --caption-size, --labels-size, --grid-offset, --color, -color-offset, --color-satlight, --color-1, --color-2, --color-3, --color-4, --color-5, --color-6, --color-7, --color-8, --color-9 |
Examples
Basic Column Chart - No Frills
| Row Labels | 2016 | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|---|
| Primary Chart Values | 25 | 50 | 12.5 | 75 | 25 |
<div class="charts-wrapper has-height-20rem">
<table class="charts-column" style="--chart-max: 100;">
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col"> 2016 </th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-value:25;"><span>25</span></td>
<td style="--td-value:50;"><span>50</span></td>
<td style="--td-value:12.5;"><span>12.5</span></td>
<td style="--td-value:75;"><span>75</span></td>
<td style="--td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
</div>
Basic Line Chart - No Frills
| Row Labels | 2016 | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|---|
| Primary Chart Values | 35 | 50 | 12.5 | 75 | 25 |
<div class="charts-wrapper has-height-20rem">
<table class="charts-line" style="--chart-max: 100;">
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col"> 2016 </th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-start:0; --td-value:35;"><span>35</span></td>
<td style="--td-start:35; --td-value:50;"><span>50</span></td>
<td style="--td-start:50; --td-value:12.5;"><span>12.5</span></td>
<td style="--td-start:12.5; --td-value:75;"><span>75</span></td>
<td style="--td-start:75; --td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
</div>
Column Chart - All Items Activated
| Row Labels | 2016 | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|---|
| Primary Chart Values | 25 | 5050 | 12.5 | 75 | 25 |
<div class="charts-wrapper has-height-20rem">
<table class="charts-column show-caption show-labels show-values show-grid"
style="--chart-max: 100;">
<caption>Chart Caption</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col"> 2016 </th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-value:25;"><span>25</span></td>
<td style="--td-value:50;"><span>50</span>50</td>
<td style="--td-value:12.5;"><span>12.5</span></td>
<td style="--td-value:75;"><span>75</span></td>
<td style="--td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
</div>
Line Chart with Caption, Labels, Values and Grid
| Row Labels | 2016 | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|---|
| Primary Chart Values | 35 | 50 | 12.5 | 75 | 25 |
<div class="charts-wrapper has-height-20rem">
<table class="charts-line show-caption show-labels show-values show-grid" style="--chart-max: 100;">
<caption>Line Chart Example</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col"> 2016 </th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-start:0; --td-value:35;"><span>35</span></td>
<td style="--td-start:35; --td-value:50;"><span>50</span></td>
<td style="--td-start:50; --td-value:12.5;"><span>12.5</span></td>
<td style="--td-start:12.5; --td-value:75;"><span>75</span></td>
<td style="--td-start:75; --td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
</div>
Chart with Multiple Columns per Category
| Row Labels | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|
| Q1 | 50 | 12.5 | 75 | 25 |
| Q2 | 60 | 25 | 80 | 45 |
| Q3 | 40 | 55 | 70 | 35 |
| Q4 | 30 | 40 | 50 | 60 |
- Q1
- Q2
- Q3
- Q4
<div class="charts-wrapper has-height-20rem">
<table class="charts-column show-caption show-labels show-grid multiple"
style="--chart-max: 100; --column-count: 4">
<caption>Item Comparison in a Category</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td style="--td-value:50;"><span>50</span></td>
<td style="--td-value:12.5;"><span>12.5</span></td>
<td style="--td-value:75;"><span>75</span></td>
<td style="--td-value:25;"><span>25</span></td>
</tr>
<tr>
<th scope="row">Q2</th>
<td style="--td-value:60;"><span>60</span></td>
<td style="--td-value:25;"><span>25</span></td>
<td style="--td-value:80;"><span>80</span></td>
<td style="--td-value:45;"><span>45</span></td>
</tr>
<tr>
<th scope="row">Q3</th>
<td style="--td-value:40;"><span>40</span></td>
<td style="--td-value:55;"><span>55</span></td>
<td style="--td-value:70;"><span>70</span></td>
<td style="--td-value:35;"><span>35</span></td>
</tr>
<tr>
<th scope="row">Q4</th>
<td style="--td-value:30;"><span>30</span></td>
<td style="--td-value:40;"><span>40</span></td>
<td style="--td-value:50;"><span>50</span></td>
<td style="--td-value:60;"><span>60</span></td>
</tr>
</tbody>
</table>
<ul aria-label="Chart 2 Legend">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</div>
Line Chart with Multiple Lines
| Quarters | 2017 | 2018 | 2019 | 2020 |
|---|---|---|---|---|
| Q1 | 50 | 12.5 | 90 | 25 |
| Q2 | 60 | 25 | 50 | 45 |
| Q3 | 40 | 90 | 70 | 35 |
| Q4 | 30 | 40 | 50 | 60 |
- Q1
- Q2
- Q3
- Q4
<div class="charts-wrapper has-height-20rem">
<table class="charts-line show-caption show-labels show-grid multiple"
style="--chart-max: 100; --column-count: 1">
<caption>Multiple Lines example</caption>
<thead>
<tr>
<th scope="col">Quarters</th>
<th scope="col"> 2017 </th>
<th scope="col"> 2018 </th>
<th scope="col"> 2019 </th>
<th scope="col"> 2020 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td style="--td-start:0; --td-value:50;"><span>50</span></td>
<td style="--td-start:50; --td-value:12.5;"><span>12.5</span></td>
<td style="--td-start:12.5; --td-value:90;"><span>90</span></td>
<td style="--td-start:90; --td-value:25;"><span>25</span></td>
</tr>
<tr>
<th scope="row">Q2</th>
<td style="--td-start:0; --td-value:60;"><span>60</span></td>
<td style="--td-start:60; --td-value:25;"><span>25</span></td>
<td style="--td-start:25; --td-value:50;"><span>50</span></td>
<td style="--td-start:50; --td-value:45;"><span>45</span></td>
</tr>
<tr>
<th scope="row">Q3</th>
<td style="--td-start:0; --td-value:40;"><span>40</span></td>
<td style="--td-start:40; --td-value:90;"><span>90</span></td>
<td style="--td-start:90; --td-value:70;"><span>70</span></td>
<td style="--td-start:70; --td-value:35;"><span>35</span></td>
</tr>
<tr>
<th scope="row">Q4</th>
<td style="--td-start:0 ; --td-value:30;"><span>30</span></td>
<td style="--td-start:30; --td-value:40;"><span>40</span></td>
<td style="--td-start:40; --td-value:50;"><span>50</span></td>
<td style="--td-start:50; --td-value:60;"><span>60</span></td>
</tr>
</tbody>
</table>
<ul aria-label="Chart 2 Legend">
<li>Q1</li>
<li>Q2</li>
<li>Q3</li>
<li>Q4</li>
</ul>
</div>
Chart with Colourful Columns
| Row Labels | Basketball | Golf | Tennis | Hockey | Bowling |
|---|---|---|---|---|---|
| Primary Chart Values | 25 | 50 | 13 | 75 | 25 |
- Basketball
- Golf
- Tennis
- Hockey
- Bowling
<div class="charts-wrapper has-height-20rem">
<table class="charts-column show-caption show-grid show-values unique-colors"
style="--chart-max: 100;">
<caption>Multi-Colour Basic Chart with Legend</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col">Basketball</th>
<th scope="col">Golf</th>
<th scope="col">Tennis</th>
<th scope="col">Hockey</th>
<th scope="col">Bowling</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-value:25;"><span>25</span></td>
<td style="--td-value:50;"><span>50</span></td>
<td style="--td-value:13;"><span>13</span></td>
<td style="--td-value:75;"><span>75</span></td>
<td style="--td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
<ul aria-label="chart legend">
<li>Basketball</li>
<li>Golf</li>
<li>Tennis</li>
<li>Hockey</li>
<li>Bowling</li>
</ul>
</div>
Pie Chart
| Row Labels | Basketball | Golf | Tennis | Hockey | Bowling |
|---|---|---|---|---|---|
| Primary Chart Values | 25 | 50 | 13 | 75 | 25 |
- Basketball
- Golf
- Tennis
- Hockey
- Bowling
<div class="charts-wrapper has-height-15rem">
<table class="charts-pie [show-caption show-values]"
style="--chart-max: 188;">
<caption>Pie Chart with Legend</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col">Basketball</th>
<th scope="col">Golf</th>
<th scope="col">Tennis</th>
<th scope="col">Hockey</th>
<th scope="col">Bowling</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-start:0; --td-value:25;"><span>25</span></td>
<td style="--td-start:25; --td-value:50;"><span>50</span></td>
<td style="--td-start:75; --td-value:13;"><span>13</span></td>
<td style="--td-start:88; --td-value:75;"><span>75</span></td>
<td style="--td-start:163; --td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
<ul aria-label="chart 3 legend">
<li>Basketball</li>
<li>Golf</li>
<li>Tennis</li>
<li>Hockey</li>
<li>Bowling</li>
</ul>
</div>
Donut Chart
| Row Labels | Basketball | Golf | Tennis | Hockey | Bowling |
|---|---|---|---|---|---|
| Primary Chart Values | 25 | 50 | 13 | 75 | 25 |
- Basketball
- Golf
- Tennis
- Hockey
- Bowling
<div class="charts-wrapper has-height-15rem">
<table class="charts-donut [has-buffer show-caption show-values]"
style="--chart-max: 188;">
<caption>Donut Chart with Legend</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th scope="col">Basketball</th>
<th scope="col">Golf</th>
<th scope="col">Tennis</th>
<th scope="col">Hockey</th>
<th scope="col">Bowling</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Primary Chart Values</th>
<td style="--td-start:0; --td-value:25;"><span>25</span></td>
<td style="--td-start:25; --td-value:50;"><span>50</span></td>
<td style="--td-start:75; --td-value:13;"><span>13</span></td>
<td style="--td-start:88; --td-value:75;"><span>75</span></td>
<td style="--td-start:163; --td-value:25;"><span>25</span></td>
</tr>
</tbody>
</table>
<ul aria-label="chart 4 legend">
<li>Basketball</li>
<li>Golf</li>
<li>Tennis</li>
<li>Hockey</li>
<li>Bowling</li>
</ul>
</div>