link controller mathod “undefined” chart js

I’m having trouble with Chart.js where clicking on a chart segment always redirects to an undefined value. I have a Doughnut chart and want each segment to redirect to a specific URL based on the segment clicked. However, the redirection always leads to undefined.

Here’s the relevant part of my code:

Blade Template (Laravel):

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var ctx = document.getElementById('teknisiChart').getContext('2d');

            var chartData = {
                labels: ['4 Tahun', '2-3 Tahun', '1 Tahun', 'Under 1 Tahun'],
                datasets: [{
                    data: [
                        {{ $countMoreThan4Years }},
                        {{ $countBetween2and3Years }},
                        {{ $count1YearAgo }},
                        {{ $countLessThan1Year }}
                    ],
                    backgroundColor: [
                        'rgba(255, 68, 68, 0.8)',
                        'rgba(255, 209, 91, 0.8)',
                        'rgba(223, 250, 125, 0.8)',
                        'rgba(114, 247, 137, 0.8)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 3
                }]
            };

            var teknisiChart = new Chart(ctx, {
                type: 'doughnut',
                data: chartData,
                options: {
                    onClick: function(evt, item) {
                        if (item.length > 0) {
                            var index = item[0].index;
                            console.log('Index:', index);
                            var category = ['more-than-4-years', '2-3-years', '1-year', 'under-1-year'][
                                index
                            ];
                            console.log('Category:', category);
                            window.location.href = `{{ url('/hardware') }}/${category}`;
                        }
                    },
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return chartData.labels[tooltipItem.dataIndex] + ': ' + tooltipItem
                                        .formattedValue;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>

Controller Method (Laravel):

<?php

namespace AppHttpControllers;

use CarbonCarbon;
use IlluminateHttpRequest;
use AppModelsItMasterHardware;

class HardwareController extends Controller
{
    public function show($ageCategory)
    {
        dd($ageCategory); // Debugging line
        $dateNow = Carbon::now();

        switch ($ageCategory) {
            case 'more-than-4-years':
                $dateLimit = $dateNow->copy()->subYears(4);
                $hardware = ItMasterHardware::where('tgl_beli', '<=', $dateLimit)->get();
                break;

            case '2-3-years':
                $dateLimitStart = $dateNow->copy()->subYears(3);
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case '1-year':
                $dateLimitStart = $dateNow->copy()->subYear();
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case 'under-1-year':
                $dateLimit = $dateNow->copy()->subYear();
                $hardware = ItMasterHardware::where('tgl_beli', '>=', $dateLimit)->get();
                break;

            default:
                abort(404);
        }

        return view('hardware.index', compact('hardware'));
    }
}

When I click on a segment in the Doughnut chart, it redirects to a URL with undefined as part of the path. I am trying to use the segment index to determine which URL to redirect to, but the resulting URL is not correct.

What I’ve Tried:
Debugging with console.log to check the index and category values.
Ensuring that the @json directive is correctly passing PHP variables to JavaScript.
Checking for JavaScript errors in the console.

How to correctly pass the segment index from Chart.js to construct a URL.
Any issues with the provided code that might be causing undefined values.