Use Chart.js in NuxtJS applications

Use Chart.js in NuxtJS applications

2020-06-01T16:21:35.000Z

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.