You can do

<div data-chart="<%= Jason.encode(@data) %>" phx-update="ignore" phx-hook="MyChart">
  <%# mount js chart inside here %>
</div>

The js hook will be called each time when data-chart is updated and phx-update="ignore" does not prevent the attribute from being updates, but probably only it’s children. So you can use the update callback of the js hook to update the chart with new data.

I’d strongly recommend to stick to svg for graphics. I’ve done some experiments with svgs in liveviews and it works quite well if you know how to handle svg. Only downside is that charts most often aren’t just the svg part, but also quite a lot of interaction like labels, tooltips and such things, which are imho not really a good fit for being handled by liveview, so a proper charting library might still be a good idea.

If you still want to go the route of creating the svg/interaction manually: I’ve tried out the technique of the start of this post with svelte.js – which works kinda similar to liveview, but on the client side. It allows you to add pure client side interactions, while still easily being able to receive updates to data from the liveview. There are some good examples for building charts with the low level pieces of d3 on the svelte website, but it can also do custom svg content.