Populating a chartJS with data from API through axios (VueJS)

Question

I'm having trouble inputting data into an instance of a ChartJS line-chart. It only shows one point with the correct data but the wrong label (titled 'label'):

Image of the plot

The confusing part is the arrays extracted seem to be correct, here are the observers from the console log: Arrays

I would appreciate the help I thought it was the syntax but after going through the ChartJS documentation I cannot find what the issue is, here is the code (I realise I called the data and filled arrays twice when I did not need to I am only doing this for testing.):

<template>
<div>
<ModelNavbar/>
          <line-chart v-if="loaded" :data="chartData"></line-chart>
</div>
</template>

<script>
import Vue from 'vue';
import ModelNavbar from '@/components/ModelNavbar';

export default {
  name: 'charts',
  props: ["items"],
  components: {
    ModelNavbar
  },
  data() {
    return {
      loaded: false,
      chartData: '',
      file: null,
      spdMes: [],
      perPage: 5,
      fields: [  {key: 'id', label: 'ID'},
       {key: 'spdMesRpm', label: 'Rotary Speed (Rev/s)'}]
    }
  },
  async created()
    {
      await Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
            .then((response) =>{
                this.spdMes = response.data.data.items;
                console.warn(this.spdMes);
            });
    },
    async mounted() {
      this.loaded = false
          Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
           .then((response) =>{
             this.dataList = response.data.data.items;

            this.chartData = {
              labels: this.dataList.map(item => item.id),
              datasets: [
                {
                label: 'Measured Speed',
                data: this.dataList.map(item => item.spdMesRpm)
                }
              ]
            }
            this.loaded = true
            console.warn(this.chartData);
          });
    }
}
</script>

Answer 1

I am experienced with Vue 2 and the Vue CLI (Single File Components). I did a personal project with Vue and Chart.js a couple of months ago, creating a sample bar chart and pie chart. After reading your question, I edited my project to create a sample line chart. It is working, so I am including the components here as an example.

chart-configurations.js

const sampleLineConfig = {
  type: 'line',
  data: {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July'
    ],
    datasets: [{
      label: 'Sample Dataset',
      data: [],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    responsive: false
  }
};

export {
  sampleLineConfig
}

App.vue

<template>
  <div id="app">
    <chart-test v-if="dataReady" :chartData="lineChartData" />
  </div>
</template>

<script>
  import ChartTest from '@/components/ChartTest'

  export default {
    name: 'App',
    components: {
      ChartTest
    },
    data() {
      return {
        lineChartData: [65, 59, 80, 81, 56, 55, 40],
        dataReady: false
      }
    },
    methods: {
      getData() {
        this.dataReady = true;
      }
    },
    mounted() {
      // Simulate API call
      setTimeout(this.getData(), 1000);
    }
  }
</script>

ChartTest.vue

<template>
  <div class="chart-test">
    <h3>Chart Test</h3>
    <canvas id="chart-canvas" width="500" height="500" ref="chartref"></canvas>
  </div>
</template>

<script>
  import Chart from 'chart.js';
  import { sampleLineConfig } from '@/chart-configurations.js'

  export default {
    data() {
      return {
        chartObj: null,
        chartConfig: sampleLineConfig
      }
    },
    props: {
      chartData: {
        type: Array,
        required: true
      }
    },
    methods: {
      setChartData() {
        this.chartConfig.data.datasets[0].data = this.chartData;
      }
    },
    mounted() {
      this.setChartData();
      this.chartObj = new Chart(this.$refs.chartref, this.chartConfig);
    },
    // beforeDestroy() {
    //   // This necessary if canvas is reused for a new chart
    //   this.chartObj.destroy();
    // }
  }
</script>