The official repository for all publication ready ONS charts. See our chart menu and service manual for more guidance on the use of these charts, and of charts more generally.
We currently maintain a separate map templates repository.
(NOTE: This repository is still a work in progress.)
Make a branch and name it something descriptive e.g. feature/new-autocomplete. Once you are happy, do a pull request and someone else will review it before it gets merged into main.
Please raise an issue and the team will have a look.
-
All missing charts can be found in the issues section of the repository. They will have the following format, “[descriptive chart name]: Initial Commit”.
-
If this issue does not have an active branch and you would like to update and upload the chart please create a branch and you will be responsible for updating and making a pull request for the chart.
- All initial commits of charts must must follow JavaScript ES6 standards and use D3 v6 or higher.
- Before making additions to the
libfolder please do check the ONS CDN as your addition to the lib folder may already to uploaded.
| Chart.Name | Preview | Code |
|---|---|---|
| Area stacked | View | </> |
| Area stacked sm | View | </> |
| Bar chart horizontal | View | </> |
| Bar chart horizontal clustered | View | </> |
| Bar chart horizontal clustered sm | View | </> |
| Bar chart horizontal grouped | View | </> |
| Bar chart horizontal grouped clustered | View | </> |
| Bar chart horizontal sm | View | </> |
| Bar chart horizontal sm colour | View | </> |
| Bar chart horizontal stacked | View | </> |
| Bar chart horizontal stacked clustered | View | </> |
| Bar chart horizontal stacked clustered grouped | View | </> |
| Bar chart horizontal stacked grouped | View | </> |
| Bar chart horizontal stacked sm | View | </> |
| Bar chart horizontal stacked with tooltip | View | </> |
| Bar chart horizontal with dropdown | View | </> |
| Bar chart horizontal with reference line | View | </> |
| Bar chart horizontal with reference sm | View | </> |
| Bar comet dot range plot | View | </> |
| Beeswarm | View | </> |
| Bubble chart animated | View | </> |
| Chart menu | View | </> |
| Column chart | View | </> |
| Column chart clustered | View | </> |
| Column chart sm | View | </> |
| Column chart stacked | View | </> |
| Column chart stacked sm | View | </> |
| Column chart stacked with line | View | </> |
| Column chart stacked with line sm | View | </> |
| Column chart with CI sm | View | </> |
| Comet clustered | View | </> |
| Comet plot | View | </> |
| Dot plot | View | </> |
| Dot plot with CI sm | View | </> |
| Doughnut | View | </> |
| Heatmap | View | </> |
| Heatmap per column | View | </> |
| Line chart | View | </> |
| Line chart sm | View | </> |
| Line chart sm colours | View | </> |
| Line chart with area | View | </> |
| Line chart with CI sm | View | </> |
| Population pyramid static | View | </> |
| Population pyramid static with comparison | View | </> |
| Population pyramid with comparison toggle | View | </> |
| Population pyr 6CF8 amid with dropdown | View | </> |
| Population pyramid with dropdown and interactive comparison | View | </> |
| Range plot | View | </> |
| Range plot sm | View | </> |
| Ridgeline plot | View | </> |
| Scatter plot | View | </> |
| Scatter plot animated | View | </> |
| Scatter plot sm | View | </> |
| Slope chart | View | </> |
| Split bar chart | View | </> |
| Z annotation example | View | </> |