{"id":28361,"date":"2022-06-10T08:39:02","date_gmt":"2022-06-10T08:39:02","guid":{"rendered":"http:\/\/create-a-bar-chart-in-nuxtjs"},"modified":"2022-06-10T08:39:02","modified_gmt":"2022-06-10T08:39:02","slug":"create-a-bar-chart-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-bar-chart-in-nuxtjs\/","title":{"rendered":"Create a Bar Chart in NuxtJS"},"content":{"rendered":"

Introduction<\/h1>\n

According to Wikipedia<\/a>, a bar chart is a chart that presents categorical data using rectangular bars with heights or lengths proportional to the values that they represent. On one axis of the chart are the categories under comparison, while on the other is the measured value.<\/p>\n

At the end of the article, we will have understood how to implement a bar chart into our Nuxt.js application.<\/p>\n

Prerequisites<\/h1>\n

To follow along with the article, a basic understanding of Nuxt.js is required.<\/p>\n

Repository<\/h1>\n

This article\u2019s source code is available on GitHub:<\/p>\n

https:\/\/github.com\/folucode\/nuxtjs-barchart<\/a><\/p>\n

Sandbox<\/h1>\n

The completed project is on CodeS<\/a>andbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n \n

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

Project Setup<\/h1>\n

Node<\/a> has to be installed on our computer to set up the Nuxt.js application. To install Node, we\u2019ll head over to the Nodejs website<\/a> and follow the instructions to install the software compatible with our operating system.<\/p>\n

We can verify the Node.js installation by running the command below:<\/p>\n

node -v\nv16.10.0 \/\/node version installed\n<\/code><\/pre>\n
To create the Nuxt.js app, run the command below. It will automatically set up a boilerplate Nuxt.js app.<\/p>\n
$ npm init nuxt-app <project-name>\n# or\n$ yarn create nuxt-app <project-name>\n<\/code><\/pre>\n
\"\"<\/p>\n
After running the command, we see different options to configure our Nuxt.js app. Make sure to choose the options listed in the image above for each prompt.<\/p>\n
    \n
  1. For Nuxt.js modules<\/code>, we\u2019ll pick Axios<\/code> as our option.<\/li>\n
  2. For Linting tools<\/code>, we\u2019ll pick Prettier<\/code> as our option.<\/li>\n
  3. For development tools<\/code>, we\u2019ll pick jsconfig.json<\/code> as our option.<\/li>\n
  4. For GitHub username<\/code>, make sure to use GitHub<\/code> username.<\/li>\n<\/ol>\n
    After the installation is complete, change the directory to the app we just created:<\/p>\n
    cd <app-name>\n<\/code><\/pre>\n
    Run npm run dev<\/code> or yarn dev<\/code> to start the development server on http:\/\/localhost:3000<\/code>.<\/p>\n
    \"\"<\/p>\n
    Create Bar Chart<\/h1>\n
    We\u2019ll be using an npm<\/code> package called [Chart.js](https:\/\/www.npmjs.com\/package\/chart.js)<\/code> to create the bar chart in our application. Install it using the command below:<\/p>\n
    $ npm i chart.js\n<\/code><\/pre>\n
    After installing the package, we\u2019ll create a new file called BarChart.vue<\/code> in the components<\/code> folder and then copy-paste the code below:<\/p>\n
    <template>\n    <div>\n        <canvas id="bar-chart"><\/canvas>\n    <\/div>\n<\/template>\n<script>\nimport { Chart, registerables } from 'chart.js';\n\nexport default {\n    name: "BarChart",\n};\n<\/script>\n<\/code><\/pre>\n
    In the code above, we create a Nuxt.js template and a parent div<\/code>. Inside the parent div, we create a canvas<\/code> element that will later be used to render our chart. Then we import the Chart.js<\/a> package and export the BarChart<\/code> component.<\/p>\n
    Next, we create a new folder called data<\/code> at the root of our app, and inside it, create a file called chart-data.js<\/code>. Inside the chart-data.js<\/code>, paste the code below in it:<\/p>\n
    const barChartData = {\n  type: "bar",\n  data: {\n    labels: ["Lions", "Monkeys", "Zebras", "Eagles", "Horses"],\n    datasets: [\n      {\n        label: "Dataset 1",\n        data: [12, 19, 3, 2, 3],\n        backgroundColor: [\n          "rgba(255, 99, 132, 0.2)",\n          "rgba(54, 162, 235, 0.2)",\n          "rgba(255, 206, 86, 0.2)",\n          "rgba(75, 192, 192, 0.2)",\n          "rgba(153, 102, 255, 0.2)",\n          "rgba(255, 159, 64, 0.2)",\n        ],\n        borderColor: [\n          "rgba(255, 99, 132, 1)",\n          "rgba(54, 162, 235, 1)",\n          "rgba(255, 206, 86, 1)",\n          "rgba(75, 192, 192, 1)",\n          "rgba(153, 102, 255, 1)",\n          "rgba(255, 159, 64, 1)",\n        ],\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    plugins: {\n      legend: {\n        position: "top",\n      },\n      title: {\n        display: true,\n        text: "Number of animals in the zoo",\n      },\n    },\n  },\n};\n\nexport default barChartData;\n<\/code><\/pre>\n
    In the code above:<\/p>\n
      \n
    1. Chart type is set to bar<\/code> in the configuration object<\/li>\n
    2. Configurations are set in the data<\/code> property and contains charts\u2019 labels, datasets used to define specific data to be shown, and background color to distinguish one dataset from another, also contains a border-color and border width property to set the border\u2019s thickness<\/li>\n
    3. \noptions<\/code> object to define the responsiveness of the chart, positioning, and title<\/li>\n<\/ol>\n
      Rendering the Bar Chart<\/h1>\n
      To render our bar chart, we will change the content of the BarChart.vue<\/code> component and index.vue<\/code> page.<\/p>\n
        \n
      1. \n
        First, in the BarChart.vue<\/code> component, we\u2019ll import the barChartData<\/code> object from the chart-data<\/code> file and then export the data<\/code> property, which returns the barChartData<\/code> object so we can use it in our component.<\/p>\n<\/li>\n
      2. \n
        Then export the mounted<\/code> lifecycle method, and in it, we get the canvas element. All the chart components are registered in the mounted<\/code> lifecycle method, and a new Chart<\/code> object is initialized. The Chart<\/code> object takes in two parameters; the canvas element we want to render the chart on and a configurations object, which in this case is barChartData. Vue<\/code> calls the mounted<\/code> hook when our component is added to the DOM<\/code>.<\/p>\n<\/li>\n<\/ol>\n
        See the completed BarChart.vue<\/code> component code below:<\/p>\n
        <template>\n    <div>\n        <canvas id="bar-chart"><\/canvas>\n    <\/div>\n<\/template>\n\n<script>\nimport { Chart, registerables } from 'chart.js';\nimport barChartData from "..\/data\/chart-data";\n\nexport default {\n    name: "BarChart",\n    data() {\n        return {\n            barChartData\n        }\n    },\n    mounted() {\n        const ctx = document.getElementById("bar-chart");\n        Chart.register(...registerables);\n        new Chart(ctx, this.barChartData);\n    }\n};\n<\/script>\n<\/code><\/pre>\n
        Next, in the index.vue<\/code> file, we will replace the boilerplate code with the code below:<\/p>\n
        <template>\n  <BarChart \/>\n<\/template>\n\n<script>\nimport BarChart from '..\/components\/BarChart.vue';\n\nexport default {\n  name: "IndexPage",\n  components: { BarChart }\n}\n<\/script>\n<\/code><\/pre>\n
        We import the BarChart<\/code> component and set it in between the template element. We then export our component name<\/code> and the components<\/code> object, which lists all the components we use in the index.vue<\/code> file.<\/p>\n
        After successfully following the steps above, we run the command below in our terminal:<\/p>\n
         $ npm run dev\n<\/code><\/pre>\n
        The above command will spin up a development server on http:\/\/localhost:3000<\/a>, which we can use to view the application. Check the image below to see the outcome:<\/p>\n
        \"\"<\/p>\n
        We can hover over each bar to get more information about that section.<\/p>\n
        Conclusion<\/h1>\n
        This article showed how to create bar charts in Nuxt.js applications using chart.js<\/code>.<\/p>\n
        Resources<\/h1>\n
        You may find these resources helpful:<\/p>\n