spark-line

Easy inline SVG sparklines for HTML.

spark-line is a zero-dependency custom element (built on dataroom-js) that renders a comma-separated list of numbers as a tiny line chart, right inside a paragraph of text.

Source and issue tracker: github.com/lnsy-dev/spark-line

<p>
  Sales were <spark-line values="5,4,3,5,6"></spark-line> this quarter.
</p>

Installation

npm install @lnsy/spark-line

Usage

Import the package once to register the custom element:

import '@lnsy/spark-line';

Then use <spark-line> anywhere in your HTML:

<spark-line values="12,15,13,14,12,11,12"></spark-line>

Attributes

| Attribute | Description | |-----------|-------------| | values | Comma-separated list of numbers to plot. |

The component re-renders automatically when the values attribute changes.

Styling

The spark line inherits the surrounding text color and scales with the parent font size:

p {
  color: #0a5c0a;
  font-size: 1.2rem;
}

You can also import the component CSS directly if you want to handle styles yourself:

import '@lnsy/spark-line/styles/spark-line.css';
import '@lnsy/spark-line/src/spark-line.js';

Development

Install dependencies and Playwright browsers:

npm install
npx playwright install

Start the dev server:

npm start

Build for production:

npm run build

Run the test suite:

npm test

Publishing

The package is configured to build automatically before publishing:

npm run build
npm pack --dry-run
npm publish

License

Unlicense