A Web Component to turn an array of integers into a fun little chart.
CC0-1.0 License
Turn any array of integers into a fun little chart.
<svg-sparkline>
instead?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>
.
npm install @chrisburnell/spark-line
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 chartI 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.