Implementing Bar Chart
In this approach, we are implementing a Bar Chart using Chart.js in Next.js 13 with client-side rendering and dynamic import. The Bar component from react-chartjs-2 is dynamically imported to ensure it’s only rendered on the client side, and inline styles are used to set the dimensions of the chart container to 700×700 pixels.
Example: Below is an example of a Bar Chart implemented using the ChartJS Package in NextJS.
// page.js this is the entry point of application
"use client";
import dynamic from 'next/dynamic';
import 'chart.js/auto';
const Bar = dynamic(() => import('react-chartjs-2').then((mod) => mod.Bar), {
ssr: false,
});
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'w3wiki Bar Chart',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
const BarChart = () => {
return (
<div style={{ width: '700px', height: '700px' }}>
<h1>Example 2: Bar Chart</h1>
<Bar data={data} />
</div>
);
};
export default BarChart;
Start your application using the following command.
npm run dev
Output:
How to Add ChartJS in NextJS 13?
Chart.js in Next.js is the package used to create interactive and visually appealing charts, such as line charts, bar charts, and more, seamlessly integrated into Next.js applications.
In this article, we will explore the demonstration of various charts in the NextJS application.
Table of Content
- Implementing Line Chart
- Implementing Bar Chart