Vuejs - Chart.js wrapper vue3-chart-v2 not displaying labels when data are passed as object

Question

When I'm passing data as an object (including x labels), it's not showing all the data, and labels are undefined.

My Home.vue file:

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {
            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: 10, y: 20},
                  {x: 20, y: 10},
                  {x: 30, y: 20},
                  {x: 40, y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
          }
      }
  }
})
</script>

My Chart2.vue component:

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'MonthlyChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

UPDATE:

As suggested, I tried the 2 methods.

Method 1: Converting my x scale values in string: but still have the issue.

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: "10", y: 20},
                  {x: "20", y: 10},
                  {x: "30", y: 20},
                  {x: "40", y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
            responsive: false,
          }
      }
  }
})
</script>

Method 2: Adding the scales in options as below: but still have the issue.

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: 10, y: 20},
                  {x: 20, y: 10},
                  {x: 30, y: 20},
                  {x: 40, y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
            responsive: false,
            scales: {
              x: {
                type: 'linear',
              }
            }
          }
      }
  }
})
</script>

Answer 1

This is because you provide the X values as numbers while the default implementation of the X scale for a line chart is category, the category scale expects strings for its values.

So you can solve your problem in 2 ways, either change your X values from numbers to strings or change your X scale type to linear.

chartOptions: {
  parsing: false,
  scales:{
    x:{
      type: 'linear'
    }
  }
}