title: VueJS - vue-charts.js
body: <p>I am trying to pass data I fetch from API to vue-chartjs as props, I am doing as in the documentation but it does not work.</p>
  <h3>Main component</h3>
  <pre><code>&lt;monthly-price-chart :chartdata=&quot;chartdata&quot;/&gt;
  
  import MonthlyPriceChart from './charts/MonthlyPriceChart'
  
    export default {
      data(){
        return {
          chartdata: {
            labels: [],
            datasets: [
              {
                label: 'Total price',
                data: []
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        }
      },
      components: {
        MonthlyPriceChart
      },
      created() {
        axios.get('/api/stats/monthly')
          .then(response =&gt; {
            let rides = response.data
            forEach(rides, (ride) =&gt; {
              this.chartdata.labels.push(ride.month)
              this.chartdata.datasets[0].data.push(ride.total_price)
            })
          })
          .catch(error =&gt; {
            console.log(error)
        })
      }
    }
  </code></pre>
  <p>In response I have an array of obejcts, each of which looks like this:</p>
  <pre><code>{
    month: &quot;2018-10&quot;,
    total_distance: 40,
    total_price: 119.95
  }
  </code></pre>
  <p>Then I want to send the data somehow to the chart so I push the months to <code>chartdata.labels</code> and <code>total_price</code> to <code>chartdata.datasets[0].data</code>.</p>
  <h3>chart component</h3>
  <pre><code>import { Bar } from 'vue-chartjs'
  
  export default {
    extends: Bar,
    props: {
      chartdata: {
        type: Array | Object,
        required: false
      }
    },
    mounted () {
      console.log(this.chartdata)
      
      this.renderChart(this.chartdata, this.options)
    }
  }
  </code></pre>
  <p><code>console.log(this.chartdata)</code> outputs my chartsdata object from my main component and the data is there so the data is passed correctly to chart but nothing is rendered on the chart.</p>
  <p>The documentation says this:</p>
  <pre><code>&lt;script&gt;
  import LineChart from './LineChart.vue'
  
  export default {
    name: 'LineChartContainer',
    components: { LineChart },
    data: () =&gt; ({
      loaded: false,
      chartdata: null
    }),
    async mounted () {
      this.loaded = false
        try {
          const { userlist } = await fetch('/api/userlist')
          this.chartData = userlist
          this.loaded = true
        } catch (e) {
          console.error(e)
        }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I find <a href="https://vue-chartjs.org/guide/#chart-with-api-data" rel="nofollow noreferrer">this documentation</a> a bit vague because it does not explain what I need to pass in <code>chartdata</code>to the chart as props. Can you help me?</p>