Skip to main content
Skip table of contents

Graph component

The facts and figures of the housing emergency are some of our best assets when it comes to fighting housing injustice. We can use them to add weight and context to the work we're doing.

For showing changes over time and comparisons, a graph is the best solution.

At the moment, our graph component is designed to create a line graph (not bar, pie or area charts as yet).

The line graph component lets you display up to four data sets over a given date range, shown in years. To ensure the graph is useful to all our users, it must include:

  • a graph title

  • axes headers

  • a key (if multiple data sets are being used)

  • the graph source (if applicable)

  • a graph summary

image-20240913-134210.png

To build the graph component (line graph)

  1. Review the data .csv to ensure the information is clear, logical and accessible. You can display up to four data sets over a given date range, shown in years.

  2. Use Add Entry and select Component – Graph

  3. Title – give the graph a clear, meaningful title so users can easily understand what data they're looking at (even if the graph is removed from its original context)

  4. Y axis label – add a label (e.g. Number of households) to the Y axis (vertical axis), so users and assistive technologies can read the data being represented

  5. X axis label – add the label 'Year' to the X (horizontal) axis. Currently, this is the only value label we can represent on the X axis.

  6. Y axis elements – two decisions need to be made based on the data you're showing:

    1. Start – will the Y axis start from zero, or from the minimum (lowest number) in the data set? Select the relevant option from the drop down menu.

    2. Format – does the Y axis need a special character for added context? Options are: ‘pound’ for £, ‘percent’ for % or ‘none’ for showing numbers without a label. Select the relevant option from the drop down menu.

  7. Data – upload the .csv file containing the data as a media asset. The top row must contain the data set labels. The first column must be the X (horizontal) axis values, representing years.
    Each remaining column represents a data set for the Y (vertical) axis. A maximum of four data sets can be added to the Y axis.

    Note: the key will auto-populate from the .csv file.

  8. Graph description – this will be used as alt text for the graph for people using screen readers and should describe what the image is (e.g. a line graph showing the number of children in temporary accommodation over time, from 2014 to 2023)

  9. Graph summary write two to three sentences summarising what the line graph is showing. Keep it simple and clear, illustrating time changes and comparisons in your graph. People using assistive technology rely on this summary to understand the graph, along with users who don’t have time to review the graph itself. Best practice is to write your graph summary so it can be understood when taken out of its original context.

  10. In your summary, remember to include the graph source. You can embed a link to the original source.

10. Line colour - sets the colour of each line by typing the colour and hitting Enter.

If no colours are provided defaults will be used. The order of the colours relates to the order of the data sets in the .csv file. You can drag the colour labels from left to right to change the colour of the line/s.

The allowed colours are:  

  red

  pink

  blue

  black

 
(Below are colours relating to political parties that should only be used in that context) 

  labour

  conservative

  libdem

  greenparty 

11. Add component to your page

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.