Menu
- Why Eleventy?
- Get Started
- Community
- Working with Templates
- Using Data
- Configuration
- Template Languages
- Plugins
- API Services
- Release History
- Advanced
Eleventy
5.81s
Astro
12.52s
Sparklines
Contents
Feed this runtime service a comma separated list of numeric values and it will return an SVG sparkline image.
Open Source Jump to heading
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 anx
.[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">