react-chartjs-2

 

https://www.npmjs.com/package/react-chartjs-2

react-chartjs-2

import React from "react";
import { Bar } from "react-chartjs-2";

const data = {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
        {
            label: "Dataset 1",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: "red",
        },
        {
            label: "Dataset 2",
            data: [2, 3, 20, 5, 1, 4],
            backgroundColor: "blue",
        }
    ]
};

const options = {
    plugins: {
        title: {
            display: true,
        },
    },
    responsive: true,
    scales: {
        x: {
            stacked: true,
        },
        y: {
            stacked: true,
        },
    },
};

const StackedBar = () => (
    <>
        <div className="header">
            <h1 className="title">Stacked Bar Chart</h1>
        </div>
        <Bar data={data} options={options} />
    </>
);

export default StackedBar;