<spark-line>

Unfortunately, this page requires JavaScript to display sparklines and use the interactive example.

Installation Permalink ¶

Available on npm:

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

You can also download it directly from GitHub:

https://github.com/chrisburnell/spark-line/archive/main.zip

Usage Permalink ¶

This package 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 an import to your existing JS:

import "@chrisburnell/spark-line/spark-line"

Or as its own reference in your HTML:

<script type="module" src="`/spark-line.js"></script>

Then you can start using <spark-line>!

<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
stroke-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

is-land Permalink ¶

Since this custom Web Component requires JavaScript to function, it could be a good idea to put it behind some kind of partial hydration. For my site, in particular, I’ve decided to use <is-land>, which works as a framework independent partial hydration islands architecture implementation.

If you wanted to use <is-land> as well, I recommend something like the following as a solid baseline:

<is-land on:visible>
	<spark-line webc:keep :values="this.values" :curve="this.curve" :color="this.color" :colors="this.colors" :endpoint-color="this['endpoint-color']" :points="this.points" :line-width="this['line-width']" :start-label="this['start-label']" :end-label="this['end-label']"></spark-line>

	<template webc:raw data-island="once">
		<script type="module" :src="`/js/components/spark-line.js`"></script>
	</template>
</is-land>

Examples Permalink ¶

Interactive Example Permalink ¶

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

Values
Line Width
Curve
Endpoint
Color
Endpoint Color