Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

332
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda