search

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations
https://www.layerchart.com
MIT License
569 stars 11 forks source link

Canvas infinite loop issue (Svelte 3/4) #158

Open techniq opened 4 months ago

techniq commented 4 months ago

Creating this issue mostly to document, as this workaround has been used in the docs for a while.

There is a known Svelte 3/4 reactivity issue with $: as documented by LayerCake (see issue)

image

It also sounds like this is fixed in Svelte 5

For Svelte 3/4 (and until LayerCake updates to Svelte 5 / runes), the workaround is to use separate <Canvas> instances, for example:

<Chart geo={...}>
  <Canvas>
    <GeoPath geojson={states} class="stroke-surface-content" />
  </Canvas>

  <Canvas>
    <GeoPath geojson={counties} class="stroke-surface-content/20" />
  </Canvas>
</Chart>
mhkeller commented 4 months ago

It will be interesting to see what the best Svelte 5 pattern is for this.