yAxis of chartjs is not displayed?

<script lang="ts">
import { Vue, Component } from "nuxt-property-decorator";
import BarChartComponent from "@/components/chart/BarChartComponent";
import LineChartComponent from "@/components/chart/LineChartComponent";
import moment from "moment"
import traffic from '@/modules/traffic'
import { TrafficCarrierSummary, TrafficCarrierDetail } from "@/type/traffic-carrier-summary";

const FONT_COLOR = "rgba(255, 255, 255, 1)";
const GRID_LINES_SETTING = {
  display: true,
  drawOnChartArea: true,
  color: "rgba(255, 255, 255, .5)",
  zeroLineColor: "rgba(255, 255, 255, 1)"
};

@Component({
  components: {
    BarChartComponent,
    LineChartComponent
  },
  asyncData: async () => {

    let searchObject = {
      from: moment().subtract(1, 'months').set('date', 1).format('Y-M-D'),
      to: moment().subtract(1, 'months').endOf('month').format('Y-M-D'),
    }
    const response = await traffic.package(searchObject)

    return {
      searchObject: searchObject,
      packageData: response.data,
    }
  }
})
export default class extends Vue {
  width: number = 575
  packageData!: Array<TrafficCarrierSummary>
  packageDaliy: TrafficCarrierDetail | null = null
  selectedPackage: string | null = null
  isDayPackage: boolean = false
  selectedDaliyDate: any
  loading: boolean = false

  lineColors = [
    'rgba(120,  0,  0,1)',
    'rgba(176,  0, 10,1)',
    'rgba(234, 57, 51,1)',
    'rgba(251,184, 43,1)',
    'rgba(255,234, 97,1)',
    'rgba( 92, 98, 91,1)',
    'rgba( 35, 37, 35,1)',
  ]

  searchObject = {
    from: null,
    to: null,
  } as any
  chartDataPackage: any = {};
  chartDataCount: any = {};
  chartPackageOptions: Chart.ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: false,
    },
    scales: {
      yAxes: [
        {
          scaleLabel: {
              display: true,
              labelString: 'Data [GB]',
              fontColor: "red",
              fontSize: 16
          },
          ticks: {
            suggestedMax: 1000,
            suggestedMin: 0,
            stepSize: 100,
            callback: function(value, index, values) {
              return value + "GB";
            }
          }
        }
      ]
    }
  };

  created() {
    this.searchObject.from = new Date(moment().subtract(1, 'months').set('date', 1).toDate())
    this.searchObject.to = new Date(moment().subtract(0, 'months').endOf('month').toDate())
    this.selectedDaliyDate = this.searchObject.from
    this.drawChartPackage()
  }

  async search() {
    this.loading = true
    let from = moment(this.searchObject.from).format('Y-MM-DD')
    let to = moment(this.searchObject.to).format('Y-MM-DD')
    const response = await traffic.package({
      from: from,
      to: to
    })
    this.packageData = response.data
    this.drawChartPackage()
    this.loading = false

  }

  drawChartPackage() {
    let dataArr: Array<any> = []
    let labels: Array<string> = []
    let obj: any = {}
    this.packageData.forEach(element => {
      if(!labels.includes(element.target_date)){
        labels.push(element.target_date)
      }

      if(!obj[element.package]){
        obj[element.package] = []
      }

      obj[element.package].push(Number(element.data_total) / 1024 / 1024 / 1024)
    })

    let index = 0
    Object.keys(obj).map(key => {
      dataArr.push({
        label: key,
        data: obj[key],
        borderColor: this.lineColors[index],
        backgroundColor: 'rgba(0,0,0,0)',
        type: 'line'
      })
      index++
    })

    this.chartDataPackage = {
      labels: labels,
      datasets: dataArr
    }
  }

}
</script>