Sparklines

Community Resources:

Every Fire Needs a Sparkline

+ Add yours!

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

Open Source Jump to heading #

• 11ty/api-sparkline on GitHub

Usage Jump to heading #

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 Jump to heading #

Using color #123456:

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

• IndieWeb Avatar
• OpenGraph Image
• Sparklines
• Screenshots