{"id":13808265,"url":"https://github.com/apexcharts/ng-apexcharts","last_synced_at":"2025-05-14T12:10:38.997Z","repository":{"id":34348184,"uuid":"169650363","full_name":"apexcharts/ng-apexcharts","owner":"apexcharts","description":"ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.","archived":false,"fork":false,"pushed_at":"2025-03-19T09:12:31.000Z","size":5646,"stargazers_count":342,"open_issues_count":21,"forks_count":82,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-27T15:49:25.570Z","etag":null,"topics":["angular","apexcharts","charts","javascript","typescript","ui"],"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/apexcharts.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,"zenodo":null}},"created_at":"2019-02-07T22:08:07.000Z","updated_at":"2025-04-05T20:18:44.000Z","dependencies_parsed_at":"2024-03-17T02:30:29.704Z","dependency_job_id":"8e978f30-de87-4107-833e-3e1f8ad42791","html_url":"https://github.com/apexcharts/ng-apexcharts","commit_stats":{"total_commits":234,"total_committers":26,"mean_commits":9.0,"dds":"0.41880341880341876","last_synced_commit":"a4f6543db11a9a06be5e6fd9f9206127ce1d34be"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fng-apexcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fng-apexcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fng-apexcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Fng-apexcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apexcharts","download_url":"https://codeload.github.com/apexcharts/ng-apexcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252352339,"owners_count":21734149,"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","apexcharts","charts","javascript","typescript","ui"],"created_at":"2024-08-04T01:01:38.527Z","updated_at":"2025-05-14T12:10:38.931Z","avatar_url":"https://github.com/apexcharts.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Charts"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://apexcharts.com/media/ng-apexcharts.png\" height=\"150\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/apexcharts/ng-apexcharts/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-brightgreen.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng-apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ng-apexcharts.svg\" alt=\"ver\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=ng-ApexCharts%20An%20Angular%20Chart%20library%20built%20on%20ApexCharts.js\u0026url=https://www.apexcharts.com\u0026hashtags=javascript,charts,angular,apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAngular wrapper for \u003ca href=\"https://github.com/apexcharts/apexcharts.js\"\u003eApexCharts\u003c/a\u003e to build interactive visualizations in Angular 7+.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://apexcharts.com/angular-chart-demos/\"\u003e\u003cimg src=\"https://apexcharts.com/media/apexcharts-banner.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Examples\n\nMore than 80+ examples of all the chart types with sample codes can be found on the \u003ca href=\"https://apexcharts.com/angular-chart-demos/\"\u003eAngular Demos\u003c/a\u003e page of the website. Here's a basic \u003ca href=\"https://codesandbox.io/s/apx-line-basic-o2mwb\"\u003eline chart\u003c/a\u003e example built in codesandbox.\n\n## Download and Installation\n\nUse the Angular CLI's install [schematics](https://angular.io/guide/schematics) to set up ngx-apexcharts by running the following command:\n\n```bash\nng add ng-apexcharts\n```\n\nif you don't like the above way, the following is also supported.\n\n1. Install using npm:\n\n```ts\nnpm install apexcharts ng-apexcharts --save\n```\n\n2. Open angular.json and under scripts add:\n\n```ts\n\"scripts\": [\n  \"node_modules/apexcharts/dist/apexcharts.min.js\"\n]\n```\n\n3. Add ng-apexcharts-module to imports\n\n```ts\nimport { NgApexchartsModule } from \"ng-apexcharts\";\n\n...\n\nimports: [\n  BrowserModule,\n  FormsModule,\n  ReactiveFormsModule,\n  NgApexchartsModule,\n  ...\n]\n```\n\n## Usage\n\nIn any component you can use the chart using:\n\n```html\n\u003capx-chart [series]=\"series\" [chart]=\"chart\" [title]=\"title\"\u003e\u003c/apx-chart\u003e\n```\n\nYou need to provide at least the series and chart attribute to make sure the\nchart can get created.\n\nYou can also use any other attribute from the following options.\n\n### Options\n\nAll options of the chart can be inserted using the attributes.\nThis is a list of all available attributes:\n\n```ts\n@Input() chart: ApexChart;\n@Input() annotations: ApexAnnotations;\n@Input() colors: string[];\n@Input() dataLabels: ApexDataLabels;\n@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;\n@Input() stroke: ApexStroke;\n@Input() labels: string[];\n@Input() legend: ApexLegend;\n@Input() fill: ApexFill;\n@Input() tooltip: ApexTooltip;\n@Input() plotOptions: ApexPlotOptions;\n@Input() responsive: ApexResponsive[];\n@Input() xaxis: ApexXAxis;\n@Input() yaxis: ApexYAxis | ApexYAxis[];\n@Input() grid: ApexGrid;\n@Input() states: ApexStates;\n@Input() title: ApexTitleSubtitle;\n@Input() subtitle: ApexTitleSubtitle;\n@Input() theme: ApexTheme;\n@Output() chartReady;\n```\n\nYou can visit the [docs](https://apexcharts.com/docs/) to read more about all the options listed above.\n\n### Updating the chart\n\nChanging the attributes will automatically call the relevant update methods of ApexCharts and re-render it.\n\n### Calling core ApexCharts methods\n\nYou don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. But, in certain cases you may need to call these methods, so here's the reference.\n\n| Method                                                                                   | Description                                                                                        |\n| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#updateSeries\"\u003eupdateSeries\u003c/a\u003e             | Allows you to update the series array overriding the existing one                                  |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#updateOptions\"\u003eupdateOptions\u003c/a\u003e           | Allows you to update the configuration object                                                      |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#toggleSeries\"\u003etoggleSeries\u003c/a\u003e             | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#appendData\"\u003eappendData\u003c/a\u003e                 | Allows you to append new data to the series array.                                                 |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addtext\"\u003eaddText\u003c/a\u003e                       | The addText() method can be used to draw text after chart is rendered.                             |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addxaxisannotation\"\u003eaddXaxisAnnotation\u003c/a\u003e | Draw x-axis annotations after chart is rendered.                                                   |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addyaxisannotation\"\u003eaddYaxisAnnotation\u003c/a\u003e | Draw y-axis annotations after chart is rendered.                                                   |\n| \u003ca href=\"https://apexcharts.com/docs/methods/#addpointannotation\"\u003eaddPointAnnotation\u003c/a\u003e | Draw point (xy) annotations after chart is rendered.                                               |\n\nAll the methods are proxied through the component so that you dont need to access the DOM by yourself.\n\nJust reference the component as a ViewChild in your Component by using:\n\n```ts\n@ViewChild('chartObj') chart: ChartComponent;\n```\n\nand changing the template to this:\n\n```html\n\u003capx-chart #chartObj\u003e\u003c/apx-chart\u003e\n```\n\nNow you're able to call methods from your Component.\n\n```javascript\nthis.chart.toggleSeries(\"series-1\");\n```\n\n## How to call the methods of ApexCharts without referencing the chart component?\n\nSometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on `this.$apexcharts` global variable directly. You need to target the chart by \u003ccode\u003echart.id\u003c/code\u003e while calling this method\n\nExample\n\n```js\nwindow.ApexCharts.exec(\"ng-chart-example\", \"updateSeries\", [\n  {\n    data: [40, 55, 65, 11, 23, 44, 54, 33],\n  },\n]);\n```\n\nIn the above method, `ng-chart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update.\n\nMore info on the `.exec()` method can be found \u003ca href=\"https://apexcharts.com/docs/methods/#exec\"\u003ehere\u003c/a\u003e\n\nAll other methods of ApexCharts can be called the same way.\n\n#### Turning off auto update of the series\n\nWith the attribute `autoUpdateSeries` you can control if the chart component should call the `updateSeries` function automatically if the series attribute is changed. It is set to true by default, but in a mixed/combo chart, set this attribute to false if you are using and changing the type property in your series. This only has the effect that the whole chart rerenders even if only the series changes.\n\n## License\n\nng-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.\n\n### Submitted by\n\nSpecial thanks to [Morris Janatzek](http://morrisj.net) for contributing to ApexCharts project by creating this angular wrapper.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Fng-apexcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapexcharts%2Fng-apexcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Fng-apexcharts/lists"}