Create a Pie Chart in NuxtJS

Data visualization organizes complex, unorganized datasets in an organized and visual way that is easy for the users to understand. Presenting data comes in charts – bar, line, bubble, doughnut, etc.

In this article, you will learn how to build the graphical representation of a pie chart using provided datasets with the JavaScript library, Chart.js, to visualize the data.

Nuxt.js is a framework built upon Vue.js that makes building frontend web interfaces performant and powerful.

The completed project demo is in a CodeSandbox. Fork it and run the code to get started.

For your reference, check the source code:

Understanding this article requires the following:

• Basic knowledge of Vue.js
• Installation of Node.js v10 and above on your local machine

The installation for a new Nuxt.js project begins with the Nuxt.js command-line interface (CLI), which will scaffold the files and folders with a list of pre-defined options to select.

Run the following command in your terminal:

npx create-nuxt-app nuxtjs-pie-chart

The above command interface should look like this:

To confirm the setup, run the development server, which is accessible on http://localhost:3000, with the following command:

cd nuxtjs-pie-chart

npm run dev

Finally, install the JavaScript library Chart.js, which is necessary for creating the pie chart for the visualized data.

Run this command:

npm install chart.js

chart.js – A simple yet flexible JavaScript charting library

Before you create the chart, in the created components folder, copy and paste the following code in the PieChart.vue file:

// components/PieChart.vue

<template>
  <div>
    <canvas id="pieChart"></canvas>
  </div>
</template> 

The <canvas> element with an id piechart is a single node that will render the chart and give it its container for responsiveness.

Next, create another file, data.js, in a data folder at the root of the project directory that will contain the following code.

    // data/data.js
    
    const pieChartData = {
      type: "pie",
      data: {
        labels: ["Remote only", "Hybrid", "Office"],
        datasets: [
          {
            data: [59.7, 35.3, 5],
            backgroundColor: [
              "rgb(46,176,250)",
              "rgb(240,163,196)",
              "rgb(179,185,201)",
            ],
            hoverOffset: 5,
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: "bottom",
          },
          title: {
            display: true,
            text: "How does your work look like now?",
          },
        },
      },
    };
    export default pieChartData; 

In the code block above, the different properties specified in the declared variable are as follows:

• Chart type is declared a value of pie. Changing the value will display a different chart
• Array of labels is specified in the data object to show the tooltips in the legend, datasets with properties such as the data points, background color for the arc, and the hoverOffset property that moves the arc when hovered
• options object defines the chart’s responsiveness, its plugins with the legend set to the bottom of the pie chart, and the title set to true to display the chart’s details

In the PieChart.vue component, copy and paste the following code:

    // components/PieChart.vue
    
    <!-- template for the canvas container -->
    
    <script>
    import { Chart, registerables } from "chart.js";
    import pieChartData from "@/data/data";
    export default {
      data() {
        return {
          pieChartData,
        };
      },
      mounted() {
        const ctx = document.getElementById("pieChart");
        Chart.register(...registerables);
        new Chart(ctx, this.pieChartData);
      },
    };
    </script>

The code above does the following:

• Imports the pieChartData properties and passes in the reactive data in the data property used by the Vue.js app
• mounted() lifecycle hook is called after the app is mounted on the DOM, using this method, Chart.js is integrated and registered with the new initialized chart with the pieChartData and the variable ctx containing the canvas id

The last step of this tutorial is to display the pie chart in the browser. In the index.vue, import the PieChart component:

    // pages/index.vue
    
    <template>
      <div class="flex items-center justify-center h-screen">
        <PieChart />
      </div>
    </template>

From the code snippet above, Tailwind CSS classes are used for styling to display the chart’s layout in the center of the browser using CSS flexbox layout properties.

The final result of the page should look like this:

This post explains the steps in creating a pie chart to visualize data intuitively and interactively.

• Chart.js