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

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…