spark-line v1.0.4

NaN Lends well to “automusic”.
There are 2 star-gazers on GitHub and it was downloaded 297 times in the last month on npm.

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

Installation

Yoink it from npm:

npm install @chrisburnell/spark-line

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>

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)
  • start-label: creates a label before the chart
  • end-label: creates a label after the chart

Examples

default

line-width="4"

curve="false"

endpoint="false"

color="rebeccapurple"

endpoint-color="red"

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

Interactive Example

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