{"id":15093325,"url":"https://github.com/eshwarrachala/angular-d3","last_synced_at":"2026-01-05T07:08:31.378Z","repository":{"id":57157671,"uuid":"89891684","full_name":"EshwarRachala/angular-d3","owner":"EshwarRachala","description":null,"archived":false,"fork":false,"pushed_at":"2017-06-06T04:39:36.000Z","size":1461,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-02-28T23:11:28.976Z","etag":null,"topics":["angular","angular2-service","nvd3"],"latest_commit_sha":null,"homepage":null,"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/EshwarRachala.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":"2017-05-01T02:31:01.000Z","updated_at":"2017-05-25T04:58:08.000Z","dependencies_parsed_at":"2022-09-07T20:33:46.885Z","dependency_job_id":null,"html_url":"https://github.com/EshwarRachala/angular-d3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EshwarRachala%2Fangular-d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EshwarRachala%2Fangular-d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EshwarRachala%2Fangular-d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EshwarRachala%2Fangular-d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EshwarRachala","download_url":"https://codeload.github.com/EshwarRachala/angular-d3/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244959389,"owners_count":20538625,"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","angular2-service","nvd3"],"created_at":"2024-09-25T11:21:23.023Z","updated_at":"2026-01-05T07:08:31.341Z","avatar_url":"https://github.com/EshwarRachala.png","language":"TypeScript","readme":"# ngnvd3\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngnvd3 --save\n```\n\n## nvd3 examples \nhttp://ngnvd3.surge.sh/\n\n## Examples Repo\nReference `https://github.com/EshwarRachala/angular-d3-demo` for examples.\n\n## Consuming the library\n\nImport the library in any Angular application by running:\n\n```bash\n$ npm install ngnvd3\n```\nand then from your Angular `AppModule` inject Chartservice and import chartmodule\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { ChartModule,ChartService } from 'ngnvd3';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ChartModule\n  ],\n  providers: [ChartService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n\n## To use angular ChartsService\n\n```typescript\nimport { ChartService, NV, D3 } from 'ngnvd3';\n\n@Component({\n  selector: 'app-chart',\n  template: `\u003cdiv class=\"gallery with-transitions\" id=\"chart1\"\u003e\n                \u003csvg height=\"500\"\u003e\u003c/svg\u003e\n             \u003c/div\u003e`\n})\n\nexport class ChartComponent implements OnInit, OnChanges {\n    private nv: NV;\n    private d3: D3;\n    private data: any; // provide data for the chart \n    chart: nv.BoxPlotChart; \n\n    constructor(private service: ChartService) {\n         this.nv = service.getnvD3();\n        this.d3 = service.getD3();\n     }\n\n    ngOnInit() {\n        this.createChart();\n        if (this.data) {\n            this.updateChart();\n        }\n    }\n\n    ngOnChanges() {\n        if (this.chart) {\n            this.updateChart();\n        }\n    }\n\n    createChart() {\n    this.chart = nv.models.boxPlotChart()\n            .x(function (d) { return d.label })\n            .staggerLabels(true)\n            .maxBoxWidth(75)\n            .yDomain([0, 500]);\n    }\n\n    updateChart() {\n      d3.select('#boxplot svg')\n            .datum(this.data)\n            .transition()\n            .duration(350)\n            .call(this.chart);\n\n      nv.utils.windowResize(this.chart.update);\n  }\n}\n\n```\n\n## To use Chart components directly\n\n```typescript\n\nimport { ChartConfig } from 'ngnvd3';\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-demo',\n  template: `\u003cbutton (click)=\"click($event)\"\u003esubmit\u003c/button\u003e\n                \u003chmb-chart *ngIf=\"config\" [(config)]=\"config\"\u003e\u003c/hmb-chart\u003e`\n})\nexport class DemoComponent {\n  public config: ChartConfig = \u003cChartConfig\u003e{};\n\n  constructor() {\n    this.getconfig();\n  }\n\n  getconfig() {\n    this.config = \u003cChartConfig\u003e{};\n    this.config.margin = { left: 100 };\n    this.config.height = 500;\n    this.config.data = [\n      {\n        'key': 'Series 1',\n        'color': '#d67777',\n        'values': [\n          {\n            'label': 'Group A',\n            'value': 1.8746444827653\n          },\n          {\n            'label': 'Group B',\n            'value': 8.0961543492239\n          }\n        ]\n      }\n    ];\n  }\n\n  click(event) {\n    this.getconfig();\n    this.config.height = 600;\n    event.preventDefault();\n  }\n}\n```\n\n## Available charts\n\n```typescript\n\n        \u003cboxplot-chart [config]=\"config\"\u003e\u003c/boxplot-chart\u003e\n        \u003ccandlestick-chart [config]=\"config\"\u003e\u003c/candlestick-chart\u003e\n        \u003ccumulativeline-chart [config]=\"config\"\u003e\u003c/cumulativeline-chart\u003e\n        \u003cdoughnut-chart [config]=\"config\"\u003e\u003c/doughnut-chart\u003e\n        \u003chmb-chart [config]=\"config\"\u003e\u003c/hmb-chart\u003e\n        \u003clinebar-chart [config]=\"config\"\u003e\u003c/linebar-chart\u003e\n        \u003clineview-chart [config]=\"config\"\u003e\u003c/lineview-chart\u003e\n        \u003cohlc-chart [config]=\"config\"\u003e\u003c/ohlc-chart\u003e\n        \u003cpie-chart [config]=\"config\"\u003e\u003c/pie-chart\u003e\n        \u003cscatteredbubble-chart [config]=\"config\"\u003e\u003c/scatteredbubble-chart\u003e\n        \u003csimpleline-chart [config]=\"config\"\u003e\u003c/simpleline-chart\u003e\n        \u003cstackedarea-chart [config]=\"config\"\u003e\u003c/stackedarea-chart\u003e\n        \u003csunburst-chart [config]=\"config\"\u003e\u003c/sunburst-chart\u003e\n        \u003cdiscretebar-chart [config]=\"config\"\u003e\u003c/discretebar-chart\u003e\n        \u003cvmb-chart [config]=\"config\"\u003e\u003c/vmb-chart\u003e\n\n```\n\n## Development\n\nTo generate all `*.js`, `*.d.ts` and `*.metadata.json` files:\n\n```bash\n$ npm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\n$ npm run lint\n```\n\n## Further help\n\nhttp://nvd3.org/index.html\n\n## License\n\nMIT © [eshwar rachala](mailto:eshwar.appdev@gmail.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feshwarrachala%2Fangular-d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feshwarrachala%2Fangular-d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feshwarrachala%2Fangular-d3/lists"}