How to customize chart in asantibanez/livewire-charts

I have 2 tables described below

rating_history id user_id rating_id year

ratings id title

relationship tables rating_history.rating_id belongsTo ratings.id rating_history.user_Id belongsTo users.id

I want to make a line chart of performance progress year by year for the Y axis, even though I put numbers as data I would like to display them as alphabet 4 represents A, 3 represents B, 2 represents C, 1 represents D as well the data labels I would like to display them as alphabet

how do I make it?

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class RatingHistory extends Model
{
    use HasFactory;

    protected $table = 'rating_histories';
    protected $fillable = ['employee_id', 'rating_id', 'year'];

    public function employee()
    {
        return $this->belongsTo(Employee::class);
    }

    public function rating()
    {
        return $this->belongsTo(Rating::class);
    }
}

<?php

namespace App\Http\Livewire\Chart;

use App\Models\RatingHistory as ModelsRatingHistory;
use Asantibanez\LivewireCharts\Facades\LivewireCharts;
use Asantibanez\LivewireCharts\Models\LineChartModel;
use Livewire\Component;

class RatingHistory extends Component
{
    public $employee_id;
    public $firstRun = true;
    public $showDataLabels = true;

    protected $listeners = [
        'onPointClick' => 'handleOnPointClick',
        'onSliceClick' => 'handleOnSliceClick',
        'onColumnClick' => 'handleOnColumnClick',
        'onBlockClick' => 'handleOnBlockClick',
    ];

    public function handleOnPointClick($point)
    {
        dd($point);
    }

    public function handleOnSliceClick($slice)
    {
        dd($slice);
    }

    public function handleOnColumnClick($column)
    {
        dd($column);
    }

    public function handleOnBlockClick($block)
    {
        dd($block);
    }


    public function render()
    {
        $ratingHistory = ModelsRatingHistory::with('rating:id,title')
            ->where('employee_id', $this->employee_id)
            ->orderBy('year', 'asc')
            ->get();

        $lineChartModel = $ratingHistory
            ->reduce(
                function (LineChartModel $lineChartModel, $data) use ($ratingHistory) {
                    return $lineChartModel->addPoint($data->year, $data->rating_id);
                },
                (new LineChartModel())
                    ->setTitle(trans('Performance'))
                    ->setAnimated($this->firstRun)
                    ->withLegend()
                    ->withGrid()
                    ->withDataLabels()
                    ->setXAxisVisible(true)
                    ->setYAxisVisible(true)
                    ->setYAxisCategories([1, 2, 3, 4])
                    ->withOnPointClickEvent('onPointClick')
            );

        return view('livewire.chart.rating-history')->with(['lineChartModel' => $lineChartModel]);
    }
}

<div class="shadow rounded p-4 border bg-white" style="height: 32rem;">
    <livewire:livewire-line-chart
        key="{{ $lineChartModel->reactiveKey() }}"
        :line-chart-model="$lineChartModel"
    />
</div>

<div class="col-md-6 col-sm-* mb-2">
		<div class="card mb-0">
					<div class="card-header  d-flex justify-content-between align-items-center">
						<h4 class="card-title">Performance</h4>
					</div>
					<div class="card-content">
						<div class="card-body p-0">
@livewire('chart.rating-history', ['employee_id' => $info->id])
						</div>
				</div>
		</div>
</div>