NHS Digital's Data Visualisation Library
This is the repository for NHSD's data visualisation library.
The purpose of this library is create accessible data visualisations for web with HTML/SVG, JPG & PNG fallbacks where JavaScript isn't avaliable.
--------
To you can download the latest releases on the release page.
Alternatively you may clone and build your own distribution:
``
git clone https://github.com/NHS-digital-website/nhsd-dataviz.git
npm install
npm run build
--------
The following code snippet demonstrates loading the data visualisation library and creating a basic chart:
`
--------
nhsdviz.chart(selector, options)
| Property | Value | Description |
|-------------------|------------------------------------------------------|------------------------------------------|
| vizType | "pie" \| "doughnut" \| "icon" \| "stat" \| "column" | Chart type (default: pie) |
| title | String | Chart title text |
| introText | String | Chart introductory text |
| data | Data object | Chart data |
| source | { text: String, href: String } | Source text |
| palette | String | Chart palette |
| icon | String (icon name) | Chart icon |
| desktopViewport | number (px) | Desktop viewport (default: 1024) |
| Property | Value | Description |
|--------------|-------------------------------------------------|--------------------------------------|
| description | String | Chart description |
| subject | String | Data subject |
| change | { percent: number, from: number, date: string } | Chart change text |
| yAxis | { title: string, start: number, end: number } | yAxis options (column) |
| xAxis | { title: string } | xAxis options (column) |
| percent | number | Chart percent value (pie & doughnut) |
| ratio | { numerator: number, denominator: number } | Chart ratio value (icon) |
| quantity | number | Chart quantity value (stat) |
| series | { name: string, value: [number] } | Chart series data (column) |
If building from source icons should be placed in the assets/icons/ directory, these icons can then be referenced by their file names.
If using the distribution library the following icons are avaliable:
- arrow-down
-
-
-
-
-
-
--------
#### Pie Chart
https://jsfiddle.net/LEJA3/cq8rbs12/
#### Doughnut Chart
https://jsfiddle.net/LEJA3/f4o6v2xh/
#### Icon Chart
https://jsfiddle.net/LEJA3/kroLbf4z/
#### Statistics Chart
https://jsfiddle.net/LEJA3/rov9weby/
#### Column Chart
https://jsfiddle.net/LEJA3/fqtphz7o/
--------
nhsdviz.createPalette(name, palette)
| Property | Value | Description |
|--------------|-------------------------------------------------|--------------------------------------|
| primary | String (Hex colour code) | Primary chart colour |
| secondary | String (Hex colour code) | Secondary chart colour |
| background | String (Hex colour code) | Background chart colour |
| text | String (Hex colour code) | Main text colour |
| text2 | String (Hex colour code) | Secondary text colour |