DEV Community 👩‍💻👨‍💻

Kamiswara Angga W.
Kamiswara Angga W.

Posted on

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"
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

Jalankan yarn install atau npm install


2. chart.js plugin file

chart.js 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)
  },
})
Enter fullscreen mode Exit fullscreen mode

3. nuxt.config.js

export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Coba contoh component ini.


5. Hasilnya

Chart JS in Nuxt JS

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/

Top comments (0)

🌚 Life is too short to browse without dark mode