How to change x axis labels in ng2-charts

Question

I am developing an Angular 6 project using ng2-charts.However I want to change x axis labels from [0...60,70] to [0%...80%,90%,100%]

Here is part of the chart.component.html file where I describe the chart options:

    <div style="display: block">
        <canvas baseChart
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
        </canvas>
      </div>

Here is part of the chart.component.ts file:

    public chartType: string = 'horizontalBar';

  public chartDatasets: Array<any> = [
    { data: [this.cok_iyi,this.iyi,this.orta,this.gelistirilmeli,this.diger] ,label: 'Cevaplar'}
  ];

  public chartLabels: Array<any> = ['Çok iyi(4)', 'İyi(3)', 'Orta(2)', 'Geliştirilmeli(1)', 'Bu konuda olumlu...'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(94, 140, 63, 1)',
        'rgba(59, 94, 125, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(71, 172, 173, 1)',
        'rgba(153, 102, 255, 1)',
        ],
      borderColor: [
        'rgba(94, 140, 63,1)',
        'rgba(59, 94, 125, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(71, 172, 173, 1)',
        'rgba(153, 102, 255, 1)',
        ],
      borderWidth: 2,
    }
  ];

  public chartOptions: any = {
    responsive: true
  };
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

I want to change x axis labels from [0,...,60,70] to [0%,...,80%,90%,100%]