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)
Flux version
v2.12 (pro)
Livewire version
v4.1.4
Tailwind version
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:ignoreis definitely on the root chart element again. I have a temporary workaround ofwire: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
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)