LayerChart

Large collection of visualization components and utilities for Svelte, built upon the wonderful Layer Cake framework

[Sean Lynch 🦋 @techniq.dev @techniq35]

Adding a <Marker> component for LayerChart, which has a lot of use cases (axis, geo path, annotation, etc), and is also part of a bigger feature coming soon..

[MadeWithSvelte @MadeWithSvelte]

LayerChart by @techniq35 is a collection of composable Svelte chart components & utilities 📊 - https://t.co/6RiHJ2eLGV

[Sean Lynch 🦋 @techniq.dev @techniq35]

Both LayerChart and Svelte UX docs are now running with Svelte 5, which are testaments to how well the @sveltejs maintainers focused on backwards compatibility 🫶

The plan for both libraries is to maintain Svelte 3-5 compatibility through their 1.x releases, but begin the migration to Svelte 5 and leverage runes, snippets, etc in 2.x.

I plan to start the migration *soon* once I wrap a few other priorities, and will deploy incremental `next` releases as progress is made.

Thanks again for all the hard work maintainers and contributors! @Rich_Harris @dummdidumm_ @trueadm @BenjaminMcCann @evilpingwin @PaoloRicciuti (sorry I couldn't find everyone on here).

[Sean Lynch 🦋 @techniq.dev @techniq35]

Added Force Drag @LayerChart example that's fun to play with.
https://t.co/A1gFg3tn6K

[Sean Lynch 🦋 @techniq.dev @techniq35]

LayerChart 0.54 released with some nice enhancements

🎨 BarChart color scale integration
⊞ New Grid component with improved band scale and radial support
↪ Simplified mark overrides for simplified charts, useful for adding gradients and motion
🗨️ Tooltip context binding for external access and data snapping improvements for band scales
🔧 Many small improvements and fixes

Keep reading for a few examples with screenshots and videos

[Sean Lynch 🦋 @techniq.dev @techniq35]

🎉 Massive LayerChart release

I am proud to announce the highly anticipated 0.50 release of @LayerChart!

Highlights:
✅ Simplified Charts (with series support)
✅ Improved and simplified radial support
✅ More versatile and less opinionated tooltips
✅ New color and x1/y1 scales
✅ Improved null handling
✅ Many more improvements and fixes

This will also provide the foundation of @shadcn-svelte's charts.

Keep reading for more details 👇

[Sean Lynch 🦋 @techniq.dev @techniq35]

I see some @LayerChart in the wild!

Not all the visualizations are created with LayerChart. I like their strategy of each team member owning and independently working to create each chart.

See below for a few charts I identified as being built with LayerChart (although most/all of these could have been if desired).

[Sean Lynch 🦋 @techniq.dev @techniq35]

@LayerChart has hit 500 stars 🤩

[Sean Lynch 🦋 @techniq.dev @techniq35]

⚠️ Much improved Typescript and A11y support in @SvelteUX and @LayerChart

A considerable effort was made to improve both projects Typescript and A11y support, with progress to continue (especially during the Svelte 5 migration).

Never again will either project pollute your console!

Running `svelte-check` as part of CI and having documented locations via `@ts-expect-error` and `svelte-ignore` helps enable incremental improvement.

I would appreciate any PRs to reduce these further 🫶

[Sean Lynch 🦋 @techniq.dev @techniq35]

Big LayerChart release 🎉

`0.37.0` brings 5️⃣big features, especially for Canvas and Geo visualizations

See examples in posts below 👇

→ Chart integrated `transform` context, which greatly simplifies setup (especially geo) and provides Canvas support!

→ Enhanced `Svg` and `Canvas` layout components with transform integration (<Chart transform={{ mode: 'canvas' }}>) and simplified Canvas scaling for components

→ Canvas path/shape events (tooltips!) via HitCanvas

→ Axis labels with configurable placement

→ Migration to pointer events (instead of mouse/touch) for better mobile interactions (tooltips, transform dragging).

[Sean Lynch 🦋 @techniq.dev @techniq35]

🖌️ Brush component

New brush component has been added to @LayerChart with the following features:

→ Single `x` or `y` axis or `both` for area scrubbing
→ Integrate in a single Chart, or use separate for easy scrubbing
→ Synchronize views simply using `bind:xDomain`
→ Works with tooltips
→ Customizable display via subcomponent classes, props (for gradients, etc), and slot overrides (add icons, etc)

Check out the examples: https://t.co/KtyI8HCq1i

Later iterations will add support for radial, band scales, and more, but felt it was worth getting the common use cases supported first. See https://t.co/wr9K6FrTDz for details.

Let me know what you think!

[Svelte Society 🧡 @SvelteSociety]

"Intro to LayerChart" by @techniq35 from this year's Spring Svelte Summit is now also available on YouTube: https://t.co/oqnmzacBqc

[Sean Lynch 🦋 @techniq.dev @techniq35]

📣Announcing @SvelteUX and @LayerChart theming along with improved Intl/locale support, and more!

The day is finally here... Svelte UX and LayerChart official releases have been published that include theme support via semantic and state classes, enabling light/dark mode (supporting multiple). I feel like this takes both of these libraries to another level!

See the theme page (https://t.co/hBKnbPCSdt) to browse a catalog of @SkeletonUI and @daisyui_ ported themes, or bring your own, including using the @tailwindcss palette.

The provided ThemeSwitch enables easy toggling and persisting of the current theme with SSR support, and ThemeSelect enables multiple light/dark selection. On the docs, press `Control+T` to quickly switch the default light and dark theme.

Date formatting and components (DateField, DatePickerField, DateRangeField) now support Intl./local support. We will continue to improve overall app support in future releases.

Lastly, `settings()` has been enhanced to enable defining common app-wide props such as `variant` and `labelPlacement` on Buttons and Fields.

There are a ton of additional fixes and improvements sprinkled in as well.

Shoutout to all the contributors helping with this release, with a special thanks to @jycouet and @dimfeld for their PRs on format(), settings(), and helping to dogfood the releases with great feedback.

Take a look and let me know what you think via comments or hop on our Discord (https://t.co/Xi88ftioHT).

There are a ton of additional features planned for both libraries, and theme support is a major milestone towards their 1.0 releases.

[Sean Lynch 🦋 @techniq.dev @techniq35]

🎉 Radial line/area charts

In the latest `0.60.3` release, @LayerChart's `Axis`, `Spline`, `Area`, and `Points` components have been updated with radial support. A few time-series and radar examples have been added to see how to leverage the new capability.

Also, Tooltips now use theming with `default` and `invert` variants, or use `none` and style to your heart's (or designer's) content (↓see below).

[Sean Lynch 🦋 @techniq.dev @techniq35]

Gradients make everything look better 😁

Small QoL release for @LayerChart (0.31.0)

✔︎ AreaStack added default slot to enable full customization of each Area, including wrapping in LinearGradient.
https://t.co/wYoV9zY3dd

✔︎ Simplify overwriting x/y accessors for Area, AreaStack, and Spline. See third and fourth screenshots
https://t.co/iSEreMTVfv

✔︎ Extracted Voronoi component from TooltipContext. Simplified TooltipContext and enables standalone usage.
https://t.co/kXYUjuNt7l

[Sean Lynch 🦋 @techniq.dev @techniq35]

🎉 Geo Voronoi support and new GeoSpline/GeoEdgeFade components

@LayerChart Voronoi now supports geo visualizations, using the wonderful https://t.co/DjKiAur9sL. This is especially helpful for adding tooltips to points, when using the geo path (such as a county/state/country) is not practical.

Also added `<GeoSpline>` and `<GeoEdgeFade>` to simplify creating links on geo visualizations

[LayerChart @LayerChart]

@techniq35 Recently added month labels

[Sean Lynch 🦋 @techniq.dev @techniq35]

@hshoff Using @LayerChart's components, similar can be done in ~30 lines (ignoring imports). Not an exact reproduction for sure, but I think I captured all the general ideas.

https://t.co/9Lj0feAZsW

[Sean Lynch 🦋 @techniq.dev @techniq35]

⭐New Calendar component added to @LayerChart

Docs: https://t.co/1Rw4SK4qPq