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.