spark-line
Turn any array of integers into a fun little chart.
Installation
-
With npm:
npm install @chrisburnell/spark-line - Direct download: https://github.com/chrisburnell/spark-line/archive/main.zip
Usage
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 values -
colors: 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 values -
start-label: creates a label before the chart -
end-label: creates a label after the chart
Examples and more
I wrote more about spark-line and laid out some examples here: https://chrisburnell.com/spark-line/.
Contributing
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.
License
This project is licensed under a CC0 license.