ONS Svelte Charts Library

Below are a series of charts built using Layer Cake, a responsive charts/graphics framework for Svelte. The charts are all responsive in that they fit to the width of their html container element, and will resize automatically when the screen/window is resized. The charts below can be used in the following ways:

1. The charts and/or their sub-components (axes etc) can be imported into Svelte projects via NPM.
2. The charts also have compiled versions that can be embedded in "vanilla" javascript projects.
3. This whole repository can be downloaded/cloned and hacked to create variations of the charts.

Current features

In all use cases, each top-level chart component (eg. bar chart, scatter chart) is able to take a series of parameters (data, colours, title, etc) to initialise and customise it.

As far as possible these parameters are consistent across chart types, and generally there are sensible default values for all parameters (eg. height = 300 pixels) other than "data", which always requires a Tidy Data array.

Examples of usage

You can see examples of how these charts can be used in a Svelte project in this REPL, and how they can be used in a plain/vanilla javascript project in this CodePen.

Intended features

It is the intention to translate all of the most useful charts from Layer Cake's examples into components, as well as a number of other custom charts (eg. spine charts). For each of the charts, it is the intention to support the following functionalities:

• Every chart type to support a standard Tidy Data format.
• Optional title, legend and footnote types that can be added to charts.
• Optional hover and click-to-select functionality on all relevant chart types with custom events.
• Options/methods for inline labels, tooltips and annotations.
• Optional prefixes and suffixes for axis labels.
• Colour by group (z parameter) with colors = [array], and colours for hovered and highlighted/selected data points.
• Animated transitions when data or keys change (which can be enabled/disabled with animation = true/false).
• To group similar charts in a logical way to improve ease of use and allow for custom combinations and animated transitions (eg. scatter + beeswarm or line + area).
• Possibility to add custom LayerCake SVG/HTML/Canvas layers in front or behind standard layers of any chart.
• Support for pre-rendering and progressive enhancement.

Acknowledgement

These charts are largely based on the chart examples by Michael Keller, the author of the Layer Cake charts/graphics framework for Svelte.