Charts do not update when data is updated #2414
Description
Flux version
v2.12 (pro)
Livewire version
v4.1.4
Tailwind version
v4.2
Browser and Operating System
Edge on Windows
What is the problem?
Charts do not update when underlying data is changed - see also #1182 which was previously fixed. Reopening as a new issue as requested by @joshhanley
In that issue, the problem was: "The issue is that there is a wire:ignore on the root chart element, so any changes to the value attribute aren't being applied by Livewire and hence not being picked up by Flux. We'll have to see if we can move the wire:ignore further down the tree, to enable this to work."
wire:ignore is definitely on the root chart element again. I have a temporary workaround of wire:key="{{ Str::random(10) }}" which means my chart will re-render when the date range is changed.
I've illustrated the issued in the code below where you can click change which updates the underlying data (changes the first term to 0) and you can see that is happening where the data is dumped below the chart.
Code snippets to replicate the problem
<?php
use Livewire\Component;
new class extends Component {
public array $data = [
['label' => 'Mon', 'revenue' => 1127],
['label' => 'Tue', 'revenue' => 249],
['label' => 'Wed', 'revenue' => 1365],
['label' => 'Thu', 'revenue' => 402],
['label' => 'Fri', 'revenue' => 690],
['label' => 'Sat', 'revenue' => 734],
['label' => 'Sun', 'revenue' => 828],
];
public array $data2 = [
['label' => 'Mon', 'revenue' => 0],
['label' => 'Tue', 'revenue' => 249],
['label' => 'Wed', 'revenue' => 1365],
['label' => 'Thu', 'revenue' => 402],
['label' => 'Fri', 'revenue' => 690],
['label' => 'Sat', 'revenue' => 734],
['label' => 'Sun', 'revenue' => 828],
];
public function change()
{
$this->data = $this->data2;
}
};
?>
<div class="border border-gray-200 rounded-lg">
<flux:button wire:click="change">Change</flux:button>
<flux:chart wire:model="data" class="w-full aspect-2/1">
<flux:chart.viewport class="size-full">
<flux:chart.svg>
<flux:chart.bar field="revenue" class="text-blue-500" radius="2 0" />
<flux:chart.axis axis="x" field="label" position="bottom">
<flux:chart.axis.tick />
<flux:chart.axis.line />
</flux:chart.axis>
<flux:chart.axis axis="y" position="left">
<flux:chart.axis.grid />
<flux:chart.axis.tick />
</flux:chart.axis>
<flux:chart.cursor class="text-zinc-800" type="area" stroke-dasharray="4 4" />
</flux:chart.svg>
<flux:chart.tooltip>
<flux:chart.tooltip.heading field="label" :format="['month' => 'long', 'day' => 'numeric']" />
<flux:chart.tooltip.value field="revenue" label="Revenue">
<flux:chart.legend.indicator class="bg-blue-500" />
</flux:chart.tooltip.value>
</flux:chart.tooltip>
</flux:chart.viewport>
</flux:chart>
{{ var_dump($data) }}
</div>
Screenshots/ screen recordings of the problem
Click the button in the component
How do you expect it to work?
Chart should update when the underlying data changes.
Please confirm (incomplete submissions will not be addressed)
- I have provided easy and step-by-step instructions to reproduce the bug.
- I have provided code samples as text and NOT images.
- I understand my bug report will be closed if I haven't met the criteria above.