Turn any array of integers into a fun little chart.
npm install @chrisburnell/spark-line
- Direct download: https://github.com/chrisburnell/spark-line/archive/main.zip
spark-line.js in your page however you like (as-is, as part of a build script, etc.).
<spark-line> in your HTML!
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/.
This project is licensed under a CC0 license.