The Hunt for the Perfect Svelte Charting Library: A Happy Ending!
Michael Amachree

Michael Amachree @dev_michael

About: Full-stack web developer specializing in Svelte, Nextjs, and Prisma. I focus on innovation, UI/UX, and open-source tools. Passionate about web tech, networking, and learning.

Location:
Wherever home is
Joined:
Mar 12, 2021

The Hunt for the Perfect Svelte Charting Library: A Happy Ending!

Publish Date: Sep 10 '24
15 6

Let me ask! Have you ever spent ages scouring the web for the perfect charting library, only to come up short? That was me today while working on my Svelte Mini Apps project. I wanted a library that was:

  • Easy to use: Seamless integration with Svelte 4 and 5 for a smooth development experience.
  • Feature-rich: Capable of creating a variety of charts to visualize your data beautifully.
  • Well-maintained: Actively developed with a supportive community.
  • Accessible: Supports accessibility standards to ensure your charts are usable by everyone.
  • Stable: Reliable and consistent performance, even in complex scenarios.

So, I embarked on a quest, diving deep into the world of Svelte charting libraries. I explored some popular options like Pancake, Svelte Frappe Charts, Layer Cake, Unovis Svelte, Svelte FusionCharts, and Svelte Heatmap. While Svelte Heatmap did work, it was limited in its capabilities and had some console errors that indicated it might soon become outdated. I encountered various issues with the other libraries, from compatibility problems to missing features, that hindered my ability to effectively visualize my data.

Frustration and a Glimmer of Hope

After hours of combing through Google, Reddit (which wasn't much help this time around ), blogs, and even madewithsvelte.com charts section, I started to feel a little discouraged. Maybe I'd have to build my own library, or worse, resort to some low-level SVG manipulation!

Just when all hope seemed lost, a ray of sunshine broke through the clouds! I stumbled upon a library in my browsing history – a hidden gem I'd encountered months ago. This could be it!

The Hero Emerges: LayerChart

With a hint of nervous anticipation, I revisited the library: LayerChart. And guess what? It worked flawlessly! LayerChart seamlessly integrated with Svelte, offering a wide range of chart types and a breeze-to-use API.

The Shocking Truth (and Why I'm Writing This)

Here's the truly surprising part: Despite being fantastic, LayerChart seemed to be under the radar. I couldn't find any articles or blog posts about it. I searched high and low, but there were none. That's why I felt compelled to write this – to shine a light on this amazing library and share my experience.

LayerChart isn't just a great charting library; it's also completely free and open-source! They even have a companion component library for Svelte called Svelte UX. Don't worry, I wasn't paid to say this (like I mentioned, it's entirely free and open-source). I simply admire the fantastic work put into this project and want to see it get the recognition it deserves.

So, the next time you're on the hunt for a Svelte charting library, don't overlook LayerChart! You might just find your happy ending, just like I did. Feel free to share your experiences with LayerChart (or any other Svelte charting library you love and use) in the comments below. Let's help each other out on this Svelte journey and build a stronger community of Svelte developers together. I'm eager to hear what you guys are using these days and learn from your experiences.

Cover Image Credit: Photo by Choong Deng Xiang on Unsplash

Comments 6 total

  • Musab
    MusabOct 20, 2024

    Hi, just wanted to say thanks for writing this piece - was looking for a svelte 4 / 5 charting tool. Found my way here and got the answer!

    • Michael Amachree
      Michael AmachreeOct 21, 2024

      You're welcome. Feel free to contribute to the project also. ✌️

  • rxliuli
    rxliuliFeb 27, 2025

    I also came across this article while searching for svelte charts. Unfortunately, layerchart@1.0 was just released and had some bugs, so I ultimately chose to use echarts and did a simple Svelte wrapper.

    • Sean Lynch
      Sean LynchMar 28, 2025

      Hey @rxliuli, curious what issues you ran into.

      We've had a few subsequent 1.x releases and currently working on a full Svelte 5 migration (not just Svelte 5 compat) which will include a ton of improvements, and be released as 2.0 (as well as 2.0.0-next.# releases)

      Anyways, ECharts is great, but if you ever decided to re-evaluate LayerChart and need some help, feel free to ask on the Discord or log a Github issue.

      • djKianoosh
        djKianooshJul 17, 2025

        @techniq, not the parent, but for us, one thing that's nice about echarts is that it doesn't come with tailwind. We have our own design system and theme, so bringing along tailwind doesn't make sense for us.

        • Sean Lynch
          Sean LynchJul 17, 2025

          @djkianoosh I have plans (and have been experimenting with approaches) to make Tailwind fully optional.

          There already exists global styles for all components you can target (.lc-* classes), and is actually how shadcn-svelte's styles their charts (which are powered by LayerChart) even though they use Tailwind as well. This means they do not load in the classes defined within LayerChart via @source but fully define their own.

          My plan is to be fully css variable driven (for defaults) but maintain the same level of integration with popular libraries including Svelte UX, Skeleton, shadcn-svelte, and Daisy UI.

          Stay tuned!

Add comment