Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Blog
11ty is joining Font AwesomeIndieWeb Avatar for https://fontawesome.com/
Versions
Stable
2.0.1
Toggle Menu
Compare npm install
Eleventy 5.81s
Gatsby 43.36s

Sparklines

Contents

Feed this runtime service a comma separated list of numeric values and it will return an SVG sparkline image.

Open Source

Usage

Try it out on the Eleventy API Explorer.

Image URLs have the format:

https://v1.sparkline.11ty.dev/:dimensions/:values/
https://v1.sparkline.11ty.dev/:dimensions/:values/:color/
  • dimensions must be two integers separated by an x. [height]x[width], e.g. 120x30
  • values must be a comma separated list of numbers.
  • color is an SVG friendly color (URI encoded).

Samples

Using color #123456:

Sparkline representing frequency of posts written from 2007 to 2021 
<img
	src="https://v1.sparkline.11ty.dev/120x30/41,25,9,12,10,6,12,14,19,17,23,30,36,21,40/%23123456/"
	width="120"
	height="30"
	alt="Sparkline representing frequency of posts written from 2007 to 2021"
	loading="lazy"
	decoding="async"
/>

Other pages in API Services: