Add a Stacked Bar Chart Easily with the react-horizontal-stacked-bar-chart Library

Image for post
Image for post
Photo by Carles Rabada on Unsplash

The react-horizontal-stacked-bar-chart library lets us add a bar chart easily in our React app.

In this article, we’ll look at how to use it to add a stacked bar chart to our React app.

Installation

We can install the library by running:

npm i react-horizontal-stacked-bar-chart

Simple Chart

After we installed the package, we write:

import React from "react";
import HSBar from "react-horizontal-stacked-bar-chart";
export default function App() {
return (
<div className="App">
<HSBar data={[{ value: 10 }, { value: 20 }]} />
</div>
);
}

to add 2 bars stacked together with the HSBar component.

There is nothing else displayed except the bars.

Complete Chart

To add a complete chart with the labels, we write:

import React from "react";
import HSBar from "react-horizontal-stacked-bar-chart";
export default function App() {
return (
<div className="App">
<HSBar
height={50}
showTextIn
showTextUp
showTextDown
outlineWidth={0.5}
outlineColor="black"
id="chart"
fontColor="rgb(50,20,100)"
data={[
{
name: "Owed",
value: 80,
description: "$80,00",
color: "red"
},
{
name: "Paid",
value: 200,
description: "$200,00",
color: "lightgreen"
}
]}
onClick={(e) => console.log(e.bar)}
/>
</div>
);
}

The showTextIn prop shows text inside the bars.

showTextUp shows the label text above the bars.

showTextDown shows the label text below the bars.

outlineWidth has the width of the border.

outlineColor has the color of the border.

fontColor has the font color.

data has the data for the stacked bars.

The name has the name that is displayed in the labels.

value has the length of the bar.

description has the description shown before the name .

color has the color of the bar.

onClick is a function that’s called when the bar is clicked.

A single bar would be displayed with the bars with thedata array stacked together.

Conclusion

The react-horizontal-stacked-bar-chart library lets us add a stacked bar chart within a React app with a single bar.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store