Working together for the ultimate brand experience

Royal Canin Design Language

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!