Skip to main content

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):

  • Google charts (a few MB of Javascript) has lots of chart styles and functionality
  • 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.

SVG is a scalable vector graphic which means it looks crisp regardless of screen resolution. When it is inline in an HTML page, elements can also be styled with CSS and interactivity can be added with Javascript. The disadvantages of inline SVG is that it doesn't work well if you have thousands of points as browsers tend to struggle. But most of our use-cases don't have anywhere near that number of points.

I decided to create our own small, customisable, standalone, Javascript library for simple SVG linecharts (14kB minified; 6kB gzipped). To keep it small I haven't included code that would calculate "nice" ranges of data or "nice" tick marks on the axes. Those choices are left outside the library to be made for each specific visualisation where we usually know what we want to show. For data that is time-based this removes lots of complication from the line chart itself and lets us pick the "nice" times on a per project basis.

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.

Examples

Graph showing the monthly minimum and maximum temperature in Leeds as two series. Hovering over a point (or tabbing to it) brings up an information tooltip.
Change the data and animate the line.
A graph showing the yearly measured and projected income for an example company. This is styled to look like graphics produced by The Data City to demonstrate styling possibilities. In this example the points aren't visible by default but can be highlighted.

Conclusion

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.