https://github.com/silverwind/sparkz
Generate SVG sparklines
https://github.com/silverwind/sparkz
Last synced: 12 months ago
JSON representation
Generate SVG sparklines
- Host: GitHub
- URL: https://github.com/silverwind/sparkz
- Owner: silverwind
- License: other
- Created: 2020-03-30T18:48:02.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-31T07:14:07.000Z (about 6 years ago)
- Last Synced: 2025-05-24T07:19:40.780Z (about 1 year ago)
- Language: JavaScript
- Size: 654 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sparkz [](https://www.npmjs.org/package/sparkz) [](https://www.npmjs.org/package/sparkz)
> Generate SVG sparklines
## Install
```
npm i sparkz
```
```js
import sparkz from "sparkz";
```
## API
### `sparkz(svg, values, options = {})`
- `svg`: This is a `` reference that must contain three required attributes (`width`, `height`, and `stroke-width`). These attributes are used to calculate the drawing area.
- `values`: You can either provide an array of numbers or an array of objects that respond to `.value`. If you have a different data structure, see `options.fetch`.
- `options`: This optional argument allows you to further customize the sparkline. The available options are:
- `fetch`: Use this function to return the value if you have a different data structure that's not natively supported by sparkz.
- `onmousemove`: By setting this callback function, you'll enable the interactive mode (unless you set `options.interactive` to `false`). The callback signature is `callback(event, datapoint)`, where `datapoint` is an object containing the value, x/y coordinates, and the item index.
- `onmouseout`: This callback function is called every time the mouse leaves the SVG area. You can use it to hide things like tooltips.
- `spotRadius`: Set the spot radius. The default is `2`.
- `cursorWidth`: Set the cursor width. The default is `2`.
- `interactive`: When `true`, this enables the interactive mode. You don't have to set this option if you're providing a `onmousemove` callback.
- `fill`: Value to use for the `fill` attribute on the `` area and spot `circle`.
## Usage
This is the minimum working example:
```html
sparkz(document.querySelector(".sparkz"), [1, 5, 2, 4, 8, 3, 7]);
```
You can change the colors by either setting the attributes directly to the SVG element or using CSS, like the following:
```css
/* just the line */
.sparkz {
stroke: red;
fill: none;
}
/* line with highlight area */
.sparkz {
stroke: red;
fill: rgba(255, 0, 0, .3);
}
/* change the spot color */
.sparkz--spot {
stroke: blue;
fill: blue;
}
/* change the cursor color */
.sparkz--cursor {
stroke: orange;
}
/* style fill area and line colors using specific class name */
.sparkz--fill {
fill: rgba(255, 0, 0, .3);
}
.sparkz--line {
stroke: red;
}
```
## License
Copyright (c) silverwind
Copyright (c) 2018 Nando Vieira