Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

329
Visualizações
TypeError: Cannot read properties of undefined (reading 'props') - charts.js

I'm trying to use charts.js and always get an error: TypeError: Cannot read properties of undefined (reading 'props')" and I can't fix it, any idea why? I have already looked in the docs and in github issues and didn't find anything. thank you for the help, if you need more details let me know

    vue.runtime.esm.js?c320:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'props')"
found in
---> <ChartStats> at src/components/ChartStats.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?c320:619
l
vue.runtime.esm.js?c320:1897 TypeError: Cannot read properties of undefined (reading 'props')
    at normalizeProps (vue.runtime.esm.js?c320:1419:1)

LineChart.vue

<script>
import { Line } from 'chart.js'

export default {
  extends: Line,
    props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

<style>
</style>

ChartStats.vue

<template>
  <div class="small">
    <line-chart :chartdata="datacollection" :options="options"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>
<script>
import LineChart from './LineChart.vue'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection:{},
        options : {}
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            },
          ]
        }
        this.options = {
                responsive: true,
      maintainAspectRatio: false
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
</script>
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda