Laravel Livewire Charts

Hallo Guys .. i Have a Problem with My Laravel Chart Components

So, This is My Charts Compoenent

<?php

namespace App\Livewire\Landing;

use App\Models\Dokumen;
use Livewire\Component;
use Illuminate\Support\Facades\DB;

class Chart extends Component
{
    public $tahun = null;
    public $paketTender;
    public $paketNonTender;

    protected $listeners = ['tahunTerpilih' => 'filterBerdasarkanTahun'];

    public function filterBerdasarkanTahun($tahun)
    {
        $this->tahun = $tahun;
        $this->loadChart();
    }

    public function mount()
    {
        $this->tahun = Dokumen::latest()->distinct()->pluck('tahun')->first();
        $this->loadChart();
    }

    private function loadChart()
    {
        $this->loadPaketTender();
        $this->loadPaketNonTender();
    }

    private function loadPaketTender()
    {
        $this->paketTender          = Dokumen::tender()
                                        ->where('tahun', $this->tahun)
                                        ->selesai()
                                        ->selectRaw("
                                            SUM(nilai_hps) as total_hps,
                                            SUM(nilai_pagu) as total_pagu,
                                            SUM(nilai_kontrak) as total_kontrak,
                                            tahun")
                                        ->groupBy('tahun')
                                        ->get();
    }

    private function loadPaketNonTender()
    {
        $this->paketNonTender       = Dokumen::nonTender()
                                        ->where('tahun', $this->tahun)
                                        ->selesai()
                                        ->selectRaw("
                                            SUM(nilai_hps) as total_hps,
                                            SUM(nilai_pagu) as total_pagu,
                                            SUM(nilai_kontrak) as total_kontrak,
                                            tahun")
                                        ->groupBy('tahun')
                                        ->get();
    }

    public function render()
    {
        $data = [
            'paketTender'                   => json_encode($this->paketTender),
            'paketNonTender'                => json_encode($this->paketNonTender),
        ];
        // dd($data);

        return view('livewire.landing.chart');
    }
}

and this is my Chart view

<div class="row mt-2">

    <div class="col-lg-6">
        <div class="ibox ">
            <div class="ibox-title">
                <h5>Perbandingan Pagu, Nilai Kontrak dan HPS Paket <strong>Tenders</strong> </h5>
            </div>
            <div class="ibox-content">
                <div class="m-t-sm">

                    <div class="row">
                        <div class="col-md-12" wire:ignore>
                            <div id="tender">
                            </div>
                        </div>
                    </div>

                </div>


                <div class="m-t-md">
                    <small>
                        <strong>Perbandingan :</strong> Nilai Pagu, NIlai Kontrak dan Nilai HPS Tender
                    </small>
                </div>
            </div>
        </div>
    </div>

     <div class="col-lg-6">
        <div class="ibox ">
            <div class="ibox-title">
                <h5>Perbandingan Pagu, Nilai Kontrak dan HPS Paket <strong>Non-Tender </strong></h5>
            </div>
            <div class="ibox-content">
                <div class="m-t-sm">

                    <div class="row">
                        <div class="col-md-12" wire:ignore>
                            <div id="nontender">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="m-t-md">
                    <small>
                        <strong>Perbandingan :</strong> Nilai Pagu, Nilai Kontrak dan Nilai HPS Non-Tender
                    </small>
                </div>

            </div>
        </div>
      </div>

</div>

@push('scripts')
<script>

    function pecahan(x) {
        return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ".");
    }

    var options = {
          series: [{
          name: 'Net Profit',
          data: [
            @foreach ($paketTender as $data)
                {{ $data['nilai_hps'] }},
            @endforeach
          ]
        }, {
          name: 'Revenue',
          data: [
            @foreach ($paketTender as $data)
                {{ $data['nilai_pagu'] }},
            @endforeach
          ]
        }, {
          name: 'Free Cash Flow',
          data: [
            @foreach ($paketTender as $data)
                {{ $data['nilai_kontrak'] }},
            @endforeach
          ]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: [
            @foreach ($paketTender as $data)
                '{{ $data['tahun'] }}',
            @endforeach
          ],
        },
        yaxis: {
          title: {
            text: '$ (thousands)'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "$ " + val + " thousands"
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#tender"), options);
        chart.render();
    var options = {
          series: [{
          name: 'Net Profit',
          data: [
            @foreach ($paketNonTender as $data)
                {{ $data['nilai_hps'] }},
            @endforeach
          ]
        }, {
          name: 'Revenue',
          data: [
            @foreach ($paketNonTender as $data)
                {{ $data['nilai_pagu'] }},
            @endforeach
          ]
        }, {
          name: 'Free Cash Flow',
          data: [
            @foreach ($paketNonTender as $data)
                {{ $data['nilai_kontrak'] }},
            @endforeach
          ]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: [
            @foreach ($paketNonTender as $data)
                '{{ $data['tahun'] }}',
            @endforeach
          ],
        },
        yaxis: {
          title: {
            text: '$ (thousands)'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "$ " + val + " thousands"
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#nontender"), options);
        chart.render();

</script>

@endpush

my chart didnt show any data, but when dd the $data

array:2 [▼ // app/Livewire/Landing/Chart.php:138
  "paketTender" => "[{"total_hps":242326738080,"total_pagu":52489993216,"total_kontrak":1558087082816,"tahun":2023}]"
  "paketNonTender" => "[{"total_hps":155974216444,"total_pagu":69011756184,"total_kontrak":797676290320,"tahun":2023}]"
]

whats wrong with my code, i've tried every way possible and it didnt work. thank you