How to make React-Bar chart in react js

Data visualization has always been an neccesary part of frontend development . There’s always a necessary need to visualize data for our users to help them better understand what is going on in our application. Chart.js is a popular JavaScript library used for creating flexible charts on websites, and in this tutorial, I’ll show you how to use Chart.js in a React environment.

Library Needed:

1:Chart.js

2:react-chartjs-2

Line chart.js file is displayed below:

1import React from "react";
2import {Bar } from "react-chartjs-2";
3import Chart from "chart.js/auto";
4
5var options = {
6  legend: {
7    position: "right",
8    labels: {
9      boxWidth: 10
10    }
11  },
12  scales: {
13    xAxes: [
14      {
15        ticks: { display: false }
16      }
17    ]
18  }
19};
20const pieData = {
21  labels: ["Red", "Blue", "Yellow"],
22  datasets: [
23    {
24      data: [300, 50, 100],
25      backgroundColor: ["rgba(255,0,0, 1)", "#36A2EB", "#FFCE56"]
26    }
27  ]
28};
29
30export default class BarChart extends React.Component {
31  render() {
32    return (
33      <>
34        <Bar data={pieData} options={options} />
35      </>
36    );
37  }
38}

App.js file is displayed below

1import "./styles.css";
2import HistChart from "./Barchart";
3
4export default function App() {
5  return (
6    <div className="App">
7      <>
8        <HistChart />
9      </>
10    </div>
11  );
12}

Here is the link of live example which we done so far:
Click here