Getting Chart.js to work in a Vue js project

I'm trying to use Chart.js in Vue project but nothing seems to happen when I follow the documentation exactly as displayed on their website. https://www.chartjs.org/docs/latest/ https://vue-chartjs.org/ Vue file

<template>
<Doughnut :data="data" :options="options" />
</template>

</main>
</template>

<script>

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'vue-chartjs'
import * as chartConfig from './chartConfig'

ChartJS.register(ArcElement, Tooltip, Legend)

<template>
<Doughnut :data="data" :options="options" />
</template>

</main>
</template>

<script>

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'vue-chartjs'
import * as chartConfig from './chartConfig'

ChartJS.register(ArcElement, Tooltip, Legend)
js file
export const data = {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10]
}
]
}

export const options = {
responsive: true,
maintainAspectRatio: false
}
export const data = {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10]
}
]
}

export const options = {
responsive: true,
maintainAspectRatio: false
}
Chart.js | Chart.js
Open source HTML5 Charts for your website
2 Replies
Rakudai
Rakudai13mo ago
There are no errors in log either, it seems like it just doesnt want to display
Joao
Joao13mo ago
Try adding your own console log statements then, see if chartjs is even there. This would also be a good time to use the Vue devtools to inspect the state of the app
Want results from more Discord servers?
Add your server