title: Vuejs with ChartJS populate from API
body: <p>How can I populate my chart with the data from my API</p>
  
  <pre><code>&lt;script&gt;
  import VueCharts from 'vue-chartjs'
  import { Pie, Bar } from 'vue-chartjs'
  import axios from 'axios'
  
  export default {
  data() {
    return {
      dailyLabels: [] ,
      dailyData: []
    }
  },
  extends: Bar,
  mounted() {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday ', 'Friday', 'Saturday', 'Sunday'],
      datasets: [
        {
          label: 'Daily Students',
          backgroundColor: '#f87979',
          data: [12, 20, 1, 50, 10, 40, 18]
        }
      ]
    })
  },
  created() {
    axios.get(`https://localhost:44379/api/DailyStudents`)
      .then(response =&gt; {
        // JSON responses are automatically parsed.
        this.dailyData = response.data.days
      })
      .catch(e =&gt; {
        this.errors.push(e)
      })
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>MY Api returns This:</p>
  
  <blockquote>
  <pre><code>[
    {"day":"Wednesday","totalStudents":"21"},
    {"day":"Tuesday","totalStudents":"2"},
    {"day":"Thursday","totalStudents":"20"},
    {"day":"Friday","totalStudents":"23"}
  ]
  </code></pre>
  </blockquote>
  
  <p>Days should be my Label and totalStudents my data</p>
  
  <p>the chart should show of course the number of students by day, but the examples that I found are a little bit confusing.</p>