chartlibrary

A collection of charts types, with usage advice and links to data and code.

Line charts

One line

The simplest line chart, in this case running live from the ONS API.



Data Code Dashboard

Many lines | Long Form

This chart uses "long form" data, which is the ideal format if working with csv files.



Data Code Dashboard API

Many lines | Wide Form

This chart uses "wide form" data, which is familiar from Excel. It is a little more complex to use in most visualisation libraries.



Data Code Dashboard

Many lines | Multiple sources

Some APIs return only one series. This chart runs from JSON data, and uses "layers" to add each country. It is in effect four charts, one for each country, overlaid on one another.



Data Code Dashboard API

Lines with two y-axes

When plotting two lines with very different scales is may be helpful to separate the y dimesion for each line.



Data Code Dashboard

Highlighting most recent data

Adding a point and the data value to the most recent data point. This uses a layer, which finds the maximum value of the data series, and puts both the point and the value at the max. This ensures the chart is responsive, so the location of the point and value both update when the data refreshes.



Data Code Dashboard

Two lines: filled range

A useful chart to demonstrate the varying distance between series, in this case the Bitcoin high and low trading price.



Data Code Dashboard API

Interactive line: data selector

This chart uses a very long run of data, allowing users to focus on a particular period using the sliders.



Data Code Dashboard

Line with tooltip

A simple line chart with a tooltip that moves along the series as the user hovers.



Data Code Dashboard

Re-based data (wide form)

An example of which transposes the data, rebasing so that 1980=100.



Data Code

Wide form data, folded to long form

Turing wide data into long form to allow easy use of the facet encoding.



Data Code

Interactive: sliders

This spec creates a year variable from dateTime data (yyyy-mm-dd), adds sliders that return a year value, and then filters the data based on the years picked using the sliders.



Data Code FRED

ONS, CORS mend

Simple line chart with CORS mended, generic set up for ONS charts.



Data Code AllOrigins

Bar charts

Simple vertical bar chart

This is a straightforward bar chart that plots a y variable against an x variable. In this case, the x variable is the year and the y variable is the share of green seats in the European parliament.



Data Code Dashboard

Simple horizontal bar chart

By flipping the x and y variables in the code, it is possible to plot a horizontal bar chart.



Data Code Dashboard

Stacked vertical bar chart

Stacked bar charts are useful when there are a number of components that make up a given value. For example, here we split food emissions up by each stage in the production process.



Data Code Dashboard

Stacked horizontal bar chart

Using the same flip trick, we can create a horizontal version of the stacked chart.



Data Code Dashboard

Grouped vertical bar chart

In the case where several variables are being displayed in distinct clusters, grouped bar charts are useful. In this example, GDP growth for all four UK nations are displayed per quarter, allowing the reader to easily compare each country.



Data Code Article

Layered bar chart

Layer commands can be useful when more than one piece of information is being conveyed. In this case, the simple veritcal bar chart shows the number of products at each sugar intensity. The line tracks the tax rate. Two distinct y axes provide the values.



Data Code Article

Interactive bar chart | Tooltip

Adding a tooltip allows the reader to see underlying values by hovering their mouse over the bars. This is one of the main advantages of building charts live in the page (as opposed to using image files).



Data Code Dashboard

Interactive bar chart | Tooltip + slider

More interactive features such as sliders allow the reader to adjust the chart itself to their needs. It also allows for an additional dimension such as change over time (as in this example).



Data Code Dashboard

Trellis chart

Many small charts put together in a "trellis". This is an alternative to using colours on a single chart.



Data Code Dashboard API

Bar with hover

A chart with a tooltip revealing more information about the data. The opacity of the bars adjusts with mouse hover, helping the user identify which bar has been selected.



Data Code Dashboard API

Scatter and bubble

Basic scatter

The simplest scatter plot



Data Code Dashboard

Basic scatter

The simplest scatter plot



Data Code Dashboard

Bubble: x, y, colour, size.

The simplest scatter plot



Data Code Dashboard

Scatter: Five variables.

This chart takes variables to the extreme: there is probably too much going on here for it to be useful, but worth knowing it is possible.



Data Code Dashboard

Football scatter: tooltip and number format.

This chart includes a tooltip - hover over the dots to see the countries. The numbers in the tooltip are formatted to make them nicer to read. Based on an idea by Vikram Rajendran



Data Code Dashboard

UK prices scatter: interactive.

This chart is interactive. Click on the legend to isolate items of interest. Zoom in and out of crowded areas to inspect the data.



Data Code Dashboard

Area charts

Area | Interactive | Click legend

Adding interactivity by allowing the user to click on the legend to highlight the series they are interested in.



Data Code Dashboard