[Chartjs]-Chartjs not reading data from vuex mapped state

If you are using vue-chart-js you may want to declare your chartData inside a specific js file that you would put in your template file.

Here is an example :

import {Line} from "vue-chartjs"

export default {
    extends: Line,
    data: function(){
        return {
      datacollection: {
                 labels: chartLabels,
                 datasets: [{
                      data: chartDataPoints,
                 }],
            },
            options: {
                 responsive: true,
                 lineTension: 1,
            },
     },

    props:{
   chartDataPoints : Array,
  },
 }

Then put the line chart in your template as :

<template>
   <line-chart
      :chartDataPoints="charData"
    >
    </line-chart>
</template>

I would also recommand using MapGetters from vuex instead of mapState and putting this in to a computed properties.

computed: {
   ...mapGetters({
     chartDataPoints : 'chartData/getChartDataPoints'
   })
},

And in your chartData.js (store) :

export const state = () => ({
   charData: [],
})

export const getters = {

   getChartDataPoints: (state) => () => {
       return this.charData
   }

}

Then, you would change your template to :

<template>
   <line-chart
     :chartDataPoints="chartDataPoints()"
   >
   </line-chart>
</template>