{"id":23020958,"url":"https://github.com/jscharting/jscharting-angular","last_synced_at":"2026-04-26T23:31:56.909Z","repository":{"id":35046830,"uuid":"158261400","full_name":"jscharting/jscharting-angular","owner":"jscharting","description":"Official JSCharting Samples for Angular","archived":false,"fork":false,"pushed_at":"2023-01-07T02:35:47.000Z","size":789,"stargazers_count":1,"open_issues_count":27,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T18:52:30.744Z","etag":null,"topics":["angular","chart","jscharting"],"latest_commit_sha":null,"homepage":"","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/jscharting.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}},"created_at":"2018-11-19T17:01:11.000Z","updated_at":"2024-09-23T16:24:38.000Z","dependencies_parsed_at":"2022-09-16T01:35:40.094Z","dependency_job_id":null,"html_url":"https://github.com/jscharting/jscharting-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jscharting/jscharting-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jscharting","download_url":"https://codeload.github.com/jscharting/jscharting-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32317163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"ssl_error","status_checked_at":"2026-04-26T23:26:25.802Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","jscharting"],"created_at":"2024-12-15T12:15:58.944Z","updated_at":"2026-04-26T23:31:56.893Z","avatar_url":"https://github.com/jscharting.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSCharting: Any Chart. Anywhere.\n\n\u003ca href=\"https://jscharting.com\"\u003e\u003cimg src=\"https://jscharting.com/images/logo_short.svg\" style=\"margin:0px\" align=\"left\" hspace=\"10\" vspace=\"6\" width=\"200\" \u003e\u003c/a\u003e\n\n**JSCharting** is a JavaScript chart library for visualizing your data, providing resolution \nindependent results across all devices and platorms. Every JSCharting license includes the \nfull suite of 150+ advanced chart types, interactive stock charts and JSMapping at no additional charge.\n\n## Official JSCharting Samples for Angular\n\nThis set of samples demonstrate how to use JSCharting with the Angular framework. Samples are located in the `src/app/samples` folder.\n\n### How to use\n\nInstall the necessary packages including JSCharting.\n\n```console\nnpm install\n```\n\nRun the webpack dev server: http://localhost:4200/\n\n```console\nnpm run start\n```\n\nOr build the dashboard manually.\n\n```console\nnpm run build\n```\n\nOr.\n\n```console\nnpm run build-prod\n```\n\n### How it works\n\n1) In your component import Chart and create an instance.\n\n```typescript\nimport {Chart} from 'jscharting';\n\nthis.chart = new Chart({});\n```\n\n----\n\n2) In your app module, import the `JSChartingModule` module and add it to the `imports`:\n\n```typescript\nimport {JSChartingModule} from './jscharting/jscharting.module';\n\n@NgModule({\n\timports: [\n\tJSChartingModule\n\t]\n})\nexport class AppModule {}\n```\n\n----\n\n3) Inject the `JSChartingService` into your app component, create a '\u003cdiv\u003e' element with reference `chartTargetElement: ElementRef`.\n\n```typescript\nimport {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';\n\nimport {Chart} from './jscharting/jscharting';\nimport {JSChartingService} from './shared/jscharting.service';\n\n@Component({\n\ttemplate: '\u003cdiv\u003e\u003cdiv #chartTargetElement class=\"chart-container\"\u003e\u003c/div\u003e\u003c/div\u003e'\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n\t@ViewChild('chartTargetElement') chartTargetElement: ElementRef;\n\n\tprivate chart: Chart;\n\n\tconstructor(private chartService: JSChartingService) {\n\t}\n\n\tngAfterViewInit(): void {\n\t\tthis.chart = this.chartService.chart({\n\t\t\ttargetElement: this.chartTargetElement.nativeElement\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tif (this.chart) {\n\t\t\tthis.chart.destroy();\n\t\t}\n\t}\n```\n\nMake sure you destroy chart in `ngOnDestroy` method.\n\n----\n\n4) Rather than using `JSChartingService` you can instead use the `appJSCharting` directive:\n\n```typescript\nimport {Component, OnInit} from '@angular/core';\n\nimport {JSCChartConfig} from './jscharting/jscharting';\n\n@Component({\n\ttemplate: '\u003cdiv\u003e\u003cdiv appJSCharting [options]=\"chartOptions\" class=\"chart-container\"\u003e\u003c/div\u003e\u003c/div\u003e'\n})\nexport class AppComponent implements OnInit {\n\tpublic chartOptions = {\n\t\t...\n\t};\n\n\tngOnInit(): void {\n\t\t// You can update config.\n\t\tthis.chartOptions = {};\n\t}\n}\n```\n\nIt is easer to use `appJSCharting` directive than service or create chart directly.\n\n----\n\nPlease see full samples in the `src/app/samples` folder.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjscharting%2Fjscharting-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-angular/lists"}