Trouble after upgrading from Laravel 10 to 11 and laravel-chartjs 1.1 to 4.1

[funbookcollector]

Laravel charts has been working great for me for the last year in Laravel 10 and laravel-chartjs 1.1. I recently upgraded both Laravel and laravel-chartjs to 11 and 4.1 respectively at the same time and have run into an issue with all of my charts.

I'm using the Livewire implementation. To keep things super simple, I basically tried a brand new chart with a nearly exact copy/paste from the readme example.

ChartReadRatio.php

<?php

namespace App\Livewire;

use Livewire\Attributes\Computed;
use Livewire\Component;
use IcehouseVentures\LaravelChartjs\Facades\Chartjs;

class ChartReadRatio extends Component
{
    public $user;

    public $datasets;

    public $stat_readInCol;

    public $stat_numBookInCol;

    #[Computed]
    public function chart()
    {        
        return Chartjs::build()
            ->name('readRatioChart')
            ->livewire()
            ->model('datasets')
            ->type("line");
    }

    public function render()
    {
        $this->getData();

        return view('livewire.chart-read-ratio');
    }

    public function getData()
    {
        $data = [1, 2, 3]; // your data here
        $labels = ['a', 'b', 'c']; // your labels here
        
        $this->datasets = [
            'datasets' => [
                [
                    "label" => "User Registrations",
                    "backgroundColor" => "rgba(38, 185, 154, 0.31)",
                    "borderColor" => "rgba(38, 185, 154, 0.7)",
                    "data" => $data
                ]
            ],
            'labels' => $labels
        ];
    }
}

chart-read-ratio.blade.php

<div class="col-span-2">
    <div class="chart-container">
        <x-chartjs-component :chart="$chart" />
    </div>
</div>

When I visit the page, I'm getting the following error:
"Undefined variable $chart

With this line highlighted:
<x-chartjs-component :chart="$chart" />

I'm, admittedly, not a wiz with Laravel so don't assume I know anything. Could be a super simple correction.

[funbookcollector]

I should add. Just as a quick sanity check to make sure everything was installed correctly, I also basically copy/pasted the readme example for a regular (non livewire) line chart and it worked fine - I was able to view the chart. All I had to change from the example is I removed "compact()" from the view return.

[Damesio]

Maybe try by changing the highlighted line to:
<x-chartjs-component :chart="$this->chart" />
I believe you have to use $this in the blade file to access computed properties in Livewire. At least that worked for me.

I followed some of the examples on the demo repo so you can also check the Livewire examples there.

[funbookcollector]

If I do that I get:

Alpine Expression Error: Chart is not defined

Expression: "init() {
                chart = this.initChart(this.$wire.datasets)

                this.$wire.$watch('datasets', () => {
                    this.updateChart(chart, this.$wire.datasets)
                })
            }"

[peterjthomson]

Swapping $chart to $this->chart in the Livewire view seemed to fix it in my local. So that's a good start and I can update the docs to reflect it.

As for the Alpine Expression Error, what version of Livewire are you using? As some versions of Livewire bundle Alpine in a way that the package can interact with, and some don't.

[funbookcollector]

Looks like I'm using Livewire 3.3. Will that work or should I require a different version?

[peterjthomson]

Yep that'll be the problem. The Readme is using Livewire 4 in the example (the attribute to declare a computed property, the use of $this in the view file, etc ). The package itself does work with Livewire 3, so we'll have a look at clearer documentation and examples.

[funbookcollector]

This may be a dumb question, but just to be sure. Are you talking about Livewire 4 (I don't see any documentation or news about a main version greater than 3) or Livewire 3.4.x?

[funbookcollector]

Assuming you meant version 3.4 or greater, I went ahead and upgraded to the latest - Livewire 3.5 and still had the exact same results as I did before. Then tried Livewire 3.4 exactly and it's still the same results.

[peterjthomson]

Sorry! You're quite right, I was thinking of the upgrade from v2 to v3 (which did have some major changes). Oh well, if it's not Livewire versions then it's just brute forcing the setup syntax until we get it right. Maybe try:

• Adding a $chart property up top.
• Adding a mount() method.
• Moving the data to a service or controller shaping that you can dump the arrays from to test the data shape.
• Trying some examples from the demo repo instead of the readme.

Sorry you're having issues, but it's super worthwhile to get the Livewire onramp nice and smooth for people so I'm happy to help out as much as possible.

[funbookcollector]

Okay, I have some updates based on the suggestions in your bullets.

Adding a $chart property at the top does get past the "Chart is not defined" error, but then it just complains that $chart is null.

Adding a mount() method didn't really change anything. Any recommendations on what to put in it?

I don't completely understand the recommendation in the 3rd bullet.

The 4th bullet is where things get interesting (I think). So, I copied over the UsersChart.php Livewire demo directly from the demo repo and it worked only when I removed the ->livewire() line. If the ->livewire() line was in there, I was getting the same error as in the original post.

I then tried to create a more custom chart but starting with the demo example and modifying/removing pieces moving toward my desired chart until it eventually broke and I found that - it doesn't seem to just load the chart by default on page load. It seems to need some kind of trigger. I can create my custom chart but then I need to have something like this:

<div style="margin: 1rem auto; display: flex; gap: 1rem; width: 90%;">
        <label for="start">Start date:</label>
        <input wire:model.live="start" type="date" id="start">
</div>

to trigger the creation of the chart even through the date picker does nothing - there's no date on the controller side. Without the trigger, I just get a blank canvas. Is that what the ->livewire() line is for? I guess I'm not sure what that does.

Does any of this help?