How to Create Bar Charts in ReactJS?

Creating a bar chart

To work with react-chartjs, we will be using Vite to scaffold our application. Vite is a front-end tooling application for scaffolding libraries like React and vue. To get started, we will run this command on the terminal, 'npm create vite@latest'. This will unfold the latest features of Vite while bringing a few prompts that needs to be answered.

Next, we will be installing react-chartjs with npm with the following command, “npm install - save chart.js react-chartjs-2”. After installing this, we are ready to create ReactJS bar charts. To start, we will be changing to our new react directory via the terminal, 'cd react-barchart' then run 'code' to start the code editor. Finally, we run 'npm run dev' to start the Hot module reloading on the terminal.

The react chartjs2 provides 4 types of bar charts,

1. Vertical Bar chart
2. Horizontal Bar chart
3. Stacked Bar chart
4. Grouped Bar chart

To create any type of bar chart, we need to import and register some plugins. Since we are working on the bar chart, we first import the bar component then we also import plugins necessary for creating the chart like the bar element, chart among others provided below.

With the react-chartjs, we need to register the plugins after importing them to show that they are being used for the project.

import { Bar } from "react-chartjs-2";
import { BarElement,  CategoryScale,Chart as ChartJS,Legend, LinearScale,Title, Tooltip } from "chart.js";
ChartJS.register(CategoryScale, LinearScale, BarElement,Title,Tooltip,Legend);

The bar chart is a component from react-chartjs2 and it requires two props to visualize data namely,

1. Options
2. Data

Vertical bar chart

Vertical bar charts are charts where bars are stacked vertically (upright facing). It is also known as simple bar charts. To create a vertical bar chart, we will be supplying the options and data props.

const option = {
  responsive: true,
  plugins: {
    legend: { position: "chartArea" },
    title: {
      display: true,
      text: "Modular Bar Chart",
    },
  },
};
const data = {
labels=["Jan", "Feb", "Mar", "Apr", "May", "Jun"];,
datasets: [
{
label: "Product A",
data: [ 20, 30, 40, 50, 60,70],
backgroundColor: "green",
},
{
label:'Product B',
data:[15,20,25,40,45,60],
backgroundColor:'blue'
},
],
};
export default function App() {
return (
<div className="App">
<Bar options={option} data={data} />
</div>
);
}

Running this code, we get a vertical bar chart which represents our data, it contains a few options to adjust its orientation.

1. Responsive is set to true to make our chart responsive i.e adjust to device screen size.
2. Legend is set to the top position to show a description of labels of each data at the top. Legend has other positions depending on preference including bottom, left, right, chart area.
3. Title is set to display true that displays the title of our bar chart, its text is set to title of our bar chart.

Horizontal bar chart

Horizontal bar charts are stacked horizontally. Here is how we provided the options and data needed to create a horizontal bar chart.

const option={
  indexAxis:'y',
  elements:{
    bar:{
      borderWidth:1,
    }
  },
  responsive:true,
  plugins:{
    legend:{
      position:'right'
    },
    title:{
      display:true,
      text:' Horizontal bar chart'
    }
  }
}
const data = {
labels=["Jan", "Feb", "Mar", "Apr", "May", "Jun"];,
datasets: [
{
label: "Product A",
data: [ 20, 30, 40, 50, 60,70],
backgroundColor: "green",
},
{
label:'Product B',
data:15,20,25,40,45,60],
backgroundColor:'blue'
},
],
};
export default function App() {
return (
<div className="App">
<Bar options={option} data={data} />
</div>
);
}

Stacked bar chart

Stacked bar charts are stacked against each other and it requires a scales property with the option, stacked set to true.

const option={
  indexAxis:'y',
  elements:{
    bar:{
      borderWidth:4,
    },
  },
  responsive:true,
  interaction:{
    mode:'index',
    intersect:false
  },
  scales:{
    x:{
      stacked:true
    },
    y:{
      stacked:true
    }
  },
  plugins:{
    legend:{
      position:'right'
    },
    title:{
      display:true,
      text:'Stacked bar chart'
    }
  }
}
const data = {
labels=["Jan", "Feb", "Mar", "Apr", "May", "Jun"];,
datasets: [
{
label: "Product A",
data: [20,30,40, 50, 60,70],
backgroundColor: "green",
},
{
label:'Product B',
data:[15,20,25,40,45,60],
backgroundColor:'blue'
},
{
label:'Product C',
data:[10,12,14,16,18,20],
backgroundColor:'orange'
}
],
};
export default function App() {
return (
<div className="App">
<Bar options={option} data={data}/>
</div>
);
}

Grouped bar chart

Grouped bar charts are grouped together relative to the kind of data provided. Similar to other charts, we will be providing the options and data needed for the chart. It also has the scales property where we set the stacked option to true.

const optionX={
  indexAxis:'y',
  elements:{
    bar:{
      borderWidth:4,
    },
  },
  responsive:true,
  interaction:{
    mode:'index',
    intersect:false
  },
  scales:{
    x:{
      stacked:true
    },
    y:{
      stacked:true
    }
  },
  plugins:{
    legend:{
      position:'right'
    },
    title:{
      display:true,
      text:'Grouped bar chart'
    }
  }
}
const data = {
labels=["Jan", "Feb", "Mar", "Apr", "May", "Jun"];,
datasets: [
{
label: "Product A",
data:[20,30,40,50,60,70],
backgroundColor: "green",
},
{
label:'Product B',
data:[15,20,25,40,45,60],
backgroundColor:'blue'
},
{
label:'Product C',
data:[10,12,14,16,18,20],
backgroundColor:'orange'
}
],
};
export default function App() {
return (
<div className="App">
<Bar options={option} data={data}/>
</div>
);
}

Conclusion

The react-chartjs2 provides a brilliant implementation of charts, especially the ReactJS bar chart. It is so easy to understand and work with. It also features different props that can be used based on the requirement of the chart being worked on.