Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data #16

govuk-design-system opened this issue Jan 12, 2018 · 3 comments

Data #16

govuk-design-system opened this issue Jan 12, 2018 · 3 comments


Copy link

@govuk-design-system govuk-design-system commented Jan 12, 2018


Styles for representing data in numbers, graphs, charts and diagrams.


Anything else

You could to at reference in the issue on Dashboard page

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 12, 2018
@timpaul timpaul added the pattern label May 21, 2018
Copy link

@matthewrudy matthewrudy commented Jul 9, 2018

I have a use case from a system used internally by HMPPS.

Previously implemented with elements using the data class
screen shot 2018-07-09 at 12 01 24

I got it working by introducing a few new classes

Now looks likes
screen shot 2018-07-09 at 12 38 53

Copy link

@Dean-A-Smith Dean-A-Smith commented Nov 13, 2020

GOV.UK charts markdown allows content designers to create ‘simple’, ‘stacked’ and ‘compact’ bar charts which can also display negative values. You can combine these within one chart.

Users can then switch between the HTML bar chart and the table containing the data on the webpage.

I wondered whether the community could also consider the design and usability of GOV.UK charts in this forum. I know the limitations of GOV.UK charts markdown can cause publishers to rely on images of data, which is a backwards step. It makes sense for the design principles for data in services to feed into those for GOV.UK, and vice versa.

There isn't currently a lot of detail about the design of GOV.UK charts in the content design guidance, so thought I'd share a bit here.

Orientation of charts

Charts are primarily orientated vertically. My assumption is that this is so they can adapt well for narrow displays, such as mobile phones.

Categorical data that cannot be grouped

Charts use GOV.UK blue (#1d70b8) for categorical data that cannot be organised into broad groups.

Bar chart - categorical data cannot be grouped

Categorical data that can be grouped

GOV.UK charts use different colours when subcategories are common across broad categories.

Bar chart - subcategories common across broad categories

Chart colour palette and order of appearance

GOV.UK charts apply colours automatically based on the number and order of the subcategories in the data table.

There are a maximum of 9 colours.

The text labels are either white or black – the text colour is whichever provides an acceptable contrast ratio with the background colour.

These colours are from the GOV.UK Design System.

Order of appearance Hex RGB govuk-colour function Label text colour
1 #1d70b8 29,112,184 govuk-colour(“blue”) White
2 #28a197 40,161,151 govuk-colour("turquoise") Black
3 #00703c 0,112,60 govuk-colour("green") White
4 #85994b 133,153,75 govuk-colour("light-green") Black
5 #ffdd00 255,221,0 govuk-colour("yellow") Black
6 #f47738 244,119,56 govuk-colour("orange") Black
7 #d4351c 212,53,28 govuk-colour("red") White
8 #912b88 145,43,136 govuk-colour("bright-purple") White
9 #0b0c0c 11,12,12 govuk-colour("black") White
Copy link

@alex-ju alex-ju commented Jan 21, 2021

Related thread about colour palette for charts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants