This section is designed with TASO partners and staff in mind, providing rules on chart formatting to ensure consistency across TASO outputs. That said, we anticipate that the insights provided may also be beneficial to anyone interested in developing their own data visualisation style guide, or understanding the technical details behind creating consistently formatted and distinctive charts.
A note for TASO partners
Designing charts for TASO publications has been a trial and error process, as we figure out what works for our partners. If you are a partner on a TASO project and are unsure how to design your charts, please email research@taso.org.uk
Formatting rules
Show the code
library(tidyverse)library(extrafont)df <-data.frame(X_Axis_Title =c("Category 1", "Category 2", "Category 3", "Category 4"),Y_Axis_Title =c(10, 20, 30, 20))# Build the plot using ggplot2 package.ggplot(df, aes(x = X_Axis_Title, y = Y_Axis_Title)) +# Add bar elements to the plot. 'stat = "identity"' tells ggplot to use the y-values as they are.geom_bar(stat ="identity", fill ="#3b66bc") +# Add a horizontal line at y = 0, with a solid line type and a specified color.geom_hline(yintercept =0, linetype ="solid", color ="#404040") +# Add labels for the axes, title, subtitle, and caption. Also format these elements.labs(x ="Axis Title", y ="", title ="This is the title of the chart, it should be in Neuton, no longer than two lines,\nand normally active",subtitle ="This is the subtitle, it should normally be a formal statistical subtitle\n",caption ="Source: This is the source in italics\n\nNotes: These are the notes in italics") +# Customise with TASO theme elements, including background colour, title positioning, gridlines.theme_minimal() +theme(text =element_text(family ="Barlow", size =12),plot.title.position ="plot",plot.title =element_text(family ="Neuton", size =16),plot.subtitle =element_text(size =12),plot.caption.position ="plot",plot.caption =element_text(hjust =0, size =9, face ="italic"),plot.background =element_rect(fill ="#EDEBE3", color =NA),plot.margin =margin(0.25, 0.25, 0.25, 0.25, "in"),panel.border = ggplot2::element_blank(),panel.grid.major =element_line(colour ="#CECABC", linewidth =0.3), panel.grid.minor =element_blank(),panel.background = ggplot2::element_rect(fill ="#edebe3", color =NA), axis.text =element_text(size =10),axis.title =element_text(size =9),axis.line.y =element_blank(),axis.line =element_line(colour ="#485866", linewidth =0.5),axis.text.x =element_text(margin =margin(t =7, unit ="pt")), axis.ticks.length =unit(0.3, "cm"), # Increase the length of ticksaxis.ticks.x =element_line(colour ="#485866", linewidth =0.5), legend.position ="none" )
You can find an example R script for creating charts with TASO styling on our GitHub. R is a widely used statistical software among researchers and data analysis. You can also find useful resources for data visualisation in R in the R resources section.
The fonts for the charts are Neuton for the header and Barlow for all other text. Ensure that font sizes always remain readable. If there is text you must include but you are finding it is too small, consider how you can redesign the chart. For annotations and data labels, if you are to use bolding or italics, use them with purpose.
The title should normally be an active title that conveys the key takeaway and should always be the largest text on the page.
The subtitle should be a formal statistical title (as you might traditionally title a chart).
The caption should be in the bottom left of the chart. It should be in italics, and smaller than the rest of the text on the chart.
Text sizes can have some flexibility. But ensure that the title is the largest text on the page, followed by the subtitle. Ensure all other text is smaller than the title and subtitle.
Colours
The text should be black, but adjust as appropriate for readability. For example, sometimes data labels will need to be white to stand out against colours.
Background should be #EDEBE3 (putty).
Gridlines should generally be “#CECABC” (darker than the background but lighter than text and lines). Gridline shade can be adjusted if it aids readability, but it should be a shade of grey.
Format
180mm (width) x 120mm (height) is the default standard chart size for A4 PDF reports. 180mm is the maximum width, however, the height is flexible depending on the chart. For example, if your chart needs to be tall rather than wide.
For an instagram story or reel, 1080 x 1920 pixels is recommended. For carousel posts, the recommended sizes are:
Landscape: 1080 x 566 pixels
Portrait: 1080 x 1350 pixels
Square: 1080 x 1080 pixels
For in-stream photos on X, the recommended image size is 1600 x 900 pixels. The minimum size is 600 x 335 pixels.
For LinkedIn, the recommended image size is 1200 x 627 pixels for a blog post.
#You can adjust the size of the image using: ggsave("chart.png",plot = chart_name,width =#in px,height =#in px,units ="px", #px = pixels. You can also use millimeters (mm).scale =1.3# <–– tune this until chart fills the space nicely. You may need to adjust the spacing in titles. )
Save as a PNG or a JPEG to avoid losing quality through copy and pasting or screenshots.
If you are including the logo, it should be in the bottom right corner, with sufficient space around it as per the brand guidelines. The logo is not needed in PDF reports that already contain TASO branding. However, consider including the logo for web/social media versions of charts, where the chart is taken outside of the context of the report.
Adjusting charts for different publication types
A chart published in an analytical report will require a slightly different set up to a chart for a blog or a social media. To see how we have tackled this most recently, we can look at charts for TASO’s Education pathways report.
In a formal report, the aim is to be transparent and credible. To support this, the chart includes a figure number and clear title, along with key technical details such as the data source, cohorts included, and variable definitions. Error bars are also shown to indicate uncertainty around the estimates. This information equips readers to understand the methodology, verify the findings, or even replicate the analysis. The title is neutral and descriptive, allowing readers to evaluate the findings and form their own conclusions. Because this is a formal report, the accompanying text can provide the necessary context and guide the reader’s interpretation.
For the social media version of the chart, the focus shifts from transparency to impact. The figure number and technical details are removed to keep the visual clean, and an active, attention-grabbing title highlights the key takeaway immediately. Annotations are added to draw the viewer’s eye to the most important point, while unnecessary information about the data source or cohort definitions is left out to avoid clutter. The organisation’s logo is also included to reinforce branding and make the graphic instantly recognisable. This streamlined design helps the chart work effectively in fast-paced online environments where viewers need to grasp the message at a glance.
Brand colours
#07dbb3#3b66bc#e4e2d9#edebe3#f9466c#485866
Note
You can use RColourBrewer to generate gradients in R. Alternatively, you can use this website to modify the brightness and colour intensity and choose the number of colours you want to generate.
At TASO, we will be looking further into how we can improve the accessibility of our charts, particularly around the use of accessible colour palettes.
For alt text, Amy Cesal provides some useful guidance on how to write alt text for charts.1 She includes the following formula to help:
Chart type of type of data where reason for including chart
Alt text example
Bar chart of the average earnings of students by highest qualification where students who went to a top third university earn the most
