ChartJS not refreshing after component refreshes

I want to refresh the Chart after emitting an event from another component. The data get's refreshed but ChartJs doesn't

so I'm emitting this event from another component

$this->emit('refreshComponent');

And on my parent component i'm passing the values from render method 'countPublished' => $countPublished, (this is the data for my Chart)

and on the same component, I'm trying to listen to an event and reset it. protected $listeners = ['refreshComponent' => '$refresh'];

Chart works fine on initial reload BTW.

i'm not sure what I'm missing

webrobert

4 years ago

Level 51

Without seeing your code. You have to send new data to chartjs script. As it’s not aware of the event.

Here is an example (this is using ploty but I'm sure charts has an update method)...

in the component ...

    public function updatedTimeRange()
    {
        $this->dispatchBrowserEvent('timeRangeUpdated', [
            'chartData' => $this->chartData(),
        ]);
    }

and in the Livewire blade...

        <script>
      window.addEventListener('timeRangeUpdated', event => {
            chart.update({
                series: [event.detail.chartData.series],
                labels: [event.detail.chartData.labels],
            });
       })
       </script>

Please or to participate in this conversation.