title: chart js not dispalying data array that comes from an axios request
body: <p>I have an API end point that returns an array of 24 values that I want to use in my chartjs within a vue component.</p>
  <p>when the page loads I get no errors but the bars on the charts just don't show and I don't know why.</p>
  <p>EDIT: I noticed that the async function returns a promise instead of the actual data:</p>
  <pre><code>  async filterData() {
                await this.$axios.get('/api/data_app/job_count_by_hour/')
                    .then(response =&gt; {
                        return this.chart_data = response.data;
                    })
  
            }
  </code></pre>
  <p>here is the data return code, I have a function that populates the chart_data array :</p>
  <pre><code>        data(){
          return {
              form:{
                  day: 'select day',
                  workspace:'',
                  machine_family: [],
                  duration: []
              },
              res: [],
              total:[],
              chart_data: [],
              url: '/api/jobs/job_count_by_hour/',
              days: [&quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;, &quot;sunday&quot;],
              barChart2: {
                  labels: [&quot;6h&quot;, &quot;7h&quot;, &quot;8h&quot;, &quot;9h&quot;,&quot;10h&quot;,&quot;11h&quot;, &quot;12h&quot;, &quot;13h&quot;, &quot;14h&quot;, &quot;15h&quot;, &quot;16h&quot;, &quot;17h&quot;, &quot;18h&quot;, &quot;19h&quot;, &quot;20h&quot;, &quot;21h&quot;,&quot;22h&quot;, &quot;23h&quot;, &quot;00h&quot;],
                  datasets: [{
                          label: [&quot;popularity&quot;],
                          backgroundColor:&quot;#f93232&quot; ,
                          data: this.chart_data
                      },],
              },
          }
        },
        methods: {
            async filterData() {
  
                let _url = `${this.url}`
                await this.$axios.get(_url)
                    .then(response =&gt; {
                        this.chart_data = response.data;
                    })
                return this.chart_data
            },
        },
        mounted() {
          this.filterData()
        }
   }
  </code></pre>
  <p>this is the chart component:</p>
  <pre><code>    &lt;script&gt;
         import { Line } from 'vue-chartjs'
  
          export default {
              extends: Line,
                props: {
                  chartdata: {
                   type: Object,
                   default: null
                 },
           options: {
            type: Object,
            default: null
            }
           },
       mounted () {
  this.renderChart(this.chartdata, this.options)
   }
  }
  </code></pre>
  
  <p>in the parent component It looks like this:</p>
  <pre><code>en &lt;BarChart :labels=&quot;barChart2.labels&quot;
           :datasets=&quot;barChart2.datasets&quot;
           :height=&quot;100&quot;
    &gt;
    &lt;/BarChart&gt;ter code here
  </code></pre>