How to Create a Bar Chart in ReactJS?

In this blog, I will explain How to Create a Bar Chart in ReactJS.

Creating a bar chart in ReactJS involves using a charting library like react-chartjs-2, which is a React wrapper for the popular Chart.js library. In this example, I’ll show you how to create a simple bar chart using react-chartjs-2. First, make sure you have React and react-chartjs-2 installed in your project.

Here are the steps to create a basic bar chart in ReactJS:

Create a new React project or navigate to your existing project directory.
Install the required dependencies using npm or yarn:

npm install react-chartjs-2 chart.js
# or
yarn add react-chartjs-2 chart.js

Create a new component for your bar chart. For example, you can create a file named BarChart.js:

// BarChart.js

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

const BarChart = () => {
  // Sample data for the bar chart
  const data = {
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
    datasets: [
      {
        label: 'Sample Bar Chart',
        data: [12, 19, 3, 5, 2],
        backgroundColor: 'rgba(75, 192, 192, 0.6)', // Bar color
        borderColor: 'rgba(75, 192, 192, 1)', // Border color
        borderWidth: 1,
      },
    ],
  };

  // Bar chart options
  const options = {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return (
    <div className="chart-container">
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChart;

In your main React component or the component where you want to display the bar chart, import and render the BarChart component:

// App.js (or your main component)

import React from 'react';
import './App.css';
import BarChart from './BarChart';

function App() {
  return (
    <div className="App">
      <h1>Bar Chart Example</h1>
      <BarChart />
    </div>
  );
}

export default App;

Style your chart and customize it further using CSS or additional Chart.js configuration options as needed.
Start your React development server to view the bar chart in your browser:

npm start
# or
yarn start

Now, you should have a basic bar chart displayed in your React application using react-chartjs-2. You can further customize the chart by referring to the Chart.js documentation for more advanced features and options: https://www.chartjs.org/docs/latest/

How to Create a Bar Chart in ReactJS?

Further Reading

Leave a Reply Cancel reply

Further Reading

You may also like...

How to display Hello World! using a functional component in React?

Introduction to React JS

How to change the background color of a component on button click using state in React?

Leave a Reply Cancel reply