{"id":18307929,"url":"https://github.com/froala/angular-froalacharts","last_synced_at":"2025-04-09T11:25:13.790Z","repository":{"id":56432717,"uuid":"290977945","full_name":"froala/angular-froalacharts","owner":"froala","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-08T09:46:46.000Z","size":6329,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T05:24:56.095Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/froala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-28T07:16:01.000Z","updated_at":"2021-11-19T05:06:09.000Z","dependencies_parsed_at":"2022-08-15T18:40:15.108Z","dependency_job_id":null,"html_url":"https://github.com/froala/angular-froalacharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangular-froalacharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangular-froalacharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangular-froalacharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangular-froalacharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/angular-froalacharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248029176,"owners_count":21035949,"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-11-05T16:05:56.496Z","updated_at":"2025-04-09T11:25:13.760Z","avatar_url":"https://github.com/froala.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-froalacharts\n\nSimple and lightweight official Angular component for FroalaCharts. `angular-froalacharts` enables you to add JavaScript charts in your Angular application without any hassle.\n\n- Github Repo: [https://github.com/froala/angular-froalacharts](https://github.com/froala/angular-froalacharts)\n- Documentation: [https://froala.com/charts/docs/frameworks/angular/](https://froala.com/charts/docs/frameworks/angular/)\n- Support: [support@froala.com](support@froala.com)\n- FroalaCharts\n  - Official Website: [https://www.froala.com/](https://www.froala.com/)\n  - Official NPM Package: [https://www.npmjs.com/package/froalacharts](https://www.npmjs.com/package/froalacharts)\n- Issues: [https://github.com/froala/angular-froalacharts/issues](https://github.com/froala/angular-froalacharts/issues)\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n- [Quick Start](#quick-start)\n- [For Contributors](#for-contributors)\n- [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- You've an **Angular** Application.\n- **FroalaCharts** installed in your project, as detailed below:\n\n### Installation\n\nTo install `angular-froalacharts` library, run:\n\n```bash\n$ npm install angular-froalacharts --save\n```\n\nTo install `froalacharts` library:\n\n```bash\n$ npm install froalacharts --save\n```\n\n## Quick Start\n\nHere is a basic sample that shows how to create a chart using `angular-froalacharts`:\n\nAdd this in your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import angular-froalacharts\nimport { FroalaChartsModule } from 'angular-froalacharts';\n\n// Import FroalaCharts library and chart modules\nimport * as FroalaCharts from 'froalacharts';;\n\nimport * as FroalaTheme from 'froalacharts/themes/froalacharts.theme.froala';\n\n// Pass the froalacharts library and chart modules\nFroalaChartsModule.fcRoot(FroalaCharts, FroalaTheme);\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    // Specify FroalaChartsModule as import\n    FroalaChartsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nOnce the library is imported, you can use its components, directives in your Angular application:\n\nIn your Angular AppComponent:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  dataSource: Object;\n  title: string;\n\n  constructor() {\n    this.title = 'Angular  FroalaCharts Sample';\n\n    this.dataSource = {\n      chart: {\n        caption: 'Countries With Most Oil Reserves [2017-18]',\n        subCaption: 'In MMbbl = One Million barrels',\n        xAxisName: 'Country',\n        yAxisName: 'Reserves (MMbbl)',\n        numberSuffix: 'K',\n        theme: 'froala'\n      },\n      data: [\n        { label: 'Venezuela', value: '290' },\n        { label: 'Saudi', value: '260' },\n        { label: 'Canada', value: '180' },\n        { label: 'Iran', value: '140' },\n        { label: 'Russia', value: '115' },\n        { label: 'UAE', value: '100' },\n        { label: 'US', value: '30' },\n        { label: 'China', value: '30' }\n      ]\n    };\n  }\n}\n```\n\n```xml\n\u003c!-- You can now use froalacharts component in app.component.html --\u003e\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\n\u003cfroalacharts\n    width=\"600\"\n    height=\"350\"\n    type=\"pie\"\n    dataFormat=\"JSON\"\n    [dataSource]=\"dataSource\"\n\u003e\u003c/froalacharts\u003e\n```\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/froala/angular-froalacharts.git\n$ cd angular-component\n$ npm i\n$ npm start\n```\n\n## Licensing\n\nThe FroalaCharts Angular component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a [separate license](https://www.ideracorp.com/Legal/Froala/FroalaChartsLicenseAgreement).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fangular-froalacharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fangular-froalacharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fangular-froalacharts/lists"}