Proximus design systemDev
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Chart

Comparing different values that are hierarchically equivalent. Each bar is mapped to a dimension value with a length determined by a metric.

last modified: 01/01/1601 01:00:00

Overview

Chart is a type of columns graph that is used to compare values and show trends over time. In a billing context for example, a columns chart allows the user to grab rapidly his billing information, make comparisons and track his billing trends.

Stacked columns charts are useful for showing group relationships and value differences across more complex categories and subcategories. Stacked column charts can also be used to show group relationships within subsets of ordinal data. They plot the relative value that each data series contributes to the total.

Multi columns by axe Y

Multi columns by axe Y allows the user to compare multiple columns within the same period.

Hover/Focused state

State visible when the cursor hovers one column and triggered by keyboard navigation or click. The hovered/triggered column keeps the default state and the opacity of the others columns decreases. Cursor becomes a pointer.

The popover message reveals more detailed information or context for specific each column of the chart. The popover should repeat the corresponding values of the data point on both axes and any other relevant details.

Anatomy

Avoid filling the chart frame with too many elements, as it impacts the user’s ability to interpret the data.

  1. Column
  2. Positive values
  3. Negative values
  4. Chart frame
    The chart frame is the area where the data will be visualized
  5. Ticks
    Help the reader understand the proportions and scale of the data, the indicators involved, and their unit of measure
  6. Axes
    Help the reader understand the proportions and scale of the data, the indicators involved, and their unit of measure.
    The numerical axis should start at zero.
  7. Interaction info
    Helps the user to understand how to interact with the chart. Mandatory for accessibility reason.
  8. Legends
    The Legends explain the chart’s meaning by defining the association of each color property to the corresponding data.

Legends

Legends summarize the distinguishing visual properties such as colors in the chart. A legend helps the user build the necessary associations to make sense of the chart. The legends are positioned at the bottom of a chart by default.

Your chart doesn’t need a legend if it only presents one data category. Only use a legend for represent categories.

Colors accessibility

Les légendes des graphiques utilisent la couleur comme propriété distinctive par défaut pour les ensembles de données et les valeurs. Ce type de différenciation pourrait ne pas être suffisant pour les utilisateurs souffrant de déficience visuelle, mais comme les informations sont disponibles au survol/clic (catégorie de légende + valeur), nous assurons l'accessibilité des informations pour ces utilisateurs également.

last modified: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00
Accessibility

Everything is loaded by the JavaScript. This box is only for your information

  • <caption> must have a show-for-sr class. It also must be filled by the name of the graph;
  • <thead> must have an aria-hidden="true" ;
  • <button> inside <td> must have an aria-label with the name of the column + the total in euro of the column separated by a comma;
  • div.rs-chart-labels must have an aria-hidden="true" .
How does it work

Chart is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.chart" attribute to work.

Use data-rslib-chart attribute to pass data to make your graph dynamic.

You have two ways to put data info: multiple arrays or one object which each bar.

Parameters

JSON

Parameters inside data-rslib-chart are set like a JSON.

Element name Type Value example Infos
chartTitle object 'en': 'Billing',
'fr': 'Facture',
'nl': 'Billing',
'de': 'Billing' 		Object with string for each language. This is mandatory.
unit string € Unity of axe Y. This is the default value.
legend object 'green': {
'key': 'refund',
'en': 'Refund',
'fr': 'Remboursement',
'nl': 'Terugbetaling',
'de': 'Rückerstattung'
}, ... 		Object that content legend per color, with key linked to data and string for each language.
If you set nothing, see translation chapter that show default values.
To change one value, you have to set all necessary/used legend.
xAxesLabel object 'keyName': {
'en': 'Name for EN',
'fr': 'Name for FR',
'nl': 'Name for NL',
'de': 'Name for DE'
}, ... 		Object that content axe X label, with key linked to data and string for each language.
You have to set all necessary/used Axe X labels.
chartData Array {
'name': '#1269562',
'date': '2020-09-03',
'data': {
'refund': -60.99
},
'totalAmount': 999.99,
'xAxisKey': 9
}		 Array that content all bars.
  • name: string inside pophover
  • date: date YYYY-MM-DD inside pophover
  • data: Object with all data. Use key set in 'legend' , you can use your own! To hide one value, don't put it or set it to 0.
  • totalAmount: float to set total value yourself. Without this value, total is automatic.
  • xAxisKey: number correspond to month. To use custom axe X label, set 'xAxesLabel' and use created key.

Translations

Info box

Only one copy to set for all translations? You could use 'translation': 'Super copy' instead of 'en': 'Copy in EN' , 'fr': 'Copy in FR' , ('nl': 'Copy in NL' and 'de': 'Copy in DE' .

Legend

You could choose your own key value for each colors and use it on data (more info in Parameters chapter).

Axe X naming

By default, you don't have to set this value. Put a number as key that correspond to a month: 1 for January, 2 for February, etc.

If you need custom one, have fun. Set wanted keys with its translations and use it on data.

Info box

Noticed that:

  • on mobile, you will see maximum 6 axes X
  • on desktop, maximum 12
  • only 3 characters are displayed

Other copies

All those copies are automatic. You don't need to set them if default correspond to your case.

Default graph

Accessibility

Put a spinner inside rs-chart div is mandatory for the accessibility. See spinner article for more details.

To have the Chart, put a <div> with the class rs-chart . Put the attributes data-rslib-webcomponent-load="rslib.apps.chart" and data-invoke="Chart.init" to make it works.

Multi bars by axe Y

Graph inside small gridding

Warning

For space reason, the graph can't be inside a smaller gridding than medium-7 if you display 12 column on medium up.

See the graph inside a smaller gridding.

Empty / Error state

JavaScript

How to trigger the js

As Chart is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

CONTEXT refers to document or html element parent.