Charts - Documentation

This component is used to generate a visual representation of data in a table.

Version: 0.1
Status: Experimental
Technical name: [data-chart]

Working examples

How to implement

This section explains how you can implement the Charts component in your page.

Add the data attribute data-chart to any <table> element that contains numerical data where you want a visual representation of said data. The attribute accepts the following values:
- bar
- line
- doughnut
- pie
- polarArea
- radar

Configuration

This section lists all possible configurations you can define for the component. Those configuration options must be added as attributes to either the component or other elements inside the component.

Name	Description	Type	Default
`data-chart-options`	Defines the chart options. For more information and to see what properties are accepted, see the official Chart.js documentation. Note: this configuration can only be added to the `<table>` element.	`JSON Object`	No default value.
`data-chart-data`	Overrides the data defined in the `<table>` element. Use only if the chart generated by the component does not work as expected. For more information on how to structure your data, see the official Chart.js documentation. Note: this configuration can only be added to the `<table>` element.	`JSON Object`	No default value.
`data-chart-set-options`	Defines the configuration options for a given dataset. For more information and to see what properties are accepted, see the official Chart.js documentation. Note: this configuration can only be added to a `<th>` element located inside the `<thead>` element of the table.	`JSON Object`	No default value.
`data-chart-set-ignore`	If `true`, the entire dataset (table column) will be ignored and therefore not added to the chart. Note: this configuration can only be added to a `<th>` element located inside the `<thead>` element of the table.	`Boolean`	`false`
`data-chart-value`	Overrides the value defined in any given `<th>` or `<td>` element.	`String`	No default value.
`data-chart-details-open`	Defines if the dynamically created `<details>` element should be open by default.	`Boolean`	If not defined, the `<details>` element will be closed. If defined, the `<details>` element will be open.

Notes

The charts update automatically when the data inside the <table> element is updated.
When using the data-chart-data configuration, make sure that the generated chart is an accurate representation of your table data. Failure to do so, will make your page fail WCAG Success Criterion 1.1.1 Non-text Content.

Implementation plan

2024-03: Integrate meli-melo to GCWeb.
2024-09: Engagement with the Digital Transformation Office (DTO) at Treasury Board Secretariat.
2024-09: Review and perform the identification of the feature transformation requirement to be able to complete the integration progress into GCWeb.
2024-09: Produce accessibility conformance report and attach usability report.
2024-11: Make GCWeb provisional component out of meli-melo.
2025-03: Stabilize the component and deprecate WET-BOEW charts & graphs including amongst other things working example translation, writing guidance, publishing ACRs, feature API documentation, etc.

Page details

Date modified:: 2024-02-23 00:00:00 +0000

Search