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

Phoenix Forum Questions / Help
, ,
1

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.

dashboard_live.html.leex:

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

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

Screen Shot 2020-04-20 at 12.00.57
Screen Shot 2020-04-20 at 12.00.57876Ă—487 14.2 KB

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:

Screen Shot 2020-04-20 at 11.59.05
Screen Shot 2020-04-20 at 11.59.05888Ă—487 3.39 KB

It shows back normally when I refresh the page.

Any ideas how this could be solved?

Thanks a lot.

1 Like
2

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)

4 Likes
3

Perfect!

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

That was the correct way to do it.

Thank you so much.