Welcome!
In this article, we'll be exploring 10 open-source Svelte chart libraries, which are great for data visualization.
Hopefully you'll find a useful charting library here for your use case!
Now, without further ado, let's dive in!
1. LayerChart
This is a collection of open-source chart components, and there's a great selection to choose from. It's a composable charting library built specifically for Svelte with a component-first approach. Ships with tons of pre-built chart types and interactions out of the box. It's honestly one of my faves.
Website: LayerChart Website
GitHub Repo: GitHub Repo
Features:
- Ships with tons of pre-built chart types
- Open-source
- Built specifically for Svelte
Here is an example of an area chart:
2. SveltePlot
This is an open-source Svelte-native data visualization library which allows you to quickly build charts using the library of components. It's super useful if you want to build custom charts etc.
There's a fantastic selection of examples and code snippets too to help you get started quickly.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Useful for building custom charts
- Open-source
- Lots of examples and code snippets
SveltePlot bar charts
Svelteplot Crosshair
Raster chart
3. Unovis
This is a modular data viz library with tree-shakable components - import only what you need. You can customize everything through CSS variables while keeping your bundle lightweight.
Website: Unovis Website
GitHub Repo: GitHub Repo
Features:
- Tree-shakable components
- Open-source
- Customize through CSS variables
- Supports Svelte
- Example gallery
Here's an example:
Circular charts
Stacked Bar Chart with Crosshair
Also, Get Lists Like These Each Week
💡 I put together lists like this pretty often and send them out weekly too, usually with a few extra finds + Svelte news/memes. If you're into that, it's here.
4. Svelte Chart.js
You may already know about Chart.js, but there's also a Svelte wrapper for this. The one I've linked below is a clean wrapper for Chart.js that preserves the original API. Perfect for quickly adding responsive charts without learning a new library.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Clean wrapper for Chart.js
- Open-source
- Lots of examples
Here are examples:
Even more examples:
Plus it supports dark-theme too 🌙:
5. Shadcn Svelte charts
Super good-looking, modern charts built with LayerChart and Shadcn. It's got pie charts, line charts, bar charts and many more. Plus it has smooth animations out-of-the-box. This is a stellar resource and fully free/open-source.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Built-in animations
- Excellent selection of themes
- Dark mode support
- Open-source
- Lots of examples
It also supports dark theme 🌙:
6. Svend3r
This is a data visualisation library that leverages D3 and brings cool charts to Svelte. Plus it's got lots of interesting examples like bubble charts and chord diagrams too. Definitely worth a look.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Interesting charts like bubble charts/chord diagrams
- Open-source
- Lots of cool examples in the demo website
7. Apache ECharts - Svelte wrapper
Apache ECharts is an open-source powerhouse with hundreds of chart types and a massive example gallery. But it also has a Svelte wrapper too, which makes it excellent for quickly adding charts to your Svelte project.
I would definitely recommend taking a look at the example gallery, there's so many charts to choose from! 🤯
Overall, this library is great for complex, interactive visualizations without tanking performance.
Website: Apache ECharts Website
GitHub Repo: Svelte.js Echarts GitHub Repo
Features:
- High-performance charts
- Huge example gallery
Doughnut chart
8. Svelte Charts
This is an excellent collection of code snippets for data viz and charting in Svelte.
Many of the examples are built with D3. If you're looking for a chart example, it's definitely worth taking a look here and browsing through the various demos available. Each of the demos features the code snippet too which could be useful for your project.
Website: Website
Features:
- Chart demos/examples built with D3
- You can also submit your own examples
9. Svelte Gantt
This is a zero-dependency Gantt chart library with drag-and-drop and customizable date ranges. It would be very useful for project management tools or scheduling interfaces. Fully open-source.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Lightweight and fully interactive
- Useful for scheduling tools/project management
- Open-source
- Excellent documentation
10. Svelteflow
This is a library for building node-based visual editors and flow charts with draggable nodes and connections.
It's also got a Svelte version too called SvelteFlow, and it's all open-source.
Website: Website
GitHub Repo: GitHub Repo
Features:
- Useful for building node-based flow charts/visual editors
- Svelte version available
- Open-source
I also share bookmarkable resources in my weekly Svelte newsletter here, featuring trending libraries and useful components. Plus Svelte news and memes :) You can subscribe here if you're into that.
Also, did I miss any resources? Let me know below.
Thanks for reading! Hopefully you've discovered some excellent chart libraries to choose from to help you build Svelte charts quickly.
Top comments (0)