Kevin Powell - Community•9mo ago

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

📈 vue-chartjs

2 Replies

Rakudai•9mo ago

There are no errors in log either, it seems like it just doesnt want to display

Joao•9mo 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

Gaming

Programming

Getting Chart.js to work in a Vue js project