{"id":14862249,"url":"https://github.com/zingchart/zingchart-angular","last_synced_at":"2025-04-12T02:40:40.776Z","repository":{"id":38461652,"uuid":"232274706","full_name":"zingchart/zingchart-angular","owner":"zingchart","description":"Quickly create dynamic JavaScript charts with ZingChart \u0026 Angular.","archived":false,"fork":false,"pushed_at":"2024-03-28T23:23:06.000Z","size":2561,"stargazers_count":2,"open_issues_count":8,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-25T22:15:12.558Z","etag":null,"topics":["angular","angular-charts","charts","zingchart"],"latest_commit_sha":null,"homepage":"https://www.zingchart.com/docs/integrations/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/zingchart.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":"2020-01-07T08:05:13.000Z","updated_at":"2024-09-05T17:01:45.000Z","dependencies_parsed_at":"2023-12-21T20:03:38.282Z","dependency_job_id":"0e34bb14-fa21-421d-9820-1b1c5c9f2948","html_url":"https://github.com/zingchart/zingchart-angular","commit_stats":{"total_commits":81,"total_committers":8,"mean_commits":10.125,"dds":0.617283950617284,"last_synced_commit":"c61aaddc9740eeb59fe9e0a86ffb85f8e8f9dd52"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/zingchart-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248328075,"owners_count":21085257,"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","angular-charts","charts","zingchart"],"created_at":"2024-09-19T20:01:33.119Z","updated_at":"2025-04-12T02:40:40.748Z","avatar_url":"https://github.com/zingchart.png","language":"TypeScript","readme":"![](https://img.shields.io/npm/v/zingchart-angular)\n![](https://github.com/zingchart/zingchart-angular/workflows/Build/badge.svg?branch=master)\n![](https://github.com/zingchart/zingchart-angular/workflows/Test/badge.svg?branch=master)\n![](https://img.shields.io/npm/dw/zingchart-angular)\n\n![](https://img.shields.io/david/zingchart/zingchart-angular)\n![](https://img.shields.io/david/peer/zingchart/zingchart-angular)\n![](https://img.shields.io/david/dev/zingchart/zingchart-angular)\n\n[![](https://d2ddoduugvun08.cloudfront.net/items/0h2Q3Y2l3E2T1n2V0O10/Screen%20Recording%202020-08-06%20at%2006.14%20PM.gif?X-CloudApp-Visitor-Id=3179966)](https://codesandbox.io/s/zingchart-angular-wrapper-example-jm7jb)\n\n## Quickstart Guide\n\nQuickly add charts to your Angular application with our ZingChart component\n\nThis guide assumes some basic working knowledge of Angular and its Object Oriented interface.\n\n## 1. Install\nInstall the `zingchart-angular` package via npm\n\n`npm install zingchart-angular`\n\n**Note:** If using the angular-cli to generate a project, you will need to use `npm install zingchart-angular --legacy-peer-deps`.\n**Note:** If using the Ivy compiler, add `“postinstall”:”ngcc”` to your `package.json`.\n\n## 2. Include the `zingchartAngular` module in your project\n\nYou can import the module in your module declaration file. This is typically `app.module.ts` for many hello world examples. \n\n\n```js\nimport { ZingchartAngularModule } from 'zingchart-angular';\n\n@NgModule({\n  imports: [\n    ...\n    ZingchartAngularModule,\n  ],\n})\n```\n\n## 3. Define ZingChart in your component\n\n### Default Use Case\n\nThe simple use case is defining a config (`ZingchartAngular.graphset`) object in your `.component.ts` file:\n\n \n```js\nimport { Component } from '@angular/core';\n\n@Component({\n  templateUrl: '...',\n})\n\nexport class AppComponent {\n  config: ZingchartAngular.graphset = {\n    type: 'line',\n    series: [{\n      values: [3,6,4,6,4,6,4,6]\n    }],\n  };\n}\n```\n\nThen add the `zingchart-angular` tag in your `.component.html` file to tie it all together!\n\n```html\n\u003czingchart-angular [config]=\"config\" [height]=\"500\"\u003e\u003c/zingchart-angular\u003e\n```\n\n### Import ZingChart Modules\n\nYou must **EXPLICITLY IMPORT MODULES AND ZINGCHART**. There is **NO** default\nexport objects so just import them.\n\n```js\nimport { Component } from '@angular/core';\n// EXPLICITLY IMPORT ZINGCHART AND MAPS MODULES from node_modules\nimport \"zingchart\";\nimport \"zingchart/modules-es6/zingchart-maps.min.js\";\nimport \"zingchart/modules-es6/zingchart-maps-usa.min.js\";\n\n@Component({\n  templateUrl: '...',\n})\n\nexport class AppComponent {\n  config: ZingchartAngular.graphset = {\n    shapes: [\n      {\n        type: \"zingchart.maps\",\n        options: {\n          name: \"usa\",\n          ignore: [\"AK\", \"HI\"]\n        }\n      }\n    ]\n  };\n}\n```\n\n### `zingchart` Global Objects\n\nIf you need access to the `window.zingchart` objects for licensing or development flags, import `zingchart` from `zingchart/es6`.\n\n```js\nimport { Component } from '@angular/core';\nimport zingchart from 'zingchart/es6';\n\n// zingchart object for performance flags\nzingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package\nzingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package \n\n// ZC object for license key\nzingchart.LICENSE = ['your_zingchart_license_key'];\n// for enterprise licensing\nzingchart.BUILDCODE = ['your_zingchart_license_buildcode'];\n\n@Component({\n  templateUrl: '...',\n})\n\nexport class AppComponent {\n  config: ZingchartAngular.graphset = {\n    type: 'line',\n    series: [{\n      values: [3,6,4,6,4,6,4,6]\n    }],\n  };\n}\n```\n\n## Parameters\n\n### config [object]\n\nThe chart configuration (graphset)\n\n```js\nconfig: ZingchartAngular.graphset = {\n  type: 'line',\n  series: [{\n    values: [3,6,4,6,4,6,4,6]\n  }],\n};\n```\n\n```html\n\u003czingchart-angular [config]=\"config\" [height]=\"500\"\u003e\u003c/zingchart-angular\u003e\n```\n\n### id [string] (optional)\n\nThe id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-angular-#\n\n### series [array] (optional)\n\nAccepts an array of series objects, and overrides a series if it was supplied into the config object. Varies by chart type used - **Refer to the [ZingChart documentation](https://zingchart.com/docs) for more details.**\n\n```js\nseries: ZingchartAngular.series = {\n  values: [3,6,4,6,4,6,4,6]\n}\nconfig: ZingchartAngular.graphset = {\n  type: 'line',\n};\n```\n\n```html\n\u003czingchart-angular [config]=\"config\" [height]=\"500\" [series] = \"[series]\"\u003e\u003c/zingchart-angular\u003e\n```\n\n### width [string or number] (optional)\nThe width of the chart. Defaults to 100%\n\n### height [string or number] (optional)\nThe height of the chart. Defaults to 480px.\n\n### output [string] (optional)\n\nThe render type of the chart. **The default is `svg`** but you can also pass the string `canvas` to render the charts in canvas. \n\n### theme [object] (optional)\nThe theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes\n\n## Events\n\nAll [zingchart events](https://www.zingchart.com/docs/api/events) are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:\n\n`.component.html` file:\n\n```html\n\u003czingchart-angular [config]=\"config\" [height]=\"300\" (node_click)=\"nodeClick($event)\"\u003e\u003c/zingchart-angular\u003e\n```\n\n`.component.ts` file:\n\n```js\nexport class AppComponent {\n  nodeClick(event: Event) {\n    console.log('zingchart node clicked test!', event);\n  }\n}\n```\n\nFor a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/api/events\n\n## Methods\n\nAll [zingchart methods](https://www.zingchart.com/docs/api/methods) are readily available on the component's instance to call. For example, to retrieve data from the chart:\n\n`.component.html` file:\n\n```html\n\u003czingchart-angular #chart1 [config]=\"config\"\u003e\u003c/zingchart-angular\u003e\u003c/zingchart-angular\u003e\n\n\u003cbutton (click)=\"getData(chart1)\"\u003eFetch Data\u003c/button\u003e\n```\n\n`.component.ts` file:\n```js\nimport { Component } from '@angular/core';\n\nexport class AppComponent {\n  ...\n  getData(chartContext: any) {\n    console.log('Fetching zingchart config object', chartContext.getdata());\n  }\n}\n```\n\nor alternatively you can use `ViewChild` to access the chart instead of passing a reference of it in the method.\n```html\n\u003czingchart-angular #chart1 [config]=\"config\"\u003e\u003c/zingchart-angular\u003e\u003c/zingchart-angular\u003e\n\n\u003cbutton (click)=\"getData()\"\u003eFetch Data\u003c/button\u003e\n```\n\n`.component.ts` file:\n```js\nimport { Component, ViewChild } from '@angular/core';\n\nexport class AppComponent {\n  @ViewChild('chart1') chart1: any;\n  ...\n  getData() {\n    console.log('Fetching zingchart config object', this.chart1.getdata());\n  }\n}\n```\n\nFor a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/api/methods\n\n## Working Example\n\nThis repository contains a \"Hello world\" example to give you an easy way to see the component in action. \n\nTo start the sample application:\n\n```\nnpm run start\n```","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-angular/lists"}