Why does a Highcharts chart disappear after mounting the LiveView a second time?

I have a LiveView set up nicely with a chart (from Highcharts) showing some data. The chart is enclosed in a div with the phx-update="ignore" attribute which works great. However, moving away from the current LiveView and coming back to it makes the chart disappear.


<div phx-update="ignore" id="custom-chart">
    <figure id="main-chart" class="highcharts-figure">
        <div class="chart-container" id="<%= @chart_id %>"></div>
    <script id="main-chart-data">

When I initially visit the page, I see the chart as expected:

After I click on a live_patch or live_redirect link to go to a different page, and then click on the dashboard link again to come back to the dashboard page, I see this:

It shows back normally when I refresh the page.

Any ideas how this could be solved?

Thanks a lot.

1 Like

You didn’t show your javascript, which is the important factor here: You’ll need to initialize the chart in a liveview hook, as otherwise you’re initialization code won’t run again. live_patch and live_redirect don’t trigger new js evaluation as there’s no page change (similar to how spa/turbolinks solutions work as well)



You’ll need to initialize the chart in a liveview hook

That was the correct way to do it.

Thank you so much.