How do i remove the Axes Y and Z using Vuechartjs

Question

I'm trying to remove the Axes and let ONLY the line of the chart appear, i might smack my head in the wall a few more times before i pass out so please help me. Here's the component, I tried accessing the options instance but i don't know where should i use it either.

I tried use the options instance in data() but without success, it's probably some easy mistake but it's my first time using vuechartjs

<template>
  <div class="col-sm-3 col-md-5 p-3">
    <span class="m-3">Balance</span>
      <LineChartGenerator
        :chart-options="chartOptions"
        :chart-data="chartData"
        :chart-id="chartId"
        :dataset-id-key="datasetIdKey"
        :plugins="plugins"
        :css-classes="cssClasses"
        :styles="styles"
        :width="50"
        :height="100"
      /> 
  </div>
</template>
<script>
import { Line as LineChartGenerator } from 'vue-chartjs'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
)
export default {
  name: "BalanceG",
components: {
    LineChartGenerator,
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => {}
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
          'July'
        ],
        datasets: [
          {
            label: 'Data One',
            data: [10, 90, 34, 35, 88, 12, 40],
            borderColor: "#F1603F",
            pointRadius: 0,
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        plugins:{           
          legend:{
            enable:false,
            display:false,
            position: "top",
          }
        }
      },
    }
  }
}
</script>

Answer 1

You need to disable the axes in your options object like so:

chartOptions: {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  }
}