Chart JS di Nuxt JS

Lihat cara saya menggunakan Chart JS di Nuxt JS menggunakan vue-chartjs 3.5.1. Omong-omong, saya menggunakan Nuxt 2 dengan Vue 2 di dalamnya, dan saya menggunakan Tailwind CSS dalam proyek saya. Pastikan dokumentasi Chart JS yang kamu buka adalah versi 2.9.4 karena tutorial ini memberi tahu kamu tentang versi 2.9.4.

---

1. Tambahkan 2 dependency ini ke package.json

{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}

Jalankan yarn install atau npm install

---

2. chart.js plugin file

Buat file baru di folder plugins di proyek Nuxt punyamu, jika folder plugins belum ada, buat saja. File baru ini dapat diberi nama apa saja, tetapi kita akan menamainya chart.js.

Isi dari file chart.js:

import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

---

3. nuxt.config.js

export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}

Tambahkan plugin chart.js ke file nuxt.config.js di property plugins.

---

4. Buat component

<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>

Coba contoh component ini.

---

5. Hasilnya

Kurang lebih tampilannya seperti ini. Chart ini disebut BarChart, ada juga jenis chart lain di Chart JS. Untuk mengetahui lebih lanjut dan mempelajari tentang konfigurasi, kamu dapat lihat dokumentasinya di:

https://www.chartjs.org/docs/2.9.4/