{"id":43606900,"url":"https://github.com/dennisadriaans/angular-chrts","last_synced_at":"2026-02-05T19:00:43.891Z","repository":{"id":334778340,"uuid":"1142715780","full_name":"dennisadriaans/angular-chrts","owner":"dennisadriaans","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-05T06:13:12.000Z","size":820,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-05T18:39:52.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dennisadriaans.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-26T19:09:26.000Z","updated_at":"2026-02-05T12:15:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dennisadriaans/angular-chrts","commit_stats":null,"previous_names":["dennisadriaans/angular-chrts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dennisadriaans/angular-chrts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisadriaans%2Fangular-chrts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisadriaans%2Fangular-chrts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisadriaans%2Fangular-chrts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisadriaans%2Fangular-chrts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dennisadriaans","download_url":"https://codeload.github.com/dennisadriaans/angular-chrts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisadriaans%2Fangular-chrts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29130088,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T18:55:47.139Z","status":"ssl_error","status_checked_at":"2026-02-05T18:55:04.010Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2026-02-04T09:00:31.597Z","updated_at":"2026-02-05T19:00:43.882Z","avatar_url":"https://github.com/dennisadriaans.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Charts"],"readme":"# Angular Charts (`angular-chrts`)\n\n[![NPM Version](https://img.shields.io/npm/v/angular-chrts.svg)](https://www.npmjs.com/package/angular-chrts)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n**Angular Charts** is a high-performance, developer-friendly data visualization library for modern Angular applications. Based on [Unovis](https://unovis.dev/), it provides a suite of pre-built, Signals-powered components that make creating beautiful, responsive charts effortless.\n\n\n## 📖 Resources\n\n- [**Website**](https://nuxtcharts.com/)\n- [**Documentation**](https://nuxtcharts.com/docs)\n\n## Why Choose Angular Charts?\n\n- 🚀 **Performance First**: Built with Angular Signals for efficient, fine-grained reactivity.\n- 🎨 **Beautiful by Default**: Clean, modern design with easy customization via CSS variables.\n- 📦 **Declarative API**: Easy-to-use components that feel native to Angular.\n- 📊 **Versatile Data Visualization**: Support for Bar, Line, Area, Donut, Bubble, and Gantt charts.\n- 🛠 **Powered by Unovis**: Leverages the power of the battle-tested Unovis visualization framework for robust Angular charts.\n\n## Installation\n\nInstall the package via npm or pnpm:\n\n```bash\n# Using npm\nnpm install angular-chrts @unovis/angular @unovis/ts\n\n# Using pnpm\npnpm add angular-chrts @unovis/angular @unovis/ts\n```\n\n## Quick Start: Build your first Angular Chart\n\nSimply import the chart component you need and start visualizing your data.\n\n### 📊 Bar Chart Example\n\n```typescript\nimport { Component } from '@angular/core';\nimport { BarChartComponent } from 'angular-chrts';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [BarChartComponent],\n  template: `\n    \u003cngx-bar-chart\n      [data]=\"chartData\"\n      [categories]=\"categories\"\n      [height]=\"400\"\n      xLabel=\"Month\"\n      yLabel=\"Revenue ($)\"\n    /\u003e\n  `\n})\nexport class AppComponent {\n  chartData = [\n    { month: 'Jan', revenue: 4500 },\n    { month: 'Feb', revenue: 5200 },\n    { month: 'Mar', revenue: 4800 },\n  ];\n\n  categories = {\n    revenue: {\n      label: 'Monthly Revenue',\n      color: '#3b82f6'\n    }\n  };\n}\n```\n\n## Supported Chart Types\n\n| Chart Type | Key Features |\n| :--- | :--- |\n| **Line Chart** | Smooth curves, markers, multi-category support. |\n| **Bar Chart** | Grouped or stacked bars, horizontal/vertical orientation. |\n| **Area Chart** | Stacked or overlay areas, custom gradients. |\n| **Donut Chart** | Highly customizable central labels, legend integration. |\n| **Bubble Chart** | 3D data visualization with customizable point sizing. |\n| **Gantt Chart** | Specialized timeline visualization for project management. |\n\n## Customization \u0026 Styling\n\nAngular Charts icons support extensive styling through inputs and global CSS variables. You can easily control:\n- Colors and Gradients\n- Axis formatting and labels\n- Tooltip content and styling\n- Legend positioning (Top, Bottom, Left, Right)\n- \n\n## Development\n\nIf you want to contribute or build the project locally:\n\n```bash\n# Install dependencies\npnpm install\n\n# Start the example app\nng serve\n\n# Build the library\nng build lib\n```\n\n## Support\n\n\u003cdiv style=\"display: flex; align-items: center; gap: 20px;\"\u003e\n  \u003ca href=\"https://analogjs.org/\"\u003e\n    \u003cimg src=\"https://analogjs.org/img/logos/analog-logo.svg\" alt=\"Analog\" width=\"60\" height=\"60\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://spartan.ng/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/spartan-ng/spartan/main/spartan.svg\" alt=\"spartan logo\" width=\"90\" height=\"90\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## License\n\nMIT © [Dennis Adriaansen](https://github.com/dennisadriaansen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisadriaans%2Fangular-chrts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdennisadriaans%2Fangular-chrts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisadriaans%2Fangular-chrts/lists"}