Check out how I use Chart JS in Nuxt JS using vue-chartjs 3.5.1. By the way, I use Nuxt 2 with Vue 2 in it, and I use Tailwind CSS in my project. Make sure the Chart JS documentation that you open is version 2.9.4 because this tutorial tells you aboutu version 2.9.4.
1. Add these two dependencies to our package.json
{
...
"dependencies": {
"chart.js": "2.9.4",
"vue-chartjs": "^3.5.1"
}
...
}
Run yarn install or npm install
2. chart.js plugin file
Create a new file in the plugins folder in our Nuxt project, if the plugins folder doesn't exist yet, just create it. This new file can be given any name, but we will name it chart.js.
The content of the chart.js file:
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'],
...
}
Add the chart.js plugin to the nuxt.config.js file in the plugins property.
4. Create the 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>
Try this example component.
5. The result
More or less it looks like this. This chart is called BarChart, there are also other types of charts in Chart JS. To know more and learn about the configuration, you can check the documentation:
Top comments (0)