{"id":13531318,"url":"https://github.com/alixdehghani/echarts-for-angular","last_synced_at":"2025-04-01T19:32:00.072Z","repository":{"id":40330458,"uuid":"354531861","full_name":"alixdehghani/echarts-for-angular","owner":"alixdehghani","description":"Angular Directive for Apache ECharts","archived":false,"fork":false,"pushed_at":"2023-03-21T16:24:00.000Z","size":1425,"stargazers_count":12,"open_issues_count":9,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T15:09:00.920Z","etag":null,"topics":["angular","echarts"],"latest_commit_sha":null,"homepage":"https://alixdehghani.github.io/echarts-for-angular/","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/alixdehghani.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}},"created_at":"2021-04-04T11:59:14.000Z","updated_at":"2025-03-02T16:46:08.000Z","dependencies_parsed_at":"2024-06-19T04:07:54.282Z","dependency_job_id":"6b9651c8-e5cd-4abc-bfa8-88ece3a184ac","html_url":"https://github.com/alixdehghani/echarts-for-angular","commit_stats":{"total_commits":43,"total_committers":5,"mean_commits":8.6,"dds":0.4418604651162791,"last_synced_commit":"fda96077059f06527e73aab0d98a37d5ddee0336"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alixdehghani%2Fecharts-for-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alixdehghani%2Fecharts-for-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alixdehghani%2Fecharts-for-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alixdehghani%2Fecharts-for-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alixdehghani","download_url":"https://codeload.github.com/alixdehghani/echarts-for-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246700548,"owners_count":20819895,"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","echarts"],"created_at":"2024-08-01T07:01:02.004Z","updated_at":"2025-04-01T19:31:55.050Z","avatar_url":"https://github.com/alixdehghani.png","language":"TypeScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["Angular Component"],"readme":"# EchartsForAngular\n\nAngular directive for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts)\n(version \u003e= 5.x)\n\n- [Online Demo](https://stackblitz.com/edit/echarts-for-angular?file=src/app/bar-chart/bar-chart.component.ts)\n\n\n# Getting Started\n\n`echarts-for-angular` is an Angular (ver \u003e= 9.x) directive for ECharts (ver \u003e= 5.x).\n\n\n# Installation\n\n```bash\n# if you use npm\nnpm install echarts -S\nnpm install echarts-for-angular\n\n# or if you use yarn\nyarn add echarts\nyarn add echarts-for-angular\n```\n\n- If you need ECharts GL support, please install it first:\n\n```bash\n# if you use npm\nnpm install echarts-gl -S\n\n# or if you use yarn\nyarn add echarts-gl\n```\n\n\n# Usage\n\nPlease refer to the [demo](https://stackblitz.com/edit/echarts-for-angular?file=src/app/bar-chart/bar-chart.component.ts) page.\n\n1. Firstly, import `NgxEchartsModule` in your app module (or any other proper angular module):\n\n```typescript\nimport { EchartsxModule } from 'echarts-for-angular';\n\n   @NgModule({\n     imports: [EchartsxModule],\n   })\n   export class AppModule {} \n   ```\n   \n2. Then: use `echarts` directive in a div which has **pre-defined height**. (default width \u0026 height: 400px)\n\n - Simple example:\n\n     - html:\n\n     ```html\n     \u003cdiv echarts [options]=\"echartsOptions\" [extentions]=\"echartsExtentions\"\u003e\u003c/div\u003e\n     ```\n     \n\n      - component:\n\n     ```typescript\n     import { Component, OnInit } from \"@angular/core\";\n     import { BarChart } from \"echarts/charts\";\n     import { TooltipComponent, GridComponent, LegendComponent } from \"echarts/components\";\n\n     @Component({\n        selector: \"app-bar-chart\",\n        templateUrl: \"./bar-chart.component.html\",\n        styleUrls: [\"./bar-chart.component.css\"]\n     })\n     export class BarChartComponent implements OnInit {\n     readonly echartsExtentions: any[];\n     echartsOptions: object = {};\n\n     constructor() {\n        this.echartsExtentions = [BarChart, TooltipComponent, GridComponent, LegendComponent];\n     }\n\n     ngOnInit() {\n        this.echartsOptions = {\n            tooltip: {\n                trigger: \"axis\",\n                axisPointer: {\n                type: \"shadow\"\n                }\n            },\n            grid: {\n                left: \"3%\",\n                right: \"4%\",\n                bottom: \"8%\",\n                top: \"3%\",\n                containLabel: true\n            },\n            xAxis: {\n                 type: \"value\"\n            },\n            yAxis: {\n                type: \"category\",\n                data: [\"sat\", \"sun\", \"mon\", \"tue\", \"wed\", \"thu\", \"fri\"],\n                axisLabel: {\n                interval: 0,\n                rotate: 15\n                }\n            },\n            legend: {\n                data: [\"ali\", \"behrooz\"],\n                bottom: 0\n            },\n            series: [\n            {\n                name: \"ali\",\n                type: \"bar\",\n                data: [10, 15, 17, 4, 15, 31, 2]\n            },\n            {\n                name: \"behrooz\",\n                type: \"bar\",\n                data: [1, 17, 12, 11, 40, 3, 21]\n            }\n            ]\n        };\n    }\n    }\n    ```\n\n\n# API\n\n\n### Directive\n`echarts` directive support following input properties:\n\n| Input           | Type    | Default | Description                                                                                                                                                                                                                                                                                                             |\n| --------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `[options]`     | EChartsOption  | null    | The same as the options on the official demo site.   \n| `[extentions]`     | array  | null    | echarts extentions you need to create a chart.  \n| `[defaultWidth]`     | number  | 400    | if the html element that specifies for draw chart has no width the default width will be apply.  \n| `[defaultHeight]`     | number  | 400    | if the html element that specifies for draw chart has no height the default height will be apply. \n| `[theme]` | string \\| Object | \"\" |  Theme to be applied. This can be a configuring object of a theme, or a theme name registered through echarts.registerTheme. you can use dark for active dark theme \n| `[isResizable]`     | boolean  | true    | enable or disable auto resize function.  \n| `[periodicityInMiliSeconds]`     | number  | 2000    | time for recheck the chart size changes then resize method will be call.  \n\n### ECharts Instance\n\n`echartsInstance` is exposed in the `(chartInit)` event, enabling you to directly call functions like: `resize()`, `showLoading()`, etc. For example:\n\n- html:\n\n```html\n\u003cdiv echarts class=\"demo-chart\" [options]=\"chartOptions\" (chartInit)=\"onChartInit($event)\"\u003e\u003c/div\u003e\n```\n\n- component:\n\n```typescript\nonChartInit(ec) {\n  this.echartsInstance = ec;\n}\n\nresizeChart() {\n  if (this.echartsInstance) {\n    this.echartsInstance.resize();\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falixdehghani%2Fecharts-for-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falixdehghani%2Fecharts-for-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falixdehghani%2Fecharts-for-angular/lists"}