Episyche

Products

Blog

NextJS/Charts/

How to create charts using chart js in Next js?

Published on

Charts can help people better understand and remember information. Chart.js is a popular JavaScript library used for creating flexible charts on websites. In this tutorial, how to create different types of charts in Next js.

Introduction :

Next js :

Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here

Chart.js:

Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, doughnut, bubble, radar, polar, and scatter. To know more about relative links click here

Flow Diagram:

Prerequisites:

Node
Next js
Chart.js

Step 1: Install Nodejs

Before we create Next App we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a Next-app

After installing Node.js open the terminal or command prompt and create the next.js app with the following commands.

1npx create-next-app chart

Step 3: TailwindCSS Configurations:

Check out this tutorial, to configure the tailwind CSS

Step 4: Install Chart.js

After creating the Next.js app then install chart.js commands.

1npm i chart.js@2.9.4

Step 5: Configure Chart.js

Chart Types:

Line Chart
Filled Line Chart
Bar chart
Doughnut Chart
Bubble Chart
Stacked-Bar Chart
Radar Chart
Pie Chart

1. Line Chart Example:

In your project, go to your /pages directory and create a file called linechart.js

In `/pages/linechart.js`, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4  useEffect(() => {
5    var ctx = document.getElementById('myChart').getContext('2d');
6    var myChart = new Chart(ctx, {
7      type: 'line',
8      data: {
9        labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
10        datasets: [{
11          data: [86, 114, 106, 106, 107, 111, 133],
12          label: "Applied",
13          borderColor: "#3e95cd",
14          backgroundColor: "#7bb6dd",
15          fill: false,
16        }, {
17          data: [70, 90, 44, 60, 83, 90, 100],
18          label: "Accepted",
19          borderColor: "#3cba9f",
20          backgroundColor: "#71d1bd",
21          fill: false,
22        }, {
23          data: [10, 21, 60, 44, 17, 21, 17],
24          label: "Pending",
25          borderColor: "#ffa500",
26          backgroundColor: "#ffc04d",
27          fill: false,
28        }, {
29          data: [6, 3, 2, 2, 7, 0, 16],
30          label: "Rejected",
31          borderColor: "#c45850",
32          backgroundColor: "#d78f89",
33          fill: false,
34        }
35        ]
36      },
37    });
38  }, [])
39  return (
40    <>
41      {/* line chart */}
42      <h1 className="w-[110px] mx-auto mt-10 text-xl font-semibold capitalize ">line Chart</h1>
43      <div className="w-[1100px] h-screen flex mx-auto my-auto">
44        <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl'>
45          <canvas id='myChart'></canvas>
46        </div>
47      </div>
48    </>
49  )
50}
51
52export default Example;

Specify the type of chart as 'line', then add the dataset properties below.

Add individual data sets with y-axis data points, a label, borderColor, backgroundColor, and fill properties.

The sample code for the /pages/linechart.js file can be found in the following Github URL.

nextjs_chartjs_example/linechart.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/linechart). An example output screenshot is given below.

2. Filled Line Chart Example:

In your project, go to your /pages directory and create a file called filledlinechart.js

In `/pages/filledlinechart.js`, add the following code.

1import { useEffect } from "react" 2import { Chart } from "chart.js"; 3function Example() { 4 useEffect(() => { 5 var ctx = document.getElementById('myChart').getContext('2d'); 6 var myChart = new Chart(ctx, { 7 type: 'line', 8 data: { 9 labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 10 datasets: [{ 11 data: [86, 114, 106, 106, 107, 111, 133], 12 label: "Applied", 13 borderColor: "rgb(62,149,205)", 14 backgroundColor: "rgb(62,149,205,0.1)", 15 }, { 16 data: [70, 90, 44, 60, 83, 90, 100], 17 label: "Accepted", 18 borderColor: "rgb(60,186,159)", 19 backgroundColor: "rgb(60,186,159,0.1)", 20 }, { 21 data: [10, 21, 60, 44, 17, 21, 17], 22 label: "Pending", 23 borderColor: "rgb(255,165,0)", 24 backgroundColor: "rgb(255,165,0,0.1)", 25 }, { 26 data: [6, 3, 2, 2, 7, 0, 16], 27 label: "Rejected", 28 borderColor: "rgb(196,88,80)", 29 backgroundColor: "rgb(196,88,80,0.1)", 30 } 31 ] 32 }, 33 }); 34 }, []) 35 36 37 return ( 38 <> 39 {/* Filled line chart */} 40 <h1 className="w-[150px] mx-auto mt-10 text-xl font-semibold capitalize ">Filled line Chart</h1> 41 <div className="w-[1100px] h-screen flex mx-auto my-auto"> 42 <div className='border border-gray-400 pt-0 rounded-xl w-full h-fit my-auto shadow-xl'> 43 <canvas id='myChart'></canvas> 44 </div> 45 </div> 46 </> 47 ) 48} 49 50export default Example;
The sample code for the `/pages/filledlinechart.js` file can be found in the following Github URL.

nextjs_chartjs_example/filledlinechart.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/filledlinechart). An example output screenshot is given below.

filled line

3. Bar Chart Example:

In your project, go to your /pages directory and create a file called barchart.js

In `/pages/filledlinechart.js`, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'bar',
8            data: {
9                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
10                datasets: [{
11                    data: [66, 144, 146, 116, 107, 131, 43],
12                    label: "Applied",
13                    borderColor: "rgb(109, 253, 181)",
14                    backgroundColor: "rgb(109, 253, 181,0.5)",
15                    borderWidth: 2
16                }, {
17                    data: [40, 100, 44, 70, 63, 30, 10],
18                    label: "Accepted",
19                    borderColor: "rgb(75, 192, 192)",
20                    backgroundColor: "rgb(75, 192, 192,0.5)",
21                    borderWidth: 2
22                }, {
23                    data: [20, 24, 50, 34, 33, 23, 12],
24                    label: "Pending",
25                    borderColor: "rgb(255, 205, 86)",
26                    backgroundColor: "rgb(255, 205, 86,0.5)",
27                    borderWidth: 2
28                }, {
29                    data: [6, 20, 52, 12, 11, 78, 21],
30                    label: "Rejected",
31                    borderColor: "rgb(255, 99, 132)",
32                    backgroundColor: "rgb(255, 99, 132,0.5)",
33                    borderWidth: 2
34                }
35                ]
36            },
37        });
38    }, [])
39
40
41    return (
42        <>
43            {/* Bar chart */}
44            <h1 className="w-[150px] mx-auto mt-10 text-xl font-semibold capitalize ">Bar Chart</h1>
45            <div className="w-[1100px] h-screen flex mx-auto my-auto">
46                <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl'>
47                    <canvas id='myChart'></canvas>
48                </div>
49            </div>
50        </>
51    )
52}
53
54export default Example;

Sample code for the /pages/filledlinechart.js file can be found in the following Github URL.

nextjs_chartjs_example/barchart.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/barchart). An example output screenshot is given below.

bar

4. Doughnut Chart Example:

In your project, go to your /pages directory and create a file called doughnut.js

In `/pages/doughnut.js`, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'doughnut',
8            data: {
9                labels: ["Accepted", "Pending", "Rejected"],
10                datasets: [{
11                    data: [70, 10, 6],
12                    borderColor: [
13                        "rgb(75, 192, 192)",
14                        "rgb(255, 205, 86)",
15                        "rgb(255, 99, 132)",
16                    ],
17                    backgroundColor: [
18                        "rgb(75, 192, 192 )",
19                        "rgb(255, 205, 86)",
20                        "rgb(255, 99, 132)",
21                    ],
22                    borderWidth: 2,
23                }]
24            },
25            options: {
26                scales: {
27                    xAxes: [{
28                        display: false,
29                    }],
30                    yAxes: [{
31                        display: false,
32                    }],
33                }
34            },
35
36        });
37    }, [])
38
39
40    return (
41        <>
42            {/* Doughnut chart */}
43            <h1 className="w-[150px] mx-auto mt-10 text-xl font-semibold capitalize ">Doughnut Chart</h1>
44            <div className="w-[1100px] h-screen flex mx-auto my-auto">
45                <div className='border border-gray-400 pt-0 rounded-xl w-full h-fit my-auto  shadow-xl pb-2'>
46                    <canvas id='myChart'></canvas>
47                </div>
48            </div>
49        </>
50    )
51}
52
53export default Example;

Sample code for the /pages/doughnut.js file can be found in the following Github URL.

nextjs_chartjs_example/doughnut.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/doughnut). An example output screenshot is given below.

doughnut

5. Bubble Chart Example:

In your project, go to your /pages directory and create a file called bubblechart.js

In `/pages/bubblechart.js`, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'bubble',
8            data: {
9                datasets: [{
10                    data: [
11                        { x: 17, y: 3, r: 11 },
12                    ],
13                    label: "Team A",
14                    borderColor: "rgb(75, 192, 192 )",
15                    backgroundColor: "rgb(75, 192, 192,0.5)",
16                    borderWidth: 2,
17
18                }, {
19                    data: [
20                        { x: 10, y: 3, r: 20 },
21                    ],
22                    label: "Team B",
23                    borderColor: "rgb(255, 205, 86)",
24                    backgroundColor: "rgb(255, 205, 86, 0.5)",
25                    borderWidth: 2,
26
27                }, {
28                    data: [
29                        { x: 4, y: 14, r: 30 },
30                    ],
31                    label: "Team C",
32                    borderColor: "rgb(255, 99, 132)",
33                    backgroundColor: "rgb(255, 99, 132,0.5)",
34                    borderWidth: 2,
35                }
36                ]
37            },
38            options: {
39                scales: {
40                    xAxes: [{
41                        scaleLabel: {
42                            display: true,
43                            labelString: '# of wins'
44                        }
45                    }],
46                    yAxes: [{
47                        scaleLabel: {
48                            display: true,
49                            labelString: '# of games'
50                        }
51                    }],
52                }
53            },
54        });
55    }, [])
56    return (
57        <>
58            {/* Bubble chart */}
59            <h1 className="w-[150px] mx-auto mt-10 text-xl font-semibold capitalize ">Bubble Chart</h1>
60            <div className="w-[1100px] h-screen flex mx-auto my-auto">
61                <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl'>
62                    <canvas id='myChart'></canvas>
63                </div>
64            </div>
65        </>
66    )
67}
68
69export default Example;

The sample code for the /pages/bubblechart.js file can be found in the following Github URL.

nextjs_chartjs_example/bubblechart.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/bubblechart). An example output screenshot is given below.

bubble

6. Stacked-Bar Chart Example:

In your project, go to your /pages directory and create a file called stackedbar.js

In `/pages/stackedbar.js`, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'bar',
8            data: {
9                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
10                datasets: [{
11                    data: [70, 90, 44, 60, 83, 90, 100],
12                    label: "Accepted",
13                    borderColor: "#3cba9f",
14                    backgroundColor: "#71d1bd",
15                    borderWidth: 2
16                }, {
17                    data: [10, 21, 60, 44, 17, 21, 17],
18                    label: "Pending",
19                    borderColor: "#ffa500",
20                    backgroundColor: "#ffc04d",
21                    borderWidth: 2
22                }, {
23                    data: [6, 3, 2, 2, 7, 0, 16],
24                    label: "Rejected",
25                    borderColor: "#c45850",
26                    backgroundColor: "#d78f89",
27                    borderWidth: 2
28                }
29                ]
30            },
31            options: {
32                scales: {
33                    xAxes: [{
34                        stacked: true
35                    }],
36                    yAxes: [{
37                        stacked: true
38                    }],
39                }
40            },
41        });
42    }, [])
43
44
45    return (
46        <>
47            {/* Stacked chart */}
48            <h1 className="w-[110px] mx-auto mt-10 text-xl font-semibold capitalize ">Stacked-Bar Chart</h1>
49            <div className="w-[1100px] h-screen flex mx-auto my-auto">
50                <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl'>
51                    <canvas id='myChart'></canvas>
52                </div>
53            </div>
54        </>
55    )
56}
57
58export default Example;

The sample code for the /pages/stackedbar.js file can be found in the following Github URL.

nextjs_chartjs_example/stackedbar.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/stackedbar). An example output screenshot is given below.

stacked bar

7. Radar Chart Example:

In your project, go to your /pages directory and create a file called radar.js

radar c

In /pages/radar.js, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'radar',
8            data: {
9                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
10                datasets: [{
11                    data: [86, 114, 106, 106, 107, 111, 133],
12                    label: "Applied",
13                    borderColor: "#3e95cd",
14                    backgroundColor: "rgb(62,149,205,0.1)",
15                    borderWidth: 2,
16                }, {
17                    data: [70, 90, 44, 60, 83, 90, 100],
18                    label: "Accepted",
19                    borderColor: "#3cba9f",
20                    backgroundColor: "rgb(60,186,159,0.1)",
21                    borderWidth: 2,
22                },{
23                    data: [10, 21, 60, 44, 17, 21, 17],
24                    label: "Pending",
25                    borderColor: "#ffa500",
26                    backgroundColor: "rgb(255,165,0,0.1)",
27                    borderWidth: 2,
28                },{
29                    data: [6, 3, 2, 2, 7, 0, 16],
30                    label: "Rejected",
31                    borderColor: "#c45850",
32                    backgroundColor: "rgb(196,88,80,0.1)",
33                    borderWidth: 2,
34                }]
35            },
36            options: {
37                scales: {
38                    xAxes: [{
39                        display: false,
40                    }],
41                }},
42        });
43    }, [])
44    return (
45        <>
46            {/* Radar chart */}
47            <h1 className="w-[110px] mx-auto mt-10 text-xl font-semibold capitalize ">Radar Chart</h1>
48            <div className="w-[1100px] h-screen flex mx-auto my-auto">
49                <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl'>
50                    <canvas id='myChart'></canvas>
51                </div></div>
52        </>
53    )
54}
55export default Example;

The sample code for the /pages/radar.js file can be found in the following Github URL.

nextjs_chartjs_example/radar.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/radar). An example output screenshot is given below.

radar

8. Pie Chart Example:

In your project, go to your /pages directory and create a file called piechart.js

pie chart

In /pages/piechart.js, add the following code.

1import { useEffect } from "react"
2import { Chart } from "chart.js";
3function Example() {
4    useEffect(() => {
5        var ctx = document.getElementById('myChart').getContext('2d');
6        var myChart = new Chart(ctx, {
7            type: 'pie',
8            data: {
9                labels: ["Accepted", "Pending", "Rejected"],
10                datasets: [{
11                    data: [70, 10, 6],
12                    borderColor: [
13                        "#3cba9f",
14                        "#ffa500",
15                        "#c45850",
16                    ],
17                    backgroundColor: [
18                        "rgb(60,186,159,0.1)",
19                        "rgb(255,165,0,0.1)",
20                        "rgb(196,88,80,0.1)",
21                    ],
22                    borderWidth: 2,
23                }]
24            },
25            options: {
26                scales: {
27                    xAxes: [{
28                        display: false,
29                    }],
30                    yAxes: [{
31                        display: false,
32                    }],
33                }
34            },
35        });
36    }, [])
37    return (
38        <>
39            {/* Pie chart */}
40            <h1 className="w-[110px] mx-auto mt-10 text-xl font-semibold capitalize ">Pie Chart</h1>
41            <div className="w-[1100px] h-screen flex mx-auto my-auto">
42                <div className='border border-gray-400 pt-0 rounded-xl  w-full h-fit my-auto  shadow-xl pb-2'>
43                    <canvas id='myChart'></canvas>
44                </div>
45            </div>
46        </>
47    )
48}
49export default Example;

The sample code for the /pages/piechart.js file can be found in the following Github URL.

nextjs_chartjs_example/piechart.js at master · episyche/nextjs_chartjs_example

You can run your app via CLI with the following command and view it in your browser:

1npm run dev

Please go to the web browser, and try to access the next.js application (i.e http://localhost:3000/piechart). An example output screenshot is given below.

pie chart