Highchart disappears after data update

I am trying to generate a highchart using livewire model. I have a datepicker input from which the user can select the date range of the chart. Initially the chart loads, but when I change the date range, the chart disappears.

I have used the redraw() and yAxis[0].isDirty = true methods of the hightcharts API, but it does not seem to work.

below is my render method.

public function render()
{
    return view('livewire.reserves', [
        'dates' => $this->getDates(),
        'chartData' => $this->getChartData(),
    ]);
}

Has anyone come across this issue?

When you save the form, livewire reloads the livewire component. Currently, you are probably only loading highchart when the doc is initially ready.

On your dateUpdate event of your date picker, emit an event like this in the livewire component:

$this->emitUp('datesUpdated');

or like this in your JavaScript:

<script>
    window.livewire.emit('datesUpdated')
</script>

And then in your javascript, add a listener for the event like:

<script>
window.livewire.on('datesUpdated' => {
    // Highchart init code goes here
});
</script>

This should load highchart on the newly updated component code. (https://laravel-livewire.com/docs/events)

1 Like

I think you should add wire:ignore on the datepicker input, to avoid livewire from interferring with javascript.

Thank you Ken. It worked.

Hi ken,

There is one more issue. Even the chart loads after changing the dates, the data in highchart does not update. I even try to echo data inside javascript code, but the data i get is previous data, However, if i echo the data outside the script tag, I get the updated data. Please note that I even emit the “datesUpdated” after querying the new data.

I’d need to see the section of your view file that handles this to understand what’s happening.