# @chrisburnell/spark-line

> Turn any array of integers into a fun little chart

Latest version **1.2.6** (published 2023-09-06) · CC0 license · 0 weekly downloads

## Install

```sh
npm install @chrisburnell/spark-line
pnpm add @chrisburnell/spark-line
yarn add @chrisburnell/spark-line
bun add @chrisburnell/spark-line
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2023-09-06 |
| First published | 2021-10-21 |
| Weekly downloads | 0 |
| License | CC0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Chris Burnell |
| Maintainers | chrisburnell |
| Keywords | chart, javascript, js, sparkline, web component |

## Links

- npm: https://www.npmjs.com/package/@chrisburnell/spark-line
- Repository: https://github.com/chrisburnell/spark-line
- Homepage: https://github.com/chrisburnell/spark-line#readme
- Issues: https://github.com/chrisburnell/spark-line/issues
- npm.io page: https://npm.io/package/@chrisburnell/spark-line

## Recent versions

- 1.2.6 (latest) — 2023-09-06
- 1.2.5 — 2023-09-06
- 1.2.4 — 2023-02-02
- 1.2.3 — 2023-02-01
- 1.2.2 — 2022-10-16
- 1.2.1 — 2022-10-08
- 1.2.0 — 2022-05-23
- 1.1.2 — 2022-05-20
- 1.1.1 — 2022-05-14
- 1.1.0 — 2021-12-09
- 1.0.4 — 2021-11-08
- 1.0.3 — 2021-10-21
- 1.0.2 — 2021-10-21
- 1.0.1 — 2021-10-21
- 1.0.0 — 2021-10-21

## README

# 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](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!

```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/](https://chrisburnell.com/spark-line/).

## Contributing

Contributions of all kinds are welcome! Please [submit an Issue on GitHub](https://github.com/chrisburnell/spark-line/issues) or [get in touch with me](https://chrisburnell.com/about/#contact) if you’d like to do so.

## License

This project is licensed under a CC0 license.

---
_Source: https://npm.io/package/@chrisburnell/spark-line · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._