title: Vue chart js Dynamic Radar Chart
body: <p>Just wondering if someone can point me in the right direction here when it comes to dynamic data from vuex and applying it to radar charts in vue-chart.js.</p>
  <p>Below is my vue file.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Chart Demo&lt;/h1&gt;
      &lt;v-card class=&quot;question card__text pa-sm-5 py-5 px-2&quot;&gt;
        &lt;div&gt;
          &lt;radar-chart :data=&quot;radarChartData&quot; :options=&quot;radarChartOptions&quot; :height=&quot;400&quot; /&gt;
        &lt;/div&gt;
      &lt;/v-card&gt;
      &lt;v-container fluid&gt;
        &lt;v-row dense&gt;
          &lt;v-col
            v-for=&quot;card in getCards&quot;
            :key=&quot;card.id&quot;
            cols=&quot;12&quot;
            :sm=&quot;card.flex&quot;
            xs=&quot;1&quot;
          &gt;
          &lt;v-card&gt;
            &lt;v-card-title class=&quot;title&quot; v-text=&quot;card.title&quot;&gt;
            &lt;/v-card-title&gt;
            &lt;p class=&quot;pa-4&quot;&gt;Importance: {{ card.importance }} &lt;br /&gt;
            Effectiveness: {{ card.effectiveness }} &lt;/p&gt;
          &lt;/v-card&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from &quot;vuex&quot;
  import RadarChart from &quot;~/components/RadarChart&quot;
  export default {
    layout: &quot;tabs&quot;,
    components: {
      RadarChart,
    },
    data() {
      return {
        radarChartOptions: {
            responsive: true,
            scales: {
              yAxes: [
                  {
                  ticks: {
                      beginAtZero: true,
                      display: false,
                      min: 0,
                      max: 10,
                  },
                  gridLines: {
                      display: false,
                  },
                  scaleLabel: {
                      display: false,
                  }
                  }
              ],
            xAxes: [
              {
                gridLines: {
                  display: false,
                },
              }
            ]
          }
        },
        /* radarChartData: {
          labels: [
          &quot;Personal Growth&quot;,
          &quot;Work&quot;,
          &quot;Leisure&quot;,
          &quot;Health&quot;,
          &quot;Community&quot;,
          &quot;Family&quot;,
          &quot;Parenting&quot;,
          &quot;Intimate&quot;,
          &quot;Social&quot;,
          &quot;Spirituality&quot;,
          ],
          datasets: [
            {
              label: &quot;Importance&quot;,
              backgroundColor: 'rgb(54, 162, 235, 0.75)',
              data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
            },
            {
              label: &quot;Effectiveness&quot;,
              backgroundColor: 'rgb(75, 192, 192, 0.75)',
              data: [7, 7, 7, 6, 3, 5, 10, 6, 7, 4],
            },
          ]
        } */
      } 
    },
    computed: {
      ...mapGetters(&quot;cards&quot;, [&quot;getCards&quot;]),
      //...mapState([&quot;getCards&quot;]),
      barChartData() {
        return {
          labels: ['Importance', 'Effectiveness'],
          datasets: [
            {
              // backgroundColor: [&quot;red&quot;, &quot;orange&quot;, &quot;yellow&quot;],
              backgroundColor: [chartColors.blue, chartColors.green],
              data: [this.importance, this.effectiveness]
            }
          ]
        } 
      },
      radarChartData() {
        return {
          labels: [
          &quot;Personal Growth&quot;,
          &quot;Work&quot;,
          &quot;Leisure&quot;,
          &quot;Health&quot;,
          &quot;Community&quot;,
          &quot;Family&quot;,
          &quot;Parenting&quot;,
          &quot;Intimate&quot;,
          &quot;Social&quot;,
          &quot;Spirituality&quot;,
          ],
          datasets: [
            {
              label: &quot;Importance&quot;,
              backgroundColor: 'rgb(54, 162, 235, 0.75)',
              data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
            },
            {
              label: &quot;Effectiveness&quot;,
              backgroundColor: 'rgb(75, 192, 192, 0.75)',
              data: [7, 7, 7, 6, 3, 5, 10, 6, 7, 4],
            },
          ]
        }
      },
      card() {
        return this.getCards.find((el) =&gt; el.id === this.id)
      },
      effectiveness: {
        get() {
          return this.card.effectiveness
        },
        set(effectiveness) {
          this.$store.commit(&quot;cards/updateEffectiveness&quot;, { card: this.card, effectiveness})
        },
      },
      importance: {
        get() {
          return this.card.importance
        },
        set(importance) {
          this.$store.commit(&quot;cards/updateImportance&quot;, { card: this.card, importance})
        },
      },
      keywords: {
        get() {
          return this.card.keywords
        },
        set(keywords) {
          this.$store.commit(&quot;cards/updateKeywords&quot;, { card: this.card, keywords})
        }
      }
    },
    /* computed: {
      radarChartData() {
        return {
          labels: [
          &quot;Personal Growth&quot;,
          &quot;Work&quot;,
          &quot;Leisure&quot;,
          &quot;Health&quot;,
          &quot;Community&quot;,
          &quot;Family&quot;,
          &quot;Parenting&quot;,
          &quot;Intimate Relationships&quot;,
          &quot;Social&quot;,
          &quot;Spirituality&quot;,
        ],
        datasets: [
            {
              // backgroundColor: [&quot;red&quot;, &quot;orange&quot;, &quot;yellow&quot;],
              data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
            }
          ]
        }
      },
    }*/
  }
  &lt;/script&gt;
  </code></pre>
  <p>below the radar chart is an array of cards that dynamically display the information that I also want to use for the radar chart. I can get the info to show for the cards, but not the radar chart.</p>
  <p>I am guessing I am missing something really obvious, and I know I have to somehow reference the card.id, but I am not sure how to do that. I have tried a :key binding on the radar-chart tag but that throws an error of:</p>
  <p>‘card’ is not defined</p>
  <p>below is the array of store data in my store js file:</p>
  <pre><code>import createPersistedState from &quot;vuex-persistedstate&quot;
  export const state = () =&gt; ({
  cards: [
  {
  title: “Personal Growth”,
  src: require(&quot;~/assets/images/values/growth.svg&quot;),
  flex: 6,
  id: “1”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Leisure”,
  src: require(&quot;~/assets/images/customize.svg&quot;),
  flex: 6,
  id: “2”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Sprituality”,
  src: require(&quot;~/assets/images/values/spirituality.svg&quot;),
  flex: 6,
  id: “3”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Work”,
  src: require(&quot;~/assets/images/values/work.svg&quot;),
  flex: 6,
  id: “4”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Health”,
  src: require(&quot;~/assets/images/values/health.svg&quot;),
  flex: 6,
  id: “5”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Community \n&amp; Environment”,
  src: require(&quot;~/assets/images/values/community.svg&quot;),
  flex: 6,
  id: “6”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Family Relationships”,
  src: require(&quot;~/assets/images/values/family.svg&quot;),
  flex: 6,
  id: “7”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Social Relationships”,
  src: require(&quot;~/assets/images/values/social.svg&quot;),
  flex: 6,
  id: “8”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Intimate Relationships”,
  src: require(&quot;~/assets/images/values/intimate.svg&quot;),
  flex: 6,
  id: “9”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  {
  title: “Parenting”,
  src: require(&quot;~/assets/images/values/parenting.svg&quot;),
  flex: 6,
  id: “10”,
  keywords: [],
  importance: “”,
  effectiveness: “”,
  },
  ],
  })
  
  export const plugins = [createPersistedState()]
  
  export const getters = {
    getCards: (state) =&gt; {
      return state.cards
    },
  }
  
  export const mutations = {
    updateEffectiveness(state, {card, effectiveness}) {
      card.effectiveness = effectiveness
    },
    updateImportance(state, {card, importance}) {
      card.importance = importance
    },
    updateKeywords(state, {card, keywords}) {
      card.keywords = keywords
    }
  }
  </code></pre>
  <p>Any tips, advice are welcome and thanks for any help! :)</p>
  <p>Screenshots of what the radar chart looks like with static data are attached.</p>
  <p><a href="https://i.stack.imgur.com/iU0Ln.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iU0Ln.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/R3r0e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3r0e.png" alt="enter image description here" /></a></p>