Support for Charts

[sorasful]

Describe the feature

Just recently, Shacdn official has launched Charts : https://ui.shadcn.com/docs/components/chart

I was thinking we can keep this issue open to track when this'll be implemented. I'm not sure about the way the components are translated from Shacdn official to Svelte. Let me know if I can help.

[huntabyte]

I'm in contact with @techniq about how we can integrate layerchart in a composable way similar to the original with recharts.

It appears this issue will get us most of the way there:
techniq/layerchart#223

[techniq]

[0x090909]

UP UP UP Lets do it

[techniq]

Btw, using LayerChart with shadcn-svelte is already possible. See the integration issue (which will make it to the docs soon) as well as a simple example project. Mostly the integration is just mapping tailwind design tokens/colors (surface-* and primary) but everything can be overwritten, the tokens just streamline conventions.

Simplified Chart components is to simplify common use cases like AreaChart, BarChart, etc, but you can always leverage the full components and chart types within LayerChart (start with Chart, etc). These simplified chart components will also simplify non-shadcn svelte usage as well especially for data exploration, so it's a win-win.

Not sure when I'll get started on the effort, but I have a good idea of the approach and shouldn't take long, and we can continue to iterate.

[0x090909]

@techniq @huntabyte we want the templates that shadcn have on their page, they make the whole process 100x easier

[techniq]

@0x090909 speaking for @huntabyte, but the docs integration will be coming. Mostly exposing the same examples in LayerChart but with shadcn-svelte copy/paste.

[ddtamn]

Lets go, i will integrate with my app🙌

[masayahingpuno]

LFG!!!

[julien-blanchon]

I just want to give love ❤️

[itsmikesharescode]

any update with this ??

[0x090909]

updates?

[0x090909]

is there any possibility these charts will be realease in the near future? or we should use another chart library ?

let us know

[0x090909]

updates?=

[techniq]

Update: Sorry work/life has been rather busy (and not slowing down). I also just returned from a family vacation today, but I hope to resume work on the Simplified Charts PR this week 🤞.

While the end goal is to have copy/paste support for common chart types (Bar, Line, Area, etc) on the shadcn-svelte docs, 80% of this is already available with slightly longer form <Chart> usage and a few extra imports so if you don't want to be blocked now, I encourage you to start there in the interim. It's as simple as:

• Install a few dependencies: npm install layerchart d3-scale d3-array
  • Even after simplified charts is complete, layerchart will always be a required dependency (similar to recharts with shadcn/ui). If you stick to these simplified charts, you won't need d3-scale or d3-array added directly, but you might run across a chart type that doesn't have a simplified version, or you want more control, so it wouldn't hurt to have both of these d3 dependencies installed going forward.
• Update your tailwind.config.ts with surface-* colors used as default colors for some LayerChart components (LayerChart also uses primary which is already available in shadcn-svelte). See the example project as a reference

export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/layerchart/**/*.{svelte,js}"
  ],
  theme: {
    extend: {
      colors: {
        surface: {
          content: "hsl(var(--card-foreground) / <alpha-value>)",
          100: "hsl(var(--background) / <alpha-value>)",
          200: "hsl(var(---muted) / <alpha-value>)",
          // not sure what color maps here (should be darker than 200).  Could add a new color to `app.css`
          300: "hsl(var(--background) / <alpha-value>)"
        }
      }
    },
  },
};

• Find the chart type you would like to use, for example Area Chart, expand the code and click the copy button in the top right.
  
• Add the missing imports for the LayerChart components (ex. import { Chart, Svg, Axis, .... } from 'layerchart') and d3 usage (ex. import { scaleTime } from 'd3-scale). A lot of the examples also use Svelte UX's format for simplified number and date formatting with Intl support so you'll need to replace this with your own formatting solution. I plan to extract this functionality from Svelte UX to make it easier to use with LayerChart-only usage in the future.
• Profit!

I don't have a deadline for when the simplified charts PR and subsequent shadcn-svelte docs integration will be complete but it's at the top of my priority queue ATM. I work on open source mostly in the evenings as work and family schedule allows, but hopefully it won't be much longer. I also suggest monitoring the Simplified Charts PR for progress.

Have a great day!

[simsjack30]

@techniq you're an absolute machine. Thanks for working on this and keeping us updated

[RickRyan26]

So awesome! Thank you all

[sorasful]

@0x090909 just read 4 comments before yours.

[techniq]

Quick update:

I've been very busy cranking away on the new Simplified Charts, refined Tooltips, extracting a new suite of packages (@layerstack/*), and a few other goodies...

So far I've created simplified charts for BarChart, LineChart, AreaChart, and ScatterChart, and you can see the progress in the PR and preview docs

There are more use cases for these simplified components I want to think through and support, update more of the existing examples to these components (but trying to find the right balance as well), and add more of these chart types (PieChart, stack chart, radial charts, etc). See some of my thoughts in the original issue. The goal of the simplified charts is "streamlined opinionated base chart components with full extension capability" so anything you could have created with <Chart> can be accomplished with these components, with less props and imports. They basically providing you the 80% out of the box, but can still get to 100% using the same props and components you would use with Chart (in some ways you can think of them as Chart templates).

Some of the stack/group examples might have to wait until more Chart improvements are integrated (see also LayerCake's derivedScales PR). You can 100% create stacked, grouped, stacked and grouped, multi series, diverging, etc charts now (see all the existing examples), but I want to simplify both the implementation and the usage.

I'm contemplating updating LayerChart's Chart component to provide the full functionality of LayerCake's LayerCake chart component for a more integration opportunity and simplifications (I've worked around this so far with dedicated components and contexts like GeoContext, TooltipContext, and TransformContext, and even replaced the rendering layers (Svg, Canvas, Html) with LayerChart versions to provide this level of integration I couldn't obtain otherwise.

My work has been pretty crazy lately, and it's also soccer season so I'm always running one of my 3 kids to practices or games this time of year, but anytime I'm near my laptop I'm usually working on this (or thinking about it while exercising) 😁

In short, I'm very actively working on this, and good things will come to those who wait, but don't forget you don't need to wait on these, and migration will basically be changing <Chart> to <SomeChart> and removing a bunch of props/components/imports. I want to both have a strong initial offering once merged, but also plan subsequent iterations based on feedback (adding more simplified charts, etc).

Thanks for your patience 🫶

[itsmikesharescode]

nice!!!! layercharts!

[tkuchh]

@techniq thanks for the update! Take your time, spend time with your kids. The community really appreciates all the work, we are happy to wait since it'll definitely be worth it in the end.

[techniq]

Tomorrow...

[techniq]

CleanShot.2024-09-23.at.09.07.05.2.mp4

We are live!!!

I wrote up an overview of the massive 0.50.0 release on Twitter/X and would appreciate any social love (likes, reposts, etc) to increase reach.

I also submitted a talk proposal "What's new with LayerChart" for the fall Svelte Summit conference, and hopefully it gets accepted.

[cjlryan]

@techniq properly incredible stuff! Definitely implementing some of this right away! 🙌

[burggraf]

@huntabyte is this going to be rolled up into the shadcn-svelte chart component?

[jdgamble555]

One of the problems I see with adding packages like this is that they use stores instead of runes. These packages get almost too complex to rewrite with runes (although we see @huntabyte did it with svelte-shadcn!) While it can be compatible with Svelte 5, you will be giving up the speed and flexibility of runes. Svelte will eventually drop stores and these libraries (like superforms) will be left behind if they don't get rid of them.

It seems that svelte shad-cn is striving to be rune-only, so IMO spending time adding an outdated package (until it uses runes) would be counter productive. I personally would like all svelte-shadcn packages to be compatible with rune mode:

export default {
  compilerOptions: {
    runes: true
  }
};

I'm wondering why the charts was removed from @next?

#1341

J

[burggraf]

I'd prefer, personally, just a port of shadcn chart to shadcn-svelte.

[techniq]

@jdgamble555 Don't worry, LayerChart (and Svelte UX) will be migrated to Svelte 5 (runes, snippets) soon...

@burggraf shadcn/ui charts use Recharts to provide the chart component foundation (which is React only), and is what LayerChart is providing for Svelte. This is similar in nature to shadcn/ui using radix-ui and shadcn-svelte using bits-ui (albeit bits-ui is also written by @huntabyte because he's awesome like that). LayerChart also provides a broader range of visualization components compared to Recharts (cartesian/polar only), such as hierarchy, graph, force, and geo.

I've been supporting @huntabyte and @shyakadavis as they work on the shadcn-svelte integration / docs to make sure LayerChart has all the needed capability, but don't have the bandwidth to do much of this work myself (transitioning jobs this/next week and going hard on Svelte 5 migration soon).

We'll get this one over the finish line, but remember there is already integration with shadcn-svelte theming with LayerChart that many are already using.