react-horizontal-stacked-bar
Version:
React horizontal stacked bar responsive chart component
102 lines (82 loc) • 2.64 kB
Markdown
[](https://www.npmjs.com/package/react-horizontal-stacked-bar-chart)
[](https://github.com/ricardodorosario/react-horizontal-stacked-bar-chart)
[](https://npm-stat.com/charts.html?package=react-horizontal-stacked-bar-chart&from=2018-12-17)
[](http://opensource.org/licenses/MIT)
# react-horizontal-stacked-bar-chart
React horizontal stacked bar responsive chart component.
## Example
[](https://codesandbox.io/s/9k2jqjr9y)
## Installation via NPM
```bash
npm install react-horizontal-stacked-bar-chart --save
```
## Usage
```js
import HSBar from "react-horizontal-stacked-bar-chart";
```
Simple
```js
<HSBar data={[{ value: 10 }, { value: 20 }]} />
```
Complete
```js
<HSBar
height={50}
showTextIn
showTextUp
showTextDown
outlineWidth: {0.5},
outlineColor: "black"
id="new_id"
fontColor="rgb(50,20,100)"
data={[
{
name: "To pay",
value: 80,
description: "U$80,00",
color: "red"
},
{
name: "Paid",
value: 200,
description: "U$200,00",
color: "rgb(150,150,220)"
}
]}
onClick={e => console.log(e.bar);}
/>
```
### Properties
- data: PropTypes.array.isRequired
- id: PropTypes.string
- height: PropTypes.number
- showTextWithValue: PropTypes.bool
- showTextIn: PropTypes.bool
- showTextUp: PropTypes.bool
- showTextDown: PropTypes.bool
- showValueIn: PropTypes.bool
- showValueUp: PropTypes.bool
- showValueDown: PropTypes.bool
- fontColor: PropTypes.string
- onClick: PropTypes.func
- outlineWidth: PropTypes.number
- outlineColor: PropTypes.string
### Default Properties
- height: 30
- showTextWithValue: true
- showTextIn: false
- showTextUp: false
- showTextDown: false
- showValueIn: false
- showValueUp: false
- showValueDown: false
- fontColor: "white"
- outlineWidth: 0
- outlineColor: "black"
- id: "hsbar"
### Data object list
- value: Required
- name: Optional
- description: Optional
- color: Optional