{"id":13406879,"url":"https://github.com/apertureless/vue-chartjs","last_synced_at":"2025-05-12T16:27:29.504Z","repository":{"id":37623053,"uuid":"61990007","full_name":"apertureless/vue-chartjs","owner":"apertureless","description":"📊  Vue.js wrapper for Chart.js","archived":false,"fork":false,"pushed_at":"2025-04-24T06:56:54.000Z","size":12660,"stargazers_count":5646,"open_issues_count":28,"forks_count":836,"subscribers_count":67,"default_branch":"main","last_synced_at":"2025-05-05T14:21:30.735Z","etag":null,"topics":["chart","charting-library","chartjs","diagram","diagrams","doughnut","pie","visualisation","vue","vue-component","vue3","vuejs","vuejs2","vuejs3"],"latest_commit_sha":null,"homepage":"https://vue-chartjs.org","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/apertureless.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"apertureless","ko_fi":"apertureless","custom":["paypal.me/apertureless"]}},"created_at":"2016-06-26T13:25:12.000Z","updated_at":"2025-04-29T23:26:30.000Z","dependencies_parsed_at":"2023-12-18T02:24:42.158Z","dependency_job_id":"5e543c2d-22e0-4434-b9cd-1a3bdadefc35","html_url":"https://github.com/apertureless/vue-chartjs","commit_stats":{"total_commits":676,"total_committers":104,"mean_commits":6.5,"dds":0.4704142011834319,"last_synced_commit":"8ca163b09631c9ac78846112f8478e70a2c0463d"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apertureless","download_url":"https://codeload.github.com/apertureless/vue-chartjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253775578,"owners_count":21962370,"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":["chart","charting-library","chartjs","diagram","diagrams","doughnut","pie","visualisation","vue","vue-component","vue3","vuejs","vuejs2","vuejs3"],"created_at":"2024-07-30T19:02:41.882Z","updated_at":"2025-05-12T16:27:29.459Z","avatar_url":"https://github.com/apertureless.png","language":"TypeScript","funding_links":["https://github.com/sponsors/apertureless","https://ko-fi.com/apertureless","paypal.me/apertureless","https://www.paypal.me/apertureless/50eur","https://ko-fi.com/C0C1WP7C","https://www.buymeacoffee.com/xcqjaytbl"],"categories":["TypeScript","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","图表","UI Components","Charts and Graphs","Charts"],"readme":"# vue-chartjs\n\n\u003cimg align=\"right\" width=\"150\" height=\"150\" alt=\"vue-chartjs logo\" src=\"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png\"\u003e\n\n**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.\n\nSupports Chart.js v4.\n\n[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)\n[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/apertureless/vue-chartjs/ci.yml?branch=main)](https://github.com/apertureless/vue-chartjs/actions)\n[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)\n[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)\n[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)\n[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)\n[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)\n[![Donate](https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/donate.svg)](https://www.paypal.me/apertureless/50eur)\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\n\u003cbr /\u003e\n\u003ca href=\"#quickstart\"\u003eQuickStart\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"#docs\"\u003eDocs\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://stackoverflow.com/questions/tagged/vue-chartjs\"\u003eStack Overflow\u003c/a\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\n## Quickstart\n\nInstall this library with peer dependencies:\n\n```bash\npnpm add vue-chartjs chart.js\n# or\nyarn add vue-chartjs chart.js\n# or\nnpm i vue-chartjs chart.js\n```\n\nThen, import and use individual components:\n\n```vue\n\u003ctemplate\u003e\n  \u003cBar :data=\"data\" :options=\"options\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport {\n  Chart as ChartJS,\n  Title,\n  Tooltip,\n  Legend,\n  BarElement,\n  CategoryScale,\n  LinearScale\n} from 'chart.js'\nimport { Bar } from 'vue-chartjs'\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)\n\nexport default {\n  name: 'App',\n  components: {\n    Bar\n  },\n  data() {\n    return {\n      data: {\n        labels: ['January', 'February', 'March'],\n        datasets: [{ data: [40, 20, 12] }]\n      },\n      options: {\n        responsive: true\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\u003chr /\u003e\n\nNeed an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-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-vue-chartjs)\n\n## Docs\n\n- [Reactivity](https://vue-chartjs.org/guide/#updating-charts)\n- [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance)\n- [Accessibility](https://vue-chartjs.org/guide/#accessibility)\n- [Migration from v4 to v5](https://vue-chartjs.org/migration-guides/#migration-from-v4-to-v5/)\n- [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/)\n- [API](https://vue-chartjs.org/api/)\n- [Examples](https://vue-chartjs.org/examples/)\n\n## Build Setup\n\n``` bash\n# install dependencies\npnpm install\n\n# build for production with minification\npnpm build\n\n# run unit tests\npnpm test:unit\n\n# run all tests\npnpm test\n```\n\n## Contributing\n\n1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## License\n\nThis software is distributed under [MIT license](LICENSE.txt).\n\n\u003ca href=\"https://www.buymeacoffee.com/xcqjaytbl\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapertureless%2Fvue-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-chartjs/lists"}