Svelte Chartjs

svelte wrapper for chart.js

Demo Download

svelte-chartjs

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

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

Install

Install this library with peer dependencies:

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

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

Usage

<script>
  import { Line } from 'svelte-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 }}
/>

Migration from v1 to v2

With v2, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.

Change component import path

v1:

import Line from 'svelte-chartjs/src/Line.svelte'

v2:

import { Line } from 'svelte-chartjs'

Tree-shaking

v2 of this library, just like Chart.js v3, is tree-shakable. 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.

v1:

import Line from 'svelte-chartjs/src/Line.svelte'

v2 — lazy way:

import { Line } from 'svelte-chartjs'
import 'chart.js/auto';

v2 — tree-shakable way:

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

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

Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.

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 'svelte-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'

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

Examples

Docs for v1

Full Documentation and demo for v1 here

License

Top categories