title: How To Use Api Data With Vue Chart.js
body: <p>So I am new to using data visualization in an application and I am trying to set my data coming from my api as the data the doughnut chart uses to display however I cannot figure out how to properly access the data</p>
  
  <p>I have installed vue-chartjs as a way to simplify it for component use</p>
  
  <p>Here is the Chart component </p>
  
  <pre><code>&lt;script&gt;
  import { Doughnut } from 'vue-chartjs'
  import {mapGetters} from 'vuex'
  
  export default {
      name: 'FirmChart',
      extends: Doughnut,
      computed: {
          ...mapGetters(['chartEngagements']),
      },
      mounted () {
          this.renderChart({
          labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review', 'Complete'],
          datasets: [
                  {
                  label: 'Data One',
                  borderColor: 'black',
                  pointBackgroundColor: 'white',
                  borderWidth: 1,
                  pointBorderColor: 'white',
                  backgroundColor: [
                      '#0077ff', 
                      '#0022ff',
                      '#1133bb',
                      '#0088aa',
                      '#11ffdd',
                      '#aabbcc',
                      '#22aabb',
                      ],
                  data: [
                      10,
                      10,
                      10,
                      10,
                      10,
                      10,
                      ]
                  },
              ]
          }, {responsive: true, maintainAspectRatio: false});
      },
      created() {
          this.$store.dispatch('retrieveEngagementsChartData')
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>now my data is coming from the <code>chartEngagements</code> getter and this is the display of that data in the console</p>
  
  <pre><code>{Complete: Array(1), Review: Array(3), 2nd Review: Array(1), Recieved: Array(7), Preparation: Array(1), …}
  </code></pre>
  
  <p>My question is how do I set the <code>Complete: Array(1)</code> etc to the <code>data[]</code> attribute in my <code>this.renderChart()</code> method??</p>
  
  <p>I have tried doing something like this but It will not display anything</p>
  
  <pre><code>mounted () {
          this.renderChart({
          labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review' 'Complete'],
          datasets: [
                  {
                  label: 'Data One',
                  borderColor: 'black',
                  pointBackgroundColor: 'white',
                  borderWidth: 1,
                  pointBorderColor: 'white',
                  backgroundColor: [
                      '#0077ff', 
                      '#0022ff',
                      '#1133bb',
                      '#0088aa',
                      '#11ffdd',
                      '#aabbcc',
                      '#22aabb',
                      ],
                  data: [
                      this.chartEngagements.complete,
                      this.chartEngagements.review,
                      this.chartEngagements.2ndreview,
                      this.chartEngagements.preparation,
                      this.chartEngagements.recieved,
                      this.chartEngagements.scanned,
                      ]
                  },
              ]
          }, {responsive: true, maintainAspectRatio: false});
  </code></pre>
  
  <p>However it doesn't display anything.. any help would be greatly appreciated or a point in the right direction!</p>