https://github.com/marudhupandiyang/peity-react
Progressive <svg> bar and line charts based on http://benpickles.github.io/peity
https://github.com/marudhupandiyang/peity-react
mini-graph react react-component svg-graph
Last synced: about 1 month ago
JSON representation
Progressive <svg> bar and line charts based on http://benpickles.github.io/peity
- Host: GitHub
- URL: https://github.com/marudhupandiyang/peity-react
- Owner: marudhupandiyang
- License: mit
- Created: 2017-11-21T04:42:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-12T10:39:21.000Z (over 5 years ago)
- Last Synced: 2025-04-15T15:13:25.112Z (about 1 month ago)
- Topics: mini-graph, react, react-component, svg-graph
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Peity-React
This is a fork of https://github.com/mustangostang/react-peity. Inital port credits to [mustangostang](https://github.com/mustangostang)
A React version of an excellent [peity](https://github.com/benpickles/peity) library for beautiful mini `` graphs.
Since `peity` is heavily dependent on jQuery, for 2016, a React version was badly needed.
See the examples at [peity](http://benpickles.github.io/peity/) page.
Currently supports `Line` and `Bar` widgets. Will add more in future as time permits.
Supports React >= v15.6.2
### Installation:
`npm install peity-react`
### Usage:
#### Line Graph
```
import { Line } from 'peity-react';
```
Output of the above `Line` graph.
### Line options (default)
```
delimiter: "," # You can use string as values as well
fill: "#c6d9fd"
height: 16
min: 0
max: -Infinity
stroke: "#4d89f9"
strokeWidth: 1
width: 32
```
#### Bar Graph
```
import { Bar } from 'peity-react';
```
Output of the above `Bar` graph.
### Bar options (default)
```
delimiter: ","
fill: ["#4D89F9"] # Use several fills, they will be cycled
height: 16
min: 0
max: -Infinity
padding: 0.1
width: 32
```