Multiple Charts with different Types inherit the last type

[LukasJK]

I have a livewire component, which loads up child components - each containing a chart:

<div>
    <div class="grid md:grid-cols-4 gap-4">
        <livewire:phoenix.pilot-profile.statistics.aircraft-type-chart :$profilePilotId />
        <livewire:phoenix.pilot-profile.statistics.route-type-chart :$profilePilotId />
        <livewire:phoenix.pilot-profile.statistics.daytime-stats :$profilePilotId />
        <livewire:phoenix.pilot-profile.statistics.daytime-landing :$profilePilotId />
    </div>

    <div class="grid md:grid-cols-2 gap-4">
        <livewire:phoenix.pilot-profile.statistics.flights-per-month-chart :$profilePilotId />
    </div>

</div>

The first 4 charts are doughnut, the last one is line. But when opening the page all charts are displaying as line charts.

Aircraft Type Blade:

<div class="card">
    <div class="card-header flex justify-between items-center">
        <h4 class="card-title">Aircraft Types</h4>
    </div>
    <div class="px-6 py-2 max-h-72">
        {!! $this->chart()->render() !!}
    </div>
</div>

AircraftTypeChart.php

class AircraftTypeChart extends Component
{
    public $datasets;
    public $profilePilotId;

    public function chart()
    {
        return Chartjs::build()
            ->name("AircraftTypeChart")
            ->livewire()
            ->model("datasets")
            ->type("doughnut")
            ->options([
                'responsive' => true,
                'borderWidth' => 0,
                'spacing' => 2,
                'layout' => [
                    'padding' => 0
                ],
                'plugins' => [
                    'legend' => [
                        'position' => 'bottom'
                    ]
                ]
            ]);
    }

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

        return view('livewire.phoenix.pilot-profile.statistics.aircraft-type-chart');
    }

    public function getData()
    {
          [Do the magic]
    }
}

Flight Per Month Blade

<div class="card">
    <div class="card-header flex justify-between items-center">
        <h4 class="card-title">Flights per Month</h4>
    </div>
    <div class="px-6 py-2 max-h-72">
        {!! $this->chart()->render() !!}
    </div>
</div>

FlightPerMonth Class

class FlightsPerMonthChart extends Component
{
    public $datasets;
    public $profilePilotId;

    public function chart()
    {
        return Chartjs::build()
            ->name("FlightsPerMonthChart")
            ->livewire()
            ->model("datasets")
            ->type("line")
            ->options([
                'responsive' => true,
                'borderWidth' => 0,
                'spacing' => 2,
                'layout' => [
                    'padding' => 0
                ],
                'plugins' => [
                    'legend' => [
                        'position' => 'bottom'
                    ]
                ]
            ]);
    }

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

        return view('livewire.phoenix.pilot-profile.statistics.flights-per-month-chart');
    }

    public function getData()
    {
        [Do the magic]
    }
}

Any thoughts?

[peterjthomson]

Hi @LukasJK I've merged the pull request that you commented on to get things unblocked. I then applied your suggested changes but they didn't quite work out of the box. Could you have a look at the commit here: 287fecb And see if that helps your situation? In my testing the latest commit should be allowing for multiple chart types (pie, chart, bar, etc) but it'd be good to know whether the proposed approach also works for your situation as well.

[Damesio]

Hey. Just to add feedback, I had the same issue and the changes applied on the 287fecb commit solved it.