NuxtJs

Use Chart.js in NuxtJS application

2020-06-01

Using chart.js within your NuxtJs(VueJs) application is easy like piece of cake

Chart.js is one of the famous open source javascript library for creating awesome graphs in your application.

There are different plugins for different frontend framework to make developers life easy while using chart.js

Adding chart.js in your NuxtJS application is like just using another component. First, you have to add package vue-chartjs & ready to use like below:

npm install vue-chartjs chart.js --save

Now we will take example to create bar chart.

Create a component components/BarChart.js which will actually extends component from above package. Add following code:

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props: ['data', 'options'],
  mounted() {
    this.renderChart(this.data, this.options)
  },
}

Now you can use this component in your page something like:

<template>
  <div>
    <bar-chart :data="barChartData" :options="barChartOptions" :height="200" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      barChartData: {
        labels: [
          '2019-06',
          '2019-07',
          '2019-08',
          '2019-09',
          '2019-10',
          '2019-11',
          '2019-12',
          '2020-01',
          '2020-02',
          '2020-03',
          '2020-04',
          '2020-05'
        ],
        datasets: [
          {
            label: 'Visits',
            data: [10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],
            backgroundColor: '#003f5c'
          },
          {
            label: 'Pages Views',
            data: [30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],
            backgroundColor: '#2f4b7c'
          },
          {
            label: 'Users',
            data: [45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],
            backgroundColor: '#665191'
          }
        ]
      },
      barChartOptions: {
        responsive: true,
        legend: {
          display: false
        },
        title: {
          display: true,
          text: 'Google analytics data',
          fontSize: 24,
          fontColor: '#6b7280'
        },
        tooltips: {
          backgroundColor: '#17BF62'
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false
              }
            }
          ],
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: false
              }
            }
          ]
        }
      }
    }
  }
}
</script>

That's now you should have your chart visible on the page.

Remember, with latest NuxtJS you don't have to import components they can be automatically detected.

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot