{"id":28496,"date":"2022-06-10T07:56:57","date_gmt":"2022-06-10T07:56:57","guid":{"rendered":"http:\/\/create-a-bar-chart-in-nextjs"},"modified":"2023-09-19T10:30:57","modified_gmt":"2023-09-19T17:30:57","slug":"create-a-bar-chart-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-bar-chart-in-nextjs\/","title":{"rendered":"Create a Bar Chart in Next.js"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

In the realm of web charts, Chart.js is a prominent JavaScript library that simplifies the process of crafting interactive charts. While Chart.js can be used directly in a variety of JavaScript environments, our approach here employs a React-focused wrapper around it. This ensures a seamless integration with Next.js, a React framework. But before diving in, it\u2019s noteworthy that Chart.js is versatile enough to support different types of charts like line charts, pie charts, and radar charts.<\/p>\n

Sandbox<\/h1>\n

We completed this project in Codesandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

GitHub<\/h1>\n

Check out the complete source code here:<\/p>\n

https:\/\/github.com\/shosenwales\/Next-Chart<\/a><\/p>\n

Prerequisites<\/h1>\n

To follow this tutorial, we\u2019ll need a basic understanding of JavaScript and Next.js.<\/p>\n

Project Setup<\/h1>\n

We\u2019ll start by creating a new Next.js project by running the following command:<\/p>\n

 npx create-next-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
After successfully creating a project, we need to navigate into the project directory and start our development server by running the following commands:<\/p>\n
cd<\/span> <project-name<\/span>>  #changing<\/span> directory<\/span>\nnpm<\/span> run<\/span> dev<\/span>        #starting<\/span> development<\/span> server<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next.js will start a development environment, which can be accessed at http:localhost:3000<\/code>.<\/p>\n
Create Bar Chart<\/h1>\n
To create our chart, we\u2019ll be using a package called react-chartjs-2<\/a>. This package serves as a bridge between the Chart.js library and React, letting us utilize Chart.js features in a React-friendly manner. If you\u2019re familiar with Chart.js, you\u2019ll recognize some similarities in configuration and setup, but with the added benefit of integrating it seamlessly with Next.js. It is a wrapper for chart.js<\/a> that allows us to use charts.js elements as react components, making it easier to implement charts.<\/p>\n
We can install it by running the following command:<\/p>\n
 npm<\/span> i<\/span> react-chartjs-2<\/span> chart<\/span>.js<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, let\u2019s edit our index.js<\/code> by replacing it with the following code snippet:<\/p>\n
import<\/span> { Bar } from<\/span> \"react-chartjs-2\"<\/span>;\n    import<\/span> Chart from<\/span> \"chart.js\/auto\"<\/span>;\n    const<\/span> VulnChart = ()<\/span> =><\/span> {\n      return<\/span> (\n        <div<\/span>><\/span>\n          <Bar<\/span>\n            data<\/span>={{<\/span>\n              labels:<\/span> [\"Sqli<\/span>\", \"XSS<\/span>\", \"XXE<\/span>\", \"Open<\/span> Redirect<\/span>\", \"Broken<\/span> Authentication<\/span>\"],\n              datasets:<\/span> [\n                {\n                  label:<\/span> \"# of<\/span> vulnerabilities<\/span>\",\n                  data:<\/span> [15<\/span>, 12<\/span>, 6<\/span>, 7<\/span>, 4<\/span>],\n                  backgroundColor:<\/span> [\"red<\/span>\", \"yellow<\/span>\", \"blue<\/span>\", \"black<\/span>\", \"green<\/span>\"],\n                  borderColor:<\/span> \"orange<\/span>\",\n                  borderWidth:<\/span> 5<\/span>\n                },\n              ]\n            }}\n            height<\/span>={300}<\/span>\n            width<\/span>={500}<\/span>\n            options<\/span>={{<\/span>\n              maintainAspectRatio:<\/span> false<\/span>\n            }}\n          \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> VulnChart;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s take a closer look at the code snippet above:<\/p>\n
labels<\/code> which is an array of data displayed on the x-axis(bottom) of the chart, representing each column. datasets<\/code> is a collection of objects that represents specific data value and contains different properties such as:<\/p>\n
First, we imported the Bar<\/code> component from react-chartjs-2<\/a>. Next, we used the Bar<\/code> component, which takes in the data<\/code> object, width<\/code>, and height<\/code>. The data<\/code> object contains labels<\/code> and datasets<\/code>.<\/p>\n