<spark-line> v1.2.0

Turn any array of integers into a fun little chart. Lends well to “automusic”.

There are three star-gazers on GitHub and it was downloaded 248 times in the last month on npm.

Hey, psst!… You can jump straight down to the examples!

Installation

Available on npm:

npm install @chrisburnell/spark-line --save-dev

You can also just download it directly from GitHub:
https://github.com/chrisburnell/spark-line/archive/main.zip

Usage

This exposes/makes available a Custom HTML Element I’m calling spark-line. While this requires JavaScript on the front end, it makes the process of invoking and displaying sparklines for X,Y data very simple.

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>

The element takes a number of attributes:

Values Description
values
(required)
comma-delimited string of integers defines the values of the graph
line-width 2 (default) defines the width/thickness of the line as an integer
curve true (default) toggles applying curves (cardinal splines) to the line
endpoint true (default) toggles the display of a point at the end of the line
color currentColor (default) defines the color of the line
endpoint-color color (default) defines the color of the endpoint
points comma-delimited string of integers 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 comma-delimited string of integers 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 string creates a label before the graph
end-label string creates a label after the graph

Examples

default

line-width="4"

curve="false"

endpoint="false"

color="rebeccapurple"

endpoint-color="red"

points="1"

points="1,0"

points="0,2,0,1"

endpoint-color="red" points="0,2,0,1"

colors="red"

points="1" colors="rebeccapurple"

points="1" colors="red,green,blue"

rainbow!

start-label="Start" end-label="End"

Interactive Example

That’s right! All spark-lines are dynamic out-of-the-box!