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..
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 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
🎉 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 👇
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).
⚠️ 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 🫶
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).
🖌️ 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!
📣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.
🎉 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).
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
🎉 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
@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