{"id":13983051,"url":"https://github.com/cebor/angular-highcharts","last_synced_at":"2025-05-16T18:06:41.126Z","repository":{"id":38417400,"uuid":"55538143","full_name":"cebor/angular-highcharts","owner":"cebor","description":"Highcharts directive for Angular","archived":false,"fork":false,"pushed_at":"2024-02-09T16:42:51.000Z","size":3384,"stargazers_count":215,"open_issues_count":78,"forks_count":63,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-16T18:06:31.676Z","etag":null,"topics":["angular","chart","highcharts"],"latest_commit_sha":null,"homepage":"","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/cebor.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-05T19:12:32.000Z","updated_at":"2025-02-28T02:29:32.000Z","dependencies_parsed_at":"2024-01-22T18:12:44.199Z","dependency_job_id":"ddcef2ef-7328-49fd-997e-a147eb2634f4","html_url":"https://github.com/cebor/angular-highcharts","commit_stats":{"total_commits":519,"total_committers":18,"mean_commits":"28.833333333333332","dds":"0.18304431599229287","last_synced_commit":"13521c979d093d8d82990ef7dcf1a46c1fe6d16c"},"previous_names":[],"tags_count":174,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cebor%2Fangular-highcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cebor%2Fangular-highcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cebor%2Fangular-highcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cebor%2Fangular-highcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cebor","download_url":"https://codeload.github.com/cebor/angular-highcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582905,"owners_count":22095518,"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","chart","highcharts"],"created_at":"2024-08-09T05:01:36.666Z","updated_at":"2025-05-16T18:06:41.105Z","avatar_url":"https://github.com/cebor.png","language":"TypeScript","readme":"# angular-highcharts\n\n[![NPM version](https://img.shields.io/npm/v/angular-highcharts.svg)](https://npmjs.org/package/angular-highcharts)\n[![NPM downloads](https://img.shields.io/npm/dt/angular-highcharts.svg)](https://npmjs.org/package/angular-highcharts)\n![](https://github.com/cebor/angular-highcharts/workflows/Node.js%20Package/badge.svg)\n\nThis is a directive for an easy usage of [Highcharts](https://www.highcharts.com/) with angular.\n\n## Requirements\n\n```json\n{\n  \"angular\": \"^15.1.1\",\n  \"highcharts\": \"^10.3.3\"\n}\n```\n\n## Installation\n\n### yarn\n\n```bash\n# install angular-highcharts and highcharts\nyarn add angular-highcharts highcharts\n```\n\n### npm\n\n```bash\n# install angular-highcharts and highcharts\nnpm i --save angular-highcharts highcharts\n```\n\n## Usage Example\n\n```typescript\n// app.module.ts\nimport { ChartModule } from 'angular-highcharts';\n\n@NgModule({\n  imports: [\n    ChartModule // add ChartModule to your imports\n  ]\n})\nexport class AppModule {}\n```\n\n```typescript\n// chart.component.ts\nimport { Chart } from 'angular-highcharts';\n\n@Component({\n  template: `\n    \u003cbutton (click)=\"add()\"\u003eAdd Point!\u003c/button\u003e\n    \u003cdiv [chart]=\"chart\"\u003e\u003c/div\u003e\n  `\n})\nexport class ChartComponent {\n  chart = new Chart({\n    chart: {\n      type: 'line'\n    },\n    title: {\n      text: 'Linechart'\n    },\n    credits: {\n      enabled: false\n    },\n    series: [\n      {\n        name: 'Line 1',\n        data: [1, 2, 3]\n      }\n    ]\n  });\n\n  // add point to chart serie\n  add() {\n    this.chart.addPoint(Math.floor(Math.random() * 10));\n  }\n}\n```\n\n## API Docs\n\n### Chart\n\nThe Chart object.\n\nType: `class`\n\n#### Constructor\n\n```typescript\nnew Chart(options: Options)\n```\n\n#### Properties\n\n```typescript\nref: Highcharts.Chart;\n```\n\nDeprecated. Please use `ref$`.\n\n```typescript\nref$: Observable\u003cHighcharts.Chart\u003e\n```\n\nObservable that emits a Highcharts.Chart - [Official Chart API Docs](https://api.highcharts.com/class-reference/Highcharts.Chart)\n\n#### Methods\n\n```typescript\naddPoint(point: Point, [serieIndex: number = 0]): void\n```\n\nAdds a point to a serie\n\n```typescript\nremovePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): void\n```\n\nRemoves a point from a serie\n\n```typescript\naddSeries(series: ChartSerie): void\n```\n\nAdds a series to the chart\n\n```typescript\nremoveSeries(seriesIndex: number): void\n```\n\nRemove series from the chart\n\n### StockChart\n\nThe Chart object.\n\nType: `class`\n\n#### Constructor\n\n```typescript\nnew StockChart(options);\n```\n\n#### Properties\n\n```typescript\nref: Highstock.Chart;\n```\n\nDeprecated. Please use `ref$`.\n\n```typescript\nref$: Observable\u003cHighstock.Chart\u003e\n```\n\nObservable that emits a Highstock.Chart\n\n### MapChart\n\nThe Chart object.\n\nType: `class`\n\n#### Constructor\n\n```typescript\nnew MapChart(options);\n```\n\n#### Properties\n\n```typescript\nref;\n```\n\nDeprecated. Please use `ref$`.\n\n```typescript\nref$;\n```\n\nObservable that emits a Highmaps.Chart\n\n## Using Highcharts modules\n\nTo use Highcharts modules you have to import them and provide them in a factory (required for aot).\nYou can find the list of available modules in the highcharts folder `ls -la node_modules/highcharts/modules`.\n\n**Hint:** Highcharts-more is a exception, you find this module in the root folder.\nDon't forget to use the modules with the `.src` suffix, minimized highcharts modules are not importable.\n\n### Example\n\n```typescript\n// app.module.ts\nimport { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';\nimport * as more from 'highcharts/highcharts-more.src';\nimport * as exporting from 'highcharts/modules/exporting.src';\n\n@NgModule({\n  providers: [\n    { provide: HIGHCHARTS_MODULES, useFactory: () =\u003e [ more, exporting ] } // add as factory to your providers\n  ]\n})\nexport class AppModule { }\n```\n\n## Troubleshooting\n\n### Compile Issues\n\nIf you expiring typing errors while you build/serve your angular app the following could be helpful:\n\n```ts\n// override options type with \u003cany\u003e\nchart = new Chart({ options } as any);\n```\nThis is very useful when using `gauge chart` type.\n\n### Loading Highcharts Modules manually\n\nSee Official Highcharts Docs: http://www.highcharts.com/docs/getting-started/install-from-npm\n\n## Demo\n\n* [Demo](https://angular-9nkrgd.stackblitz.io)\n* [Code](https://stackblitz.com/edit/angular-9nkrgd)\n\n## License\n\nMIT © Felix Itzenplitz\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcebor%2Fangular-highcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcebor%2Fangular-highcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcebor%2Fangular-highcharts/lists"}