react-horizontal-stacked-bar-chart
React horizontal stacked bar responsive chart component.
Example
Installation via NPM
npm install react-horizontal-stacked-bar-chart --save
Usage
;
Simple
<HSBar data= value: 10 value: 20 />
Complete
<HSBar height=50 showTextIn showTextUp showTextDown outlineWidth: 05 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= console;/>
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