Chartjs-How to solve Chart js mismatched x-axes label and value dynamically in Laravel?

I think the problem with mismatched data of $female and $male with JS year variable.

var year = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
var female = <?php echo $female; ?>;
var male = <?php echo $male; ?>;

Pass the ‘0’ if $female OR $male doesn’t have value for each year(Let’s say 2000). So your $female and $male should be like:

var year = ['2000','2001','2002','2003', '2004'...];
var female = ['0','34', '0','65', '54',...];
var male = ['0','75', '0','34', '0',...];

Update

Try this below code with full snippet of controller side. Replace enroll with your database table name into this query.

$rsltEnrollData = DB::table('enroll')->selectRaw('sy as sy, gender, SUM(tot_enroll) as count')
->groupBy('sy')
->orderBy('sy')
->get();

$arrFemale = array();
$arrMale = array();
$arrYearData = array();
foreach($rsltEnrollData as $key => $objEnrollData){

    if(!isset($arrYearData[$objEnrollData->sy])){
        $arrYearData[$objEnrollData->sy]['Male'] = 0;
        $arrYearData[$objEnrollData->sy]['Female'] = 0;
    }
    $arrYearData[$objEnrollData->sy][$objEnrollData->gender] = $objEnrollData->count;
    $arrFemale = $arrYearData[$objEnrollData->sy]['Female'];
    $arrMale = $arrYearData[$objEnrollData->sy]['Male'];
}

Debug

foreach($rsltEnrollData as $key => $objEnrollData){
 print('<pre style="color:red;">');
 print_r($objEnrollData);
 print('</pre>');
}
exit;

this is a snippet of the script in my project. maybe a little different, but maybe someone needs it. and hope it helps in configuring chart js with laravel and database

JAVASCPT

 $(document).ready(function() {
            var statistics_chart = document.getElementById("myChart").getContext('2d');
            fetch("{{url('chart')}}")
            .then(response =>response.json())
            .then(json=>{
                var myChart = new Chart(statistics_chart, {
                    type: 'line',
                    data: {
                        labels: json.labels,
                        datasets: json.dataset,
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    // display: false,
                                    drawBorder: false,
                                    color: '#f2f2f2',
                                },
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 10000,
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false,
                                    tickMarkLength: 15,
                                }
                            }]
                        },
                    }
                });
            })
        });

Controller

public function chart()
{
    $data = Kas::select([
        DB::raw("SUM(debit) as total_debit"),
        DB::raw("SUM(kredit) as total_kredit"),
        DB::raw("MONTH(created_at) as bln"),
        // DB::raw("YEAR(created_at) as year")
    ])
    ->whereYear('created_at', 2022)
        ->groupBy([
            'bln'
        ])
        ->orderBy('bln')
        ->get();

    $arrBln = [1 => 'Jan','Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
    $totalD = $totalK = [];
    foreach ($data as $tot) {
      $totalD[$tot->bln] = $tot->total_debit;
      $totalK[$tot->bln] = $tot->total_kredit;
    }

    foreach ($arrBln as $month =>$name){
        if(!array_key_exists($month, $totalD)){
            $totalD[$month]= 0;
        }
        if(!array_key_exists($month, $totalK)){
            $totalK[$month]= 0;
        }
    }

    ksort($totalD);
    ksort($totalK);

    return[
        'labels' => array_values($arrBln),
        'dataset' => [
            [
                'label' => 'Pemasukan',
                'data' => array_values($totalD),
                'borderWidth'=> 2,
                'backgroundColor'=> 'rgba(63,82,227,.8)',
                'borderWidth' => 0,
                'borderColor' =>'transparent',
                'pointBorderWidth' => 0,
                'pointRadius' => 3.5,
                'pointBackgroundColor' => 'transparent',
                'pointHoverBackgroundColor' => 'rgba(63,82,227,.8)',

            ],
            [
                'label' => 'Pengeluaran',
                'data' => array_values($totalK),
                'borderWidth'=> 2,
               'backgroundColor' => 'rgba(254,86,83,.7)',
                'borderWidth' => 0,
                'borderColor' =>'transparent',
                'pointBorderWidth'=> 0,
                'pointRadius'=> 3.5,
                'pointBackgroundColor'=> 'transparent',
                'pointHoverBackgroundColor'=> 'rgba(254,86,83,.8)',

            ],
        ]
    ];
}