Bar charts are one of the most effective ways to display and represent data. They are commonly used to highlight comparisons between categories of data.

Having a bar chart in our web application helps convey relational information quickly.

This article will demonstrate creating a bar chart in a Next.js application.

Sandbox

We completed this project in Codesandbox. Fork and run it to quickly get started.

GitHub

Check out the complete source code here:

https://github.com/shosenwales/Next-Chart

Prerequisites

To follow this tutorial, we'll need a basic understanding of JavaScript and Next.js.

Project Setup

We’ll start by creating a new Next.js project by running the following command:

1npx create-next-app <project-name>

After successfully creating a project, we need to navigate into the project directory and start our development server by running the following commands:

1cd <project-name>  #changing directory
2npm run dev        #starting development server

Next.js will start a development environment, which can be accessed at http:localhost:3000.

Create Bar Chart

To create our chart, we'll be using a package called react-chartjs-2. It is a wrapper for chart.js that allows us to use charts.js elements as react components, making it easier to implement charts.

We can install it by running the following command:

1npm i react-chartjs-2 chart.js

Next, let's edit our index.js by replacing it with the following code snippet:

1import { Bar } from "react-chartjs-2";
2    import Chart from "chart.js/auto";
3    const VulnChart = () => {
4      return (
5        <div>
6          <Bar
7            data={{
8              labels: ["Sqli", "XSS", "XXE", "Open Redirect", "Broken Authentication"],
9              datasets: [
10                {
11                  label: "# of vulnerabilities",
12                  data: [15, 12, 6, 7, 4],
13                  backgroundColor: ["red", "yellow", "blue", "black", "green"],
14                  borderColor: "orange",
15                  borderWidth: 5
16                },
17              ]
18            }}
19            height={300}
20            width={500}
21            options={{
22              maintainAspectRatio: false
23            }}
24          />
25        </div>
26      );
27    };
28    export default VulnChart;

Let’s take a closer look at the code snippet above:

First, we imported the Bar component from react-chartjs-2. Next, we used the Bar component, which takes in the data object, width, and height. The data object contains labels and datasets.

labels which is an array of data displayed on the x-axis(bottom) of the chart, representing each column. datasets is a collection of objects that represents specific data value and contains different properties such as:

label: Usually displayed on top of the chart and toggles on and off the chart when clicked
data: Data values
backgroundColor: Specifies the color for our data values, a single color or multiple colors can be specified, used standard colors or rgba
borderColor: sets the border color for our data values single color or multiple colors can be specified, uses standard colors or rgba
borderWidth: Specifies amount of border width

Now we should have the result below in our browser:

Image of a bar chart

We can also create multiple datasets and toggle between them. We can do that by adding another object to our datasets. At this stage, our index.js should be similar to this:

1import { Bar } from "react-chartjs-2";
2    import Chart from "chart.js/auto";
3    const VulnChart = () => {
4      return (
5        <div>
6          <Bar
7            data={{
8              labels: [
9                "Sqli",
10                "XSS",
11                "XXE",
12                "Open Redirect",
13                "Broken Authentication"
14              ],
15              datasets: [
16                {
17                  label: "# of vulnerabilities",
18                  data: [15, 12, 6, 7, 4],
19                  backgroundColor: ["red", "yellow", "blue", "black", "green"],
20                  borderColor: "orange",
21                  borderWidth: 5
22                },
23                {
24                  label: "Web Apps",
25                  data: [20, 13, 6, 8, 9],
26                  backgroundColor: "purple",
27                  borderColor: "red",
28                  borderWidth: 5
29                }
30              ]
31            }}
32            height={300}
33            width={500}
34            options={{
35              maintainAspectRatio: false
36            }}
37          />
38        </div>
39      );
40    };
41    export default VulnChart;

https://www.dropbox.com/s/rmv9tsjy1ox095x/giphy%281%29.mp4?dl=0

Conclusion

This post discussed how to create a bar chart in Next.js applications.

Resources

Chart.js documentation

Create a Bar Chart in Next.js