Turn any array of integers into a fun little chart.
I probably won't be updating this very much anymore, as I've since built <svg-sparkline>
, another Web Component for building sparklines but using SVG instead of Canvas!
It's been built with a lot more care, and I recommend you use it instead of <spark-line>
.
- With npm:
npm install @chrisburnell/spark-line
- Direct download: https://github.com/chrisburnell/spark-line/archive/main.zip
Include spark-line.js
in your page however you like (as-is, as part of a build script, etc.).
Use <spark-line>
in your HTML!
<spark-line values="1,2,3,5,8,13,21"></spark-line>
Element attributes:
values
: comma-delimited string of integers (required)line-width
: defines the width/thickness of the line as an integer (default = 2)curve
: toggles applying curves (cardinal splines) to the line (default = true)endpoint
: toggles the display of a point at the end of the line (default = true)color
: defines the color of the line (default = currentColor)endpoint-color
: defines the color of the endpoint (defaults to whatever color is defined as)points
: supercedes endpoint; comma-delimited string of integers representing at which pairing values you want points to appear at; arrays of a length less than the length of the values array will be looped over according to valuescolors
: supercedes endpoint-color; comma-delimited string of integers representing the colour of the paired points; arrays of a length less than the length of the values array will be looped over according to valuesstart-label
: creates a label before the chartend-label
: creates a label after the chart
I wrote more about spark-line and laid out some examples here: https://chrisburnell.com/spark-line/.
Contributions of all kinds are welcome! Please submit an Issue on GitHub or get in touch with me if you’d like to do so.
This project is licensed under a CC0 license.