I trying to make a COVID19 visualization site using Chart.js and VueJs

this is My App.vue that contains the API call and stores the data into arrays

<template>
<div id="app" >
  <div  v-if="PositiveCases.length > 0">
    <div >
      <h2>Positives</h2>
      <lineChart :chartData="PositiveCases" :options="chartOptions" label="Positive" />
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios";
import moment from 'moment'
import lineChart from "./components/lineChart.vue";
export default {
  name: 'App',
  components: {
    lineChart
  },
  data(){
    return{
      PositiveCases : [],
      Deaths: [],
      Recoverd: [],
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  async created(){
    const {data} = await axios.get('https://api.covid19api.com/live/country/egypt')
    //console.log(data);
    data.forEach(d => {
      const date = moment(d.Date,"YYYYMMDD").format("MM/DD")
      const {Confirmed,Deaths,Recovered} = d
      this.PositiveCases.push({date, total : Confirmed})
      this.Deaths.push({date, total : Deaths})
      this.Recoverd.push({date, total : Recovered})

      // console.log("PositiveCases",this.PositiveCases);
      // console.log("Deaths",this.Deaths);
      // console.log("Recoverd",this.Recoverd);
    });
  }
}
</script>

and this is my lineChart.vue that contains the Line chart code the data stored correctly in both the dates and totals

<script>
import {Line} from 'vue-chartjs'
export default {
    extends: Line,
    props: {
        label:{
            type: String,
        },
        chartData:{
            type: Array,
        },
        options:{
            type: Object,
        }
    },
    mounted(){
        const dates = this.chartData.map(d => d.date).reverse()
        const totals = this.chartData.map(d => d.total).reverse()
        console.log("dates",dates);
        console.log("totals",totals);
        this.renderChart({
            labels: dates,
            datasets: [{
                label: this.label,
                data: totals,
            }],
        },this.options
    )
    }
}
</script>

the error in the console says

want to know what is the solution, all the data are stored correctly in both files

CodePudding user response：

You are using V4 of vue-chart.js, the chart creation process has been changed as you can read here in the migration guide.

So instead of calling this.renderChart which was the old syntax you now have to use the actual component and pass the data to it like so:

<template>
  <Bar :chart-data="chartData" />
</template>

<script>
// DataPage.vue
import { Bar } from 'vue-chartjs'
import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12]
          }
        ]
      }
    }
  }
}
</script>