Use Chart.js in NuxtJS applications

Use Chart.js in NuxtJS applications

Jun 01, 2020 / Moody Developer

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.


Similar Articles

Auto import components in NuxtJS

Auto import components in NuxtJS

Auto import all your components within NuxtJS which makes code much cleaner & less hastle.
Read more...
VueJs content loading placeholders

VueJs content loading placeholders

Vue Content Loading is a component to use placeholder or preset.
Read more...