https://github.com/rowno/sparkline
Lightweight React sparklines ✨ 📈
https://github.com/rowno/sparkline
component javascript react react-component sparkline
Last synced: 8 days ago
JSON representation
Lightweight React sparklines ✨ 📈
- Host: GitHub
- URL: https://github.com/rowno/sparkline
- Owner: Rowno
- License: isc
- Created: 2017-06-26T06:40:43.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-13T21:41:45.000Z (about 3 years ago)
- Last Synced: 2024-11-10T04:57:50.127Z (6 months ago)
- Topics: component, javascript, react, react-component, sparkline
- Language: JavaScript
- Size: 4.52 MB
- Stars: 20
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sparkline
[](https://travis-ci.org/Rowno/sparkline)
[](https://david-dm.org/Rowno/sparkline)
Lightweight React sparklines ✨ 📈
## Install
```sh
yarn add @rowno/sparkline
# or
npm install --save @rowno/sparkline
```
## Example
```js
function Spark() {
const lines = [
{
values: [789, 880, 676, 200, 890, 677, 900],
colors: {
area: 'rgba(217, 227, 237, 0.5)',
line: '#193652'
}
}, {
values: [354, 456, 200, 566, 344, 467, 545],
colors: {
area: 'rgba(199, 228, 255, 0.5)',
line: '#004585'
}
}
]
return (
)
}
```
Outputs: 
## Properties
```js
{
width: 56,
height: 12,
lines: [{
values: [789, 880, 676],
colors: {
area: 'rgba(217, 227, 237, 0.5)',
line: '#193652'
},
title: 'Allowed events',
key: 'allowed'
}]
}
```
### width
Type: `number` (required)
Width of the sparkline.
### height
Type: `number` (required)
Height of the sparkline.
### lines
Type: `array` (required)
Objects defining the lines to draw.
#### values
Type: `array` (required)
Numbers that make up the data points of the line.
#### colors
Type: `object`
Custom colors for the line.
##### area
Type: `string`
Color of the line's filled in area.
##### line
Type: `string`
Color of the line's stroke.
#### title
Type: `string`
`title` of the line. Shown as a tooltip in the browser.
#### key
Type: `any`
Unique React `key` of the line.
## License
sparkline is released under the ISC license.
Copyright © 2017, Roland Warmerdam.