LayerChart retweeted
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..
LayerChart retweeted
LayerChart by @techniq35 is a collection of composable Svelte chart components & utilities 📊 - madewithsvelte.com/layerchar…
LayerChart retweeted
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).
LayerChart retweeted
Added Force Drag @LayerChart example that's fun to play with.
layerchart.com/docs/examples…
LayerChart retweeted
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
LayerChart retweeted
🎉 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 👇
LayerChart retweeted
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…
LayerChart retweeted
⚠️ 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 🫶
LayerChart retweeted
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).
LayerChart retweeted
🖌️ 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!
LayerChart retweeted
"Intro to LayerChart" by @techniq35 from this year's Spring Svelte Summit is now also available on YouTube: youtu.be/DOH6I-kHSbk
LayerChart retweeted
📣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.
LayerChart retweeted
🎉 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).
LayerChart retweeted
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…
LayerChart retweeted
🎉 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
LayerChart retweeted
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…
LayerChart retweeted
⭐New Calendar component added to @LayerChart
Docs: layerchart.com/docs/componen…
LayerChart retweeted
I love how simple it was to highlight the active series using @LayerChart. Just 2 lines (see below👇)



























