Switching between Pie and Line chart breaks rendering (labels or points missing)

[Ahmed-AbdElrahim-mobiadd]

Title

Bug: Switching between Pie and Line chart breaks rendering (labels or points missing)

---

Description

When switching between Pie and Line chart types dynamically in a Filament ApexChart widget, the charts do not render correctly depending on the default chart type:

• If the widget starts with default = pie → switching to line shows only points, and they don’t match properly.
• If the widget starts with default = line → switching to pie hides the labels completely.

This happens even when using a minimal setup.

---

Steps to Reproduce

1. Create a widget extending ApexChartWidget.

2. Add a filter (Select) to switch between chart types (pie, line).

3. Start with protected string $defaultChartType = 'pie';

   • Switch to line → line chart renders incorrectly (only points).

4. Start with protected string $defaultChartType = 'line';

   • Switch to pie → pie chart renders without labels.

---

Expected Behavior

• Switching from pie → line should render the line chart properly.
• Switching from line → pie should render the pie chart with labels.

---

Code Example

<?php

namespace App\Filament\Widgets;

use Filament\Forms\Components\Select;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class RevenuePerContentProviderChartTemp extends ApexChartWidget
{
    use HasFiltersSchema;

    protected static ?string $heading = 'Simple Chart (Line & Pie)';
    protected int|string|array $columnSpan = 'full';
    protected string $defaultChartType = 'pie';

    public function filtersSchema(Schema $schema): Schema
    {
        return $schema->components([
            Select::make('chartType')
                ->label('Chart Type')
                ->options([
                    'line' => 'Line Chart',
                    'pie'  => 'Pie Chart',
                ])
                ->default($this->defaultChartType),
        ]);
    }

    public function updatedInteractsWithSchemas(string $statePath): void
    {
        $this->updateOptions();
    }

    protected function getOptions(): array
    {
        $chartType = $this->filters['chartType'] ?? $this->defaultChartType;

        if ($chartType === 'pie') {
            return [
                'chart' => [
                    'type' => 'pie',
                    'height' => 400,
                ],
                'labels' => ['Provider A', 'Provider B', 'Provider C', 'Provider D', 'Provider E'],
                'series' => [1500, 1200, 900, 800, 600],
            ];
        }

        if ($chartType === 'line') {
            return [
                'chart' => [
                    'type' => 'line',
                    'height' => 400,
                ],
                'series' => [
                    ['name' => 'Provider A', 'data' => [200, 250, 300, 280, 320, 350, 400]],
                ],
                'xaxis' => [
                    'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                ],
            ];
        }

        return [];
    }
}

---

Video

https://www.awesomescreenshot.com/video/43366055?key=b551c78176f97b05bc6618268e459d08