Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
svelte-chartjs
Advanced tools
Changelog
Readme
Svelte wrapper for chart.js Open for PRs and contributions!
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.
<script>
import { Line } from 'svelte-chartjs'
</script>
<Line data={...} />
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 }}
/>
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.
v1:
import Line from 'svelte-chartjs/src/Line.svelte'
v2:
import { Line } from 'svelte-chartjs'
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)
Full Documentation and demo for v1 here
FAQs
Unknown package
The npm package svelte-chartjs receives a total of 37,402 weekly downloads. As such, svelte-chartjs popularity was classified as popular.
We found that svelte-chartjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.