Facing issues displaying my apex chart in my blade file
I see the axis but not the line graph am using laravel splade and apex charts so i should be able to see the line chart but i see a blank chart and am sure have done everything correctly

in console i see 26Error: attribute x2: Expected length, “NaN”.

my controller

<?php

namespace AppHttpControllers;

use AppModelsUser;
use ArielMejiaDevLarapexChartsLarapexChart;

class DashboardController extends Controller
{
    public function index()
    {
        $users = User::all();

        $chart = (new LarapexChart)
            ->lineChart()
            ->addLine('Users', (array)array_values((array)$users))
            ->setXAxis(array_keys((array)$users))
            ->setTitle('All Users')
            ->toVue();

        return view('dashboard.index', [
            'chart' => $chart
        ]);
    }
}

my blade file

<x-layout>
    <x-slot:header>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{__('Users')}}
        </h2>
    </x-slot:header>

    <div class="py-12">
        <div class="max-w-7xl mx-auto px-8">
            <div class="bg-white shadow-xl rounded-lg p-4 space-y-4">
                <apexchart v-bind="@js($chart)"></apexchart>
            </div>
        </div>
    </div>

</x-layout>

my app.js

import "./bootstrap";
import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";

import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

import VueApexCharts from "vue3-apexcharts";

const el = document.getElementById("app");

createApp({
    render: renderSpladeApp({ el })
})

    .use(VueApexCharts)
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true
    })
    .mount(el);

i expect to see the the graph axis not the line graph