Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
Data visualisation
Data visualization is the presentation of data in a graphical format. It enables to see analytics presented visually, so user can grasp difficult concepts or identify new patterns.
To create chart you need to wrap table with your data in element with .rc-data-visualisation class. Data attritbutes you can use:
- data-chart-type - "bar", "line", "doughnut" or "pie"
- data-hide-table - if you want to hide table with data
Bar chart
Employees age
| Name | Age | Years in RC | Experience overall |
|---|---|---|---|
| John | 56 | 10 | 20 |
| Meg | 20 | 1 | 8 |
| Alfred | 23 | 2 | 8 |
| Molly | 31 | 5 | 12 |
| Arthur | 45 | 25 | 34 |
<div class="rc-layout-container rc-one-column rc-max-width--md">
<div class="rc-column">
<div class="rc-data-visualisation" data-chart-type="bar">
<h1>Employees age</h1>
<div class="rc-table rc-margin-bottom--md">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Name</th>
<th class="rc-table__th rc-espilon">Age</th>
<th class="rc-table__th rc-espilon">Years in RC</th>
<th class="rc-table__th rc-espilon">Experience overall</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">John</td>
<td class="rc-table__td">56</td>
<td class="rc-table__td">10</td>
<td class="rc-table__td">20</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Meg</td>
<td class="rc-table__td">20</td>
<td class="rc-table__td">1</td>
<td class="rc-table__td">8</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Alfred</td>
<td class="rc-table__td">23</td>
<td class="rc-table__td">2</td>
<td class="rc-table__td">8</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Molly</td>
<td class="rc-table__td">31</td>
<td class="rc-table__td">5</td>
<td class="rc-table__td">12</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Arthur</td>
<td class="rc-table__td">45</td>
<td class="rc-table__td">25</td>
<td class="rc-table__td">34</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Copied!
Line chart
Changes over year
| Year | Dogs owned | Cats owned | Hamsters owned | Birds owned |
|---|---|---|---|---|
| 2015 | 56 | 40 | 32 | 13 |
| 2016 | 20 | 52 | 2 | 54 |
| 2017 | 23 | 32 | 21 | 18 |
| 2018 | 31 | 33 | 43 | 12 |
| 2019 | 45 | 32 | 22 | 5 |
<div class="rc-layout-container rc-one-column rc-max-width--md">
<div class="rc-column">
<div class="rc-data-visualisation" data-chart-type="line" data-hide-table="true">
<h1>Changes over year</h1>
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Year</th>
<th class="rc-table__th rc-espilon">Dogs owned</th>
<th class="rc-table__th rc-espilon">Cats owned</th>
<th class="rc-table__th rc-espilon">Hamsters owned</th>
<th class="rc-table__th rc-espilon">Birds owned</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">2015</td>
<td class="rc-table__td">56</td>
<td class="rc-table__td">40</td>
<td class="rc-table__td">32</td>
<td class="rc-table__td">13</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">2016</td>
<td class="rc-table__td">20</td>
<td class="rc-table__td">52</td>
<td class="rc-table__td">2</td>
<td class="rc-table__td">54</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">2017</td>
<td class="rc-table__td">23</td>
<td class="rc-table__td">32</td>
<td class="rc-table__td">21</td>
<td class="rc-table__td">18</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">2018</td>
<td class="rc-table__td">31</td>
<td class="rc-table__td">33</td>
<td class="rc-table__td">43</td>
<td class="rc-table__td">12</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">2019</td>
<td class="rc-table__td">45</td>
<td class="rc-table__td">32</td>
<td class="rc-table__td">22</td>
<td class="rc-table__td">5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Copied!
Doughnut chart
Favourite pets
| Pet | Percent |
|---|---|
| Dogs | 40 |
| Cats | 40 |
| Hamsters | 12 |
| Other | 8 |
<div class="rc-layout-container rc-one-column rc-max-width--md">
<div class="rc-column">
<div class="rc-data-visualisation" data-chart-type="doughnut" data-hide-table="true">
<h1>Favourite pets</h1>
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Pet</th>
<th class="rc-table__th rc-espilon">Percent</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">Dogs</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Cats</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Hamsters</td>
<td class="rc-table__td">12</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Other</td>
<td class="rc-table__td">8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Copied!
Pie chart
Favourite pets
| Pet | Percent |
|---|---|
| Dogs | 40 |
| Cats | 40 |
| Hamsters | 12 |
| Birds | 5 |
| Other | 3 |
<div class="rc-layout-container rc-one-column rc-max-width--md">
<div class="rc-column">
<div class="rc-data-visualisation" data-chart-type="pie" data-hide-table="true">
<h1>Favourite pets</h1>
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Pet</th>
<th class="rc-table__th rc-espilon">Percent</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">Dogs</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Cats</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Hamsters</td>
<td class="rc-table__td">12</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Birds</td>
<td class="rc-table__td">5</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Other</td>
<td class="rc-table__td">3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Copied!
Custom colours chart
Custom config
You can use custom colours for chart component, by passing custom configuration object, and ivoking function manually. Although, we highly reccomend to use default, branding colours, to make sure chart is consistent with branding colours.
window.addEventListener('load', () => {
const configtest = {
colours: [
'#6E5978',
'#38344F',
'#6083B3',
'#88B5C5',
'#A7CFCB',
'#969990'
]
};
if (window.webpackComplete) {
RCDL.features.dataVisualisation.init(['.rc-data-visualisation--custom'], configtest);
}
else {
document.addEventListener('rc_webpack_done', () => {
RCDL.features.dataVisualisation.init(['.rc-data-visualisation--custom'], configtest);
});
}
});
Favourite pets
| Pet | Percent |
|---|---|
| Dogs | 40 |
| Cats | 40 |
| Hamsters | 12 |
| Birds | 5 |
| Other | 3 |
<div class="rc-layout-container rc-one-column rc-max-width--md">
<div class="rc-column">
<div class="rc-data-visualisation--custom" data-chart-type="pie" data-hide-table="true">
<h1>Favourite pets</h1>
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Pet</th>
<th class="rc-table__th rc-espilon">Percent</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">Dogs</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Cats</td>
<td class="rc-table__td">40</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Hamsters</td>
<td class="rc-table__td">12</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Birds</td>
<td class="rc-table__td">5</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Other</td>
<td class="rc-table__td">3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Copied!