StackedHorizontalBarChart

A responsive stacked horizontal bar chart with multiple bars, where markers can be added to mark results or points.

Installation

The package can be installed via NPM:

npm install react-stacked-horizontal-bar-chart

React and prop-types are peer dependencies that you have to install yourself, you need to install react version that supports hooks.

Demo

Some examples can be be found here, https://codesandbox.io/s/gracious-khayyam-i7xbt?file=/src/App.js

Usage

import { StackedHorizontalBarChart } from 'react-stacked-horizontal-bar-chart';

const Component = () => {
  return (
    <StackedHorizontalBarChart
      rangesPoints={[0, 10, 20, 30]}
      backgroundColors={['#4F81BD', '#C0504D', '#9BBB59']}
    />
  );
};

Prop	Type	Default Value	Description
height	Integer	10	Height of the bars
rangesPoints	Array	[]	Array of unique numbers to mark bars, numbers can be negative, positive, or zero, but the array should be sorted
ranges	Array	[]	Array of bars widths, rangesPoints and ranges should not be used together, only one of them should be used
edges	Array	[]	Array of two elements, either string or number, will be used to mark the edges of the graph, regardless of the actual values
backgroundColors	Array	required	Array of colors to use for corresponding bars, if backgroundColors length is less than bars, then colors will be reused based on mod index
points	Array	[]	Array of marker objects that should be added to the graph
shouldLimitPointsPositions	Boolean	true	Markers should be kept within the bounds of the graph regardless of their values
classes	Object	{}	Object used to override default classes

License

Licensed under MIT license, see LICENSE for the full license.