@marstankev/react-horizontal-stacked-bar-chart v8.18.1

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

import HSBar from "react-horizontal-stacked-bar-chart";

Simple

<HSBar data={[{ value: 10 }, { value: 20 }]} />

Complete

<HSBar
  height={50}
  showTextIn
  showTextUp
  showTextDown
  outlineWidth: {0.5},
  outlineColor: "black"
  id="new_id"
  fontColors=["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
• fontColors: PropTypes.arrayOf(PropTypes.string),
• onClick: PropTypes.func
• outlineWidth: PropTypes.number
• outlineColor: PropTypes.arrayOf(PropTypes.string)
• textAlign: PropTypes.string

Default Properties

• height: 30
• showTextWithValue: true
• showTextIn: false
• showTextUp: false
• showTextDown: false
• showValueIn: false
• showValueUp: false
• showValueDown: false
• fontColors: []
• outlineWidth: 0
• outlineColor: "black"
• id: "hsbar"
• textAlign: "left"

Data object list

• value: Required
• name: Optional
• description: Optional
• color: Optional