Skip to content

ricardodorosario/react-horizontal-stacked-bar-chart

Repository files navigation

version release downloads license

react-horizontal-stacked-bar-chart

React horizontal stacked bar responsive chart component.

HSBar Example

Example

HSBar

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"
  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