Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

322
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!