Simple SVG linecharts
We make a lot of barcharts at ODI Leeds. But sometimes a bar chart isn't enough. Sometimes you want a simple line chart.
A few of our recent projects have needed line charts e.g. on our COVID-19 dashboard, our graphs of ONS weekly death statistics, and in our internal website analytics. Each time I've built something from scratch. It was about time to use a library.
There are lots of existing charting libraries including (but not limited to):
- Plotly (3.32MB minified; 0.99MB gzipped) has lots of chart styles and functionality
- Vega Lite (~2MB minified; 370kB gzipped) has lots of chart styles and functionality
- D3 (264kB minified; 82kB gzipped) has lots of chart styles and functionality
- chart.js (227kB minified; 68.5kB gzipped) has lots of chart styles and functionality
- μPlot (36.8kB minified; 17kB gzipped) has several chart styles
- Graph.js (5.7kB minified; 2.1kB gzipped) is a very basic line chart
Many of these provide far more features than we actually need and in doing so they add quite a lot of page weight. Also, we've had various amounts of success in customising the style to fit in with the look we need. The last two in this list fit my minimalist (and lower CO2 emissions) tendencies but they render on
canvas with limited styling. I've been working with SVG a lot recently and I wanted a nice, small, SVG line chart library where the result can be styled in the page.
The library creates a
g element for each series. Each of these contain
circle elements for the data points and a
path for the line. When updating the data, the library can smoothly animate the line and points. Tooltips can be attached to the points and the contents of the tooltips can be customised based on the data. Each data point also has the
tabindex property set so that keyboard users (e.g. using a screenreader such as Windows Narrator) can move between points and hear the contents of the tooltips. Hopefully that makes the line charts more accessible than most.
This library is mostly developed for our own internal use but we're sharing it openly so others can make use of it where it fits their needs.