{"id":13702142,"url":"https://github.com/SauravKanchan/svelte-chartjs","last_synced_at":"2025-05-05T04:30:52.760Z","repository":{"id":37903377,"uuid":"265906246","full_name":"SauravKanchan/svelte-chartjs","owner":"SauravKanchan","description":"svelte wrapper for chart.js","archived":false,"fork":false,"pushed_at":"2025-04-30T22:39:57.000Z","size":1282,"stargazers_count":320,"open_issues_count":28,"forks_count":42,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-30T23:29:34.726Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://saurav.tech/mdbsvelte/?path=/story/charts--examples","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SauravKanchan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-21T17:07:08.000Z","updated_at":"2025-04-20T17:58:56.000Z","dependencies_parsed_at":"2023-02-17T14:45:30.952Z","dependency_job_id":"35cdf08f-62c6-4c2d-97df-13e8bd689137","html_url":"https://github.com/SauravKanchan/svelte-chartjs","commit_stats":{"total_commits":92,"total_committers":12,"mean_commits":7.666666666666667,"dds":0.7282608695652174,"last_synced_commit":"a088a1c28b7a028897e926e2e6f77481c7164769"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SauravKanchan%2Fsvelte-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SauravKanchan%2Fsvelte-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SauravKanchan%2Fsvelte-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SauravKanchan%2Fsvelte-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SauravKanchan","download_url":"https://codeload.github.com/SauravKanchan/svelte-chartjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251800994,"owners_count":21645966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T21:00:31.720Z","updated_at":"2025-05-05T04:30:50.310Z","avatar_url":"https://github.com/SauravKanchan.png","language":"TypeScript","funding_links":[],"categories":["Integrations"],"sub_categories":["JavaScript"],"readme":"# svelte-chartjs\n\n\u003cimg align=\"right\" width=\"150\" height=\"150\" alt=\"svelte-chartjs logo\" src=\"https://raw.githubusercontent.com/SauravKanchan/svelte-chartjs/master/assets/svelte-chartjs.png\"\u003e\n\nSvelte wrapper for [chart.js](https://www.chartjs.org/) Open for PRs and contributions!\n\n[![npm version](https://badge.fury.io/js/svelte-chartjs.svg)](https://badge.fury.io/js/svelte-chartjs)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FSauravKanchan%2Fsvelte-chartjs.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FSauravKanchan%2Fsvelte-chartjs?ref=badge_shield)\n![npm](https://img.shields.io/npm/dm/svelte-chartjs)\n\n\u003cbr /\u003e\n\u003ca href=\"#install\"\u003eInstall\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"#migration-from-v1-to-v2\"\u003eMigration guide\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://slack.cube.dev/?ref=eco-svelte-chartjs\"\u003eSlack\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://stackoverflow.com/questions/tagged/svelte-chartjs\"\u003eStack Overflow\u003c/a\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\n## Install\n\nInstall this library with peer dependencies:\n\n```bash\npnpm add svelte-chartjs chart.js\n# or\nyarn add svelte-chartjs chart.js\n# or\nnpm i svelte-chartjs chart.js\n```\n\n\u003chr /\u003e\n\nNeed an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-svelte-chartjs), an open-source API for data apps.\n\n\u003cbr /\u003e\n\n[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-svelte-chartjs)\n\n## Usage\n\n```svelte\n\u003cscript\u003e\n  import { Line } from 'svelte-chartjs'\n\u003c/script\u003e\n\n\u003cLine data={...} /\u003e\n```\n\n### Custom Size\n\nIn order for Chart.js to obey the custom size you need to set `maintainAspectRatio` to false, example:\n\n```svelte\n\u003cLine\n  data={data}\n  width={100}\n  height={50}\n  options={{ maintainAspectRatio: false }}\n/\u003e\n```\n\n## Migration from v1 to v2\n\nWith 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.\n\n### Change component import path\n\nv1:\n\n```javascript\nimport Line from 'svelte-chartjs/src/Line.svelte'\n```\n\nv2:\n\n```javascript\nimport { Line } from 'svelte-chartjs'\n```\n\n### Tree-shaking\n\nv2 of this library, [just like Chart.js v3](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation), is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.\n\nFor a list of all the available items to import, see [Chart.js docs](https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc).\n\nv1:\n\n```javascript\nimport Line from 'svelte-chartjs/src/Line.svelte'\n```\n\nv2 — lazy way:\n\n```javascript\nimport { Line } from 'svelte-chartjs'\nimport 'chart.js/auto';\n```\n\nv2 — tree-shakable way:\n\n```javascript\nimport { Line } from 'svelte-chartjs'\nimport { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale } from 'chart.js';\n\nChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);\n```\n\nUsing the \"lazy way\" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.\n\nPlease 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.\n\n```javascript\nimport { Pie } from 'svelte-chartjs';\nimport { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'\n\nChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)\n```\n\n## Examples\n\n- [Bar Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/bar)\n- [Bubble Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/bubble)\n- [Doughnut Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/doughnut)\n- [Line Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/line)\n- [Pie Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/pie)\n- [PolarArea Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/polar)\n- [Radar Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/radar)\n- [Scatter Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/scatter)\n- [ChartJS instance](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/ref)\n- [Events handling](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/events)\n\n## Docs for v1\n\nFull Documentation and demo for v1 [here](https://saurav.tech/mdbsvelte/?path=/story/charts--installation)\n## License\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FSauravKanchan%2Fsvelte-chartjs.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FSauravKanchan%2Fsvelte-chartjs?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSauravKanchan%2Fsvelte-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSauravKanchan%2Fsvelte-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSauravKanchan%2Fsvelte-chartjs/lists"}