{"_id":"@clarium/ngce-charts","_rev":"6-080b849fa0137a2b7d6927bef480c3d9","name":"@clarium/ngce-charts","dist-tags":{"latest":"0.0.1-beta"},"versions":{"0.0.1-beta":{"name":"@clarium/ngce-charts","version":"0.0.1-beta","keywords":["angular","components","UI","Angular Material","ngce","angular-library","frontend"],"license":"MIT","_id":"@clarium/ngce-charts@0.0.1-beta","maintainers":[{"name":"aruns1012","email":"arunkumars@clarium.tech"},{"name":"arunkumarravindran","email":"arunkumarravindrandev@outlook.com"}],"dist":{"shasum":"f94038d1bbca3e8db911d4aeb6c2bf4d2efb58f0","tarball":"https://registry.npmjs.org/@clarium/ngce-charts/-/ngce-charts-0.0.1-beta.tgz","fileCount":12,"integrity":"sha512-q/CjSGQCcGC3v7YbvpVck2MKd3m/TkYxcZUF4TBoSm16vGUR/qe4zyenB6GsVvZX7brvmUs+1ZA7LQPhTL/tyA==","signatures":[{"sig":"MEQCIB4vl3fgS9sSDeLEJs14VSdOLZvlAChNIFRQP827ltmdAiBSXRD8fryl70y01cJ9dL4yHFQu7qZJsLGcB65T+jOcqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30496},"module":"fesm2022/clarium-ngce-charts.mjs","exports":{".":{"esm":"./esm2022/clarium-ngce-charts.mjs","types":"./index.d.ts","default":"./fesm2022/clarium-ngce-charts.mjs","esm2022":"./esm2022/clarium-ngce-charts.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"0a70c677e6de092c64d6f5ffc4eb40eda972ef64","typings":"index.d.ts","_npmUser":{"name":"aruns1012","email":"arunkumars@clarium.tech"},"_npmVersion":"10.8.1","description":"A comprehensive set of Angular charts designed to accelerate UI development.","directories":{},"sideEffects":false,"_nodeVersion":"20.12.2","dependencies":{"tslib":"^2.3.0","chart.js":"^4.4.4"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=8.0.0 <=18.2.7","@angular/common":">=8.0.0 <=18.2.7"},"_npmOperationalInternal":{"tmp":"tmp/ngce-charts_0.0.1-beta_1728503495447_0.45020118828975386","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-10-09T19:51:35.300Z","modified":"2026-07-23T06:19:40.453Z","0.0.1-beta":"2024-10-09T19:51:35.637Z"},"license":"MIT","keywords":["angular","components","UI","Angular Material","ngce","angular-library","frontend"],"description":"A comprehensive set of Angular charts designed to accelerate UI development.","maintainers":[{"email":"arunkumars@clarium.tech","name":"aruns1012"},{"email":"arunkumarravindrandev@outlook.com","name":"arunkumarravindran"},{"email":"krishnavenikb@clarium.tech","name":"katikalakrishnaveni"},{"email":"fevinfm@clarium.tech","name":"fevinfm"},{"email":"kesavanm@clarium.tech","name":"kesavanmaniarasu"}],"readme":"\n# ngce-charts\n\n\n\n\n\n\n**ngce-charts** is an Angular library providing a variety of customizable chart components, helping you easily integrate beautiful, responsive charts into your applications. Built with simplicity and flexibility in mind, **ngce-charts** supports multiple chart types and configurations for different use cases.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n - [Basic Example](#basic-example)\n - [Customizing Charts](#customizing-charts)\n- [Documentation](#documentation)\n- [License](#license)\n\n## Features\n\n- Supports various chart types: bar, radar, line, pie, doughnut, and more.\n- Easy integration with Angular applications.\n- Full customization of chart data and options.\n- Responsive and adaptive to different screen sizes.\n- Compatible with Angular versions 8.0.0 to 18.2.0.\n- Follows best practices for performance and optimization.\n\n## Installation\n\nTo add **ngce-charts** to your Angular project, install it from npm. If this package is private, ensure you have the appropriate npm permissions.\n\n### Public Installation (if the package is public):\n\n```bash\nnpm install @clarium/ngce-charts --save\n```\n\n### Private Installation (if the package is private):\n\n```bash\nnpm install @clarium/ngce-charts --save\n```\n\nMake sure you have the required peer dependencies:\n\n```bash\nnpm install @angular/common @angular/core tslib --save\n```\n\n## Getting Started\n\nOnce installed, import the `NgceChartsModule` into your Angular module:\n\n```typescript\nimport { NgceChartsModule } from '@clarium/ngce-charts';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [\n BrowserModule,\n NgceChartsModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n## Usage\n\n### Basic Example\n\nHere’s a simple example of how to use a radar chart from **ngce-charts**:\n\nIn your HTML file:\n\n```html\n\n \n
\n```\n\nIn your TypeScript file:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgceComponentsModule } from '@clarium/ngce-components';\nimport { IChartConfiguration, NgceChartsModule } from '@clarium/ngce-charts';\n\n@Component({\n selector: 'app-chart',\n standalone: true,\n imports: [NgceComponentsModule, NgceChartsModule],\n templateUrl: './chart.component.html',\n styleUrl: './chart.component.css'\n})\nexport class ChartComponent {\n \n chartData = {\n labels: [\n 'Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries', 'Figs', \n 'Grapes', 'Honeydew', 'Kiwi', 'Lemons', 'Mangoes', 'Nectarines', \n 'Oranges', 'Papayas', 'Quinces', 'Raspberries', 'Strawberries', \n 'Tomatoes', 'Ugli fruit', 'Valencia oranges', 'Watermelon'\n ],\n datasets: [{\n label: 'Fruit Sales',\n data: [\n 30, 45, 15, 20, 25, 10, \n 35, 40, 5, 60, 22, 12, \n 50, 30, 20, 5, 8, \n 15, 25, 10, 18\n ],\n backgroundColor: [\n '#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFB833', '#33FFF5',\n '#FFC300', '#DAF7A6', '#581845', '#FF5733', '#C70039', '#900C3F',\n '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40',\n '#FF4500', '#FFD700', '#7FFF00'\n ],\n borderColor: '#FFFFFF',\n borderWidth: 1,\n borderRadius: 5,\n }]\n };\n \n chartOptions: IChartConfiguration['options'] = {\n animation: {\n duration: 500,\n },\n scales: {\n y: {\n beginAtZero: true,\n },\n }\n };\n}\n```\n\n### Customizing Charts\n\nYou can customize the charts extensively using the available input properties. For example, you can change the type of chart, modify data dynamically, and pass custom configuration options.\n\n```html\n\n \n
\n```\n\nIn your component:\n\n```typescript\nbarChartData = {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],\n datasets: [{\n label: 'Monthly Sales',\n data: [10, 25, 40, 30, 50, 70],\n backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],\n borderColor: '#000000',\n borderWidth: 1,\n }]\n};\n\nbarChartOptions: IChartConfiguration['options'] = {\n responsive: true,\n scales: {\n x: {\n beginAtZero: true,\n },\n y: {\n beginAtZero: true,\n },\n },\n};\n```\n\n## Documentation\n\nFor a comprehensive guide to using **ngce-charts**, including configuration options, chart types, and real-world examples, visit the [documentation](https://github.com/).\n\nIncluded chart types:\n\n- **BarChart**: A bar chart for comparing data points across categories.\n- **RadarChart**: A radar chart for visualizing data across multiple axes.\n- **LineChart**: A line chart for showing trends over time.\n- **PieChart**: A pie chart for displaying data as slices of a whole.\n- **DoughnutChart**: A doughnut chart, similar to a pie chart but with a hollow center.\n\nFor the full list of available chart components and detailed usage instructions, check out the [documentation](https://github.com/).\n\n## License\n\nThis library is licensed under the MIT License. See the [LICENSE](https://github.com/) file for more information.\n","readmeFilename":"README.md"}