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

Joined September 2023
Include

Only show posts containing:

Exclude

Hide posts containing:

Time range
-
Minimum likes
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..
1
14
670
LayerChart by @techniq35 is a collection of composable Svelte chart components & utilities 📊 - madewithsvelte.com/layerchar…
1
3
20
1,079
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).
1
5
58
3,245
Added Force Drag @LayerChart example that's fun to play with. layerchart.com/docs/examples…
2
12
639
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
6
3
25
1,708
🎉 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 👇
2
11
3
68
3,264
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).
Four developers, 86+ charts, tens of thousands of lines of code, and 1,151 Asana tasks - the numbers behind developing our new dashboard for @UNmigration 📊 Explore the dashboard: dtm.iom.int/online-interacti…
1
2
13
763
Replying to @LayerChart
@LayerChart has hit 500 stars 🤩
2
3
136
⚠️ 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 🫶
2
2
1
7
631
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).
1
2
10
559
🖌️ 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: layerchart.com/docs/componen… Later iterations will add support for radial, band scales, and more, but felt it was worth getting the common use cases supported first. See github.com/techniq/layerchar… for details. Let me know what you think!
1
2
6
572
"Intro to LayerChart" by @techniq35 from this year's Spring Svelte Summit is now also available on YouTube: youtu.be/DOH6I-kHSbk
3
1
1
1,461
📣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 (svelte-ux.techniq.dev/theme) 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 (discord.gg/697JhMPD3t). There are a ton of additional features planned for both libraries, and theme support is a major milestone towards their 1.0 releases.
4
1
29
1,529
🎉 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).
3
1
11
710
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. layerchart.com/docs/examples… ✔︎ Simplify overwriting x/y accessors for Area, AreaStack, and Spline. See third and fourth screenshots layerchart.com/docs/examples… ✔︎ Extracted Voronoi component from TooltipContext. Simplified TooltipContext and enables standalone usage. layerchart.com/docs/componen…
1
4
389
🎉 Geo Voronoi support and new GeoSpline/GeoEdgeFade components @LayerChart Voronoi now supports geo visualizations, using the wonderful github.com/Fil/d3-geo-vorono…. 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
1
2
352
Replying to @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. layerchart.com/docs/examples…
1
2
1
6
1,173
⭐New Calendar component added to @LayerChart Docs: layerchart.com/docs/componen…
2
1
3
514
I love how simple it was to highlight the active series using @LayerChart. Just 2 lines (see below👇)
1
2
2
397