svelte5-chartjs

Svelte 5 wrapper for chart.js Open for PRs and contributions!

This is a fork of the svelte-chartjs repo, which has been inactive for some time.

Install   •   Usage   •   Migration guide   •   Examples   •   Slack   •   Stack Overflow

---

Install

Install this library with peer dependencies:

pnpm add svelte5-chartjs chart.js
# or
yarn add svelte5-chartjs chart.js
# or
npm i svelte5-chartjs chart.js

---

Need an API to fetch data? Consider Cube, an open-source API for data apps.

Usage

<script>
  import { Line } from 'svelte5-chartjs'
</script>

<Line data={...} />

Custom Size

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false, example:

<Line
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>

Tree-shaking

This library is tree-shakable just like Chart.js v3. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

import { Line } from 'svelte5-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale } from 'chart.js';

ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);

Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.

import { Pie } from 'svelte5-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

Examples

• Bar Chart
• Bubble Chart
• Doughnut Chart
• Line Chart
• Pie Chart
• PolarArea Chart
• Radar Chart
• Scatter Chart
• ChartJS instance
• Events handling

Docs for v1

Full Documentation and demo for v1 here

License