{"id":13406034,"url":"https://github.com/f5/unovis","last_synced_at":"2025-05-12T15:36:55.467Z","repository":{"id":64691892,"uuid":"561519546","full_name":"f5/unovis","owner":"f5","description":"Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript","archived":false,"fork":false,"pushed_at":"2025-05-07T14:07:04.000Z","size":28803,"stargazers_count":2452,"open_issues_count":64,"forks_count":53,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-12T04:38:21.855Z","etag":null,"topics":["angular","charts","data-visualization","graphs","maps","react","solid","svelte","vue"],"latest_commit_sha":null,"homepage":"https://unovis.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-03T21:44:20.000Z","updated_at":"2025-05-11T10:26:35.000Z","dependencies_parsed_at":"2022-12-13T05:47:40.290Z","dependency_job_id":"9f5b577a-b1f2-4c60-8a86-3f2340bcd63e","html_url":"https://github.com/f5/unovis","commit_stats":{"total_commits":508,"total_committers":14,"mean_commits":"36.285714285714285","dds":0.6476377952755905,"last_synced_commit":"2fc7e9684b72607a90e3c0214af56932659e8240"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5%2Funovis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5%2Funovis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5%2Funovis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5%2Funovis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f5","download_url":"https://codeload.github.com/f5/unovis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253766657,"owners_count":21960965,"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":["angular","charts","data-visualization","graphs","maps","react","solid","svelte","vue"],"created_at":"2024-07-30T19:02:19.106Z","updated_at":"2025-05-12T15:36:55.438Z","avatar_url":"https://github.com/f5.png","language":"TypeScript","readme":"https://user-images.githubusercontent.com/755708/205744216-5e9efd10-794b-4ce1-9aca-580c34fad193.mp4\n\n🟨  **Unovis** is a modular data visualization framework for React, Angular, Svelte, Vue, Solid and vanilla TypeScript or JavaScript:\n\n* 📈 🗺 It has charts, maps, network graphs, and more!\n* 🌳 Tree-shakable and supports individual component imports to reduce your bundle size;\n* 🎨 Highly customizable, thanks to the CSS-variables support.\n\nLearn more about _Unovis_ on [unovis.dev](https://unovis.dev)\n\n## Quick Start\nYou can install the core of the library `@unovis/ts` and framework-specific packages (if you use React, Angular, Svelte, Vue or Solid) from NPM:\n\n```bash\nnpm install -P @unovis/ts @unovis/\u003creact|angular|svelte|vue|solid\u003e\n```\n\nNow you can import components and create your first chart! Here's how to build a simple line chart uising Unovis and React:\n\n```tsx\nimport React, { useCallback } from 'react'\nimport { VisXYContainer, VisLine, VisAxis } from '@unovis/react'\n\ntype DataRecord = { x: number; y: number }\nconst data: DataRecord[] = [\n  { x: 0, y: 0 },\n  { x: 1, y: 2 },\n  { x: 2, y: 1 },\n]\n\nexport function BasicLineChart (): JSX.Element {\n  return (\n    \u003cVisXYContainer data={data}\u003e\n      \u003cVisLine\u003cDataRecord\u003e\n        x={useCallback(d =\u003e d.x, [])}\n        y={useCallback(d =\u003e d.y, [])}\n      \u003e\u003c/VisLine\u003e\n      \u003cVisAxis type=\"x\"\u003e\u003c/VisAxis\u003e\n      \u003cVisAxis type=\"y\"\u003e\u003c/VisAxis\u003e\n    \u003c/VisXYContainer\u003e\n  )\n}\n```\nLooking for Angular, Svelte, Vue, Solid or TypeScript examples? Check out the [Quick Start](https://unovis.dev/docs/quick-start) page on our website.\n\n## Examples and Documentation\n[![Unovis Examples](examples.png)](https://unovis.dev/gallery)\n\n📖 _Unovis_ has an extensive [documentation](https://unovis.dev/docs/intro) with code snippets for React, Angular,\nSvelte and TypeScript.\n\n🖼 Also there's a growing [gallery](https://unovis.dev/gallery) of examples, from where you can copy the code over to your project or try it live on StackBlitz.\n\n## Repository structure\n\n* `packages/ts` Core TypeScript package\n* `packages/angular` Angular components\n* `packages/react` React components\n* `packages/svelte` Svelte components\n* `packages/vue` Vue components\n* `packages/solid` Solid components\n* `packages/website` Website, docs and examples\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue\nfirst to discuss what you would like to change. For more information, please\nread [CONTRIBUTING](CONTRIBUTING.md).\n\n## Maintainers\n[\u003cimg alt=\"Nikita Rokotyan\" src=\"https://avatars.githubusercontent.com/u/755708\" width=\"80\"/\u003e](https://github.com/rokotyan)\n[\u003cimg alt=\"Qian Liu\" src=\"https://avatars.githubusercontent.com/u/5026041\" width=\"80\"/\u003e](https://github.com/lee00678)\n[\u003cimg alt=\"Surya Hanumandla\" src=\"https://avatars.githubusercontent.com/u/7765847\" width=\"80\"/\u003e](https://github.com/suryahanumandla)\n\n## Contributors\n[\u003cimg alt=\"Olga Stukova\" src=\"https://avatars.githubusercontent.com/u/8654114\" width=\"40\"/\u003e](https://github.com/stukova)\n[\u003cimg alt=\"Sumit Kumar\" src=\"https://avatars.githubusercontent.com/u/5867393\" width=\"40\"/\u003e](https://github.com/sumitkumar25)\n[\u003cimg alt=\"Gaurav Mukherjee\" src=\"https://avatars.githubusercontent.com/u/6323787\" width=\"40\"/\u003e](https://github.com/gmfun)\n[\u003cimg alt=\"Beverly Ackah\" src=\"https://avatars.githubusercontent.com/u/32556434\" width=\"40\"/\u003e](https://github.com/beverlyckh)\n[\u003cimg alt=\"Dmitriy Gutman\" src=\"https://avatars.githubusercontent.com/u/14595706\" width=\"40\"/\u003e](https://github.com/DimamoN)\n[\u003cimg alt=\"zernonia\" src=\"https://avatars.githubusercontent.com/u/59365435\" width=\"40\"/\u003e](https://github.com/zernonia)\n[\u003cimg alt=\"Yann イーベス Eves\" src=\"https://avatars.githubusercontent.com/u/1331877\" width=\"40\"/\u003e](https://github.com/yanneves)\n[\u003cimg alt=\"Michael\" src=\"https://avatars.githubusercontent.com/u/15652018\" width=\"40\"/\u003e](https://github.com/TasoOneAsia)\n[\u003cimg alt=\"Josh Larsen\" src=\"https://avatars.githubusercontent.com/u/2565382\" width=\"40\"/\u003e](https://github.com/joshlarsen)\n\n## License\n_Unovis_ is licensed under Apache-2.0\n","funding_links":[],"categories":["TypeScript","Third Party Components"],"sub_categories":["Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5%2Funovis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff5%2Funovis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5%2Funovis/lists"}