Chart not rendering

UI Components for Vue
Post Reply
sageworksstudio
Posts: 3
Joined: 16 Jul 2021, 22:42

16 Jul 2021, 23:04

Maybe I'm missing something?

I'm using:
Vue 3
Primevue 3
Chart.js "chart.js": "^3.4.1"

Code: Select all

<template>
  <div class="card">
    <Chart type="line" :data="basicChartData" :options="basicChartOptions" />
  </div>
</template>

<script>
import Chart from 'primevue/chart'
import { ref } from 'vue'
export default {
  components: {
    Chart,
  },
  setup() {
    const basicChartData =  ref({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: '#42A5F5'
        },
        {
          label: 'Second Dataset',
          data: [28, 48, 40, 19, 86, 27, 90],
          fill: false,
          borderColor: '#FFA726'
        }
      ]
    })
    const basicChartOptions = ref({
      responsive: true,
      hoverMode: 'index',
      stacked: false,
      scales: {
        yAxes: [{
          type: 'linear',
          display: true,
          position: 'left',
          id: 'y-axis-1',
        },
        {
          type: 'linear',
          display: true,
          position: 'right',
          id: 'y-axis-2',
          gridLines: {
            drawOnChartArea: false
          }
        }]
      }
    })
    return {
      basicChartData,
      basicChartOptions,
    }
  },
}
</script>
I end up with a blank canvas. Additionally I'm specifying responsive in my options, but getting the 300x150 canvas.


Image

delightone
Posts: 1
Joined: 23 Jul 2021, 08:54

23 Jul 2021, 09:02

I had same issue.
I tried down grade chart.js, then it rendered
"chart.js": "^2.9.4"

sageworksstudio
Posts: 3
Joined: 16 Jul 2021, 22:42

27 Jul 2021, 20:27

delightone wrote:
23 Jul 2021, 09:02
I had same issue.
I tried down grade chart.js, then it rendered
"chart.js": "^2.9.4"
Weird...

I downgraded to chart.js 2.9.4 but got this error:

`Module not found: Error: Can't resolve 'chart.js/auto' in '/home/chris/RailsProjects/client-oms/node_modules/primevue/chart'`

Then upgraded to chart.js 3.5 and now it works!

cbutler
Posts: 3
Joined: 21 Jul 2021, 22:33

28 Jul 2021, 17:04

sageworksstudio - Your solution worked for me, thank you

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests