{"id":13480841,"url":"https://github.com/krispo/ng2-nvd3","last_synced_at":"2025-04-12T15:43:05.416Z","repository":{"id":4060468,"uuid":"51835127","full_name":"krispo/ng2-nvd3","owner":"krispo","description":"Angular2 component for nvd3","archived":false,"fork":false,"pushed_at":"2022-07-18T19:30:14.000Z","size":503,"stargazers_count":328,"open_issues_count":107,"forks_count":104,"subscribers_count":37,"default_branch":"master","last_synced_at":"2024-10-30T02:33:16.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://krispo.github.io/ng2-nvd3/","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/krispo.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}},"created_at":"2016-02-16T12:45:28.000Z","updated_at":"2024-05-13T22:02:57.000Z","dependencies_parsed_at":"2022-09-05T17:00:32.565Z","dependency_job_id":null,"html_url":"https://github.com/krispo/ng2-nvd3","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krispo%2Fng2-nvd3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krispo%2Fng2-nvd3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krispo%2Fng2-nvd3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krispo%2Fng2-nvd3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krispo","download_url":"https://codeload.github.com/krispo/ng2-nvd3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590938,"owners_count":21129916,"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":[],"created_at":"2024-07-31T17:00:45.750Z","updated_at":"2025-04-12T15:43:05.396Z","avatar_url":"https://github.com/krispo.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# ng2-nvd3\n[![Build Status](https://travis-ci.org/krispo/ng2-nvd3.svg?branch=master)](https://travis-ci.org/krispo/ng2-nvd3)\n[![NPM Version](http://img.shields.io/npm/v/ng2-nvd3.svg?style=flat)](https://www.npmjs.org/package/ng2-nvd3)\n\nAngular component for nvd3 (uses d3 v3!). It has similar technique as [angular-nvd3](http://krispo.github.io/angular-nvd3) for angular 1, but designed for angular 2+ and without extra features (like extended mode) you won't need.\n\n## Demos\n\nOnline demos:\n\n1. [web page](http://krispo.github.io/ng2-nvd3)\n2. [plnkr](http://plnkr.co/edit/T4i7Zh?p=preview)\n\n## Install\n\n    npm install ng2-nvd3\n    \nit requires `angular2+`, `d3` (v3.5.17) and `nvd3` as dependencies.\n    \n## Basic usage\n\n### Simple bar chart\nNote: `d3` and `nvd3` should be also included in your project bundle.\n\nSimple discrete bar chart: \n    \n##### Module   \n \n```ts\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent }  from './app.component';\nimport { NvD3Module } from 'ng2-nvd3';\n\n// d3 and nvd3 should be included somewhere\nimport 'd3';\nimport 'nvd3';\n\n@NgModule({\n    imports:      [ BrowserModule, NvD3Module ],\n    declarations: [ AppComponent ],\n    bootstrap:    [ AppComponent ]\n})\nexport class AppModule { }\n``` \n\n##### Component\n```js\nimport { Component, OnInit, ViewEncapsulation } from '@angular/core';\ndeclare let d3: any;\n\n@Component({\n  selector: 'main',\n  template: `\n    \u003cdiv\u003e\n      \u003cnvd3 [options]=\"options\" [data]=\"data\"\u003e\u003c/nvd3\u003e\n    \u003c/div\u003e\n  `,\n  // include original styles\n  styleUrls: [\n    '../../node_modules/nvd3/build/nv.d3.css'\n  ],\n  encapsulation: ViewEncapsulation.None\n})\n\nexport class AppComponent implements OnInit {\n  options;\n  data;\n  ngOnInit() {\n    this.options = {\n      chart: {\n        type: 'discreteBarChart',\n        height: 450,\n        margin : {\n          top: 20,\n          right: 20,\n          bottom: 50,\n          left: 55\n        },\n        x: function(d){return d.label;},\n        y: function(d){return d.value;},\n        showValues: true,\n        valueFormat: function(d){\n          return d3.format(',.4f')(d);\n        },\n        duration: 500,\n        xAxis: {\n          axisLabel: 'X Axis'\n        },\n        yAxis: {\n          axisLabel: 'Y Axis',\n          axisLabelDistance: -10\n        }\n      }\n    }\n    this.data = [\n      {\n        key: \"Cumulative Return\",\n        values: [\n          {\n            \"label\" : \"A\" ,\n            \"value\" : -29.765957771107\n          } ,\n          {\n            \"label\" : \"B\" ,\n            \"value\" : 0\n          } ,\n          {\n            \"label\" : \"C\" ,\n            \"value\" : 32.807804682612\n          } ,\n          {\n            \"label\" : \"D\" ,\n            \"value\" : 196.45946739256\n          } ,\n          {\n            \"label\" : \"E\" ,\n            \"value\" : 0.19434030906893\n          } ,\n          {\n            \"label\" : \"F\" ,\n            \"value\" : -98.079782601442\n          } ,\n          {\n            \"label\" : \"G\" ,\n            \"value\" : -13.925743130903\n          } ,\n          {\n            \"label\" : \"H\" ,\n            \"value\" : -5.1387322875705\n          }\n        ]\n      }\n    ];\n  }\n\n}\n```    \n\n## Tests\n\n    npm test\n    \n## Thanks\n\nSpecial thanks to [Tobias Walle](https://github.com/TobiasWalle) and [MaibornWolff](https://github.com/MaibornWolff) team for the huge updates [#51](https://github.com/krispo/ng2-nvd3/pull/51) !\n    \n## Change Log\n\n#### 2.0.0 (master)\n\nFixed `aot` issue [#104](https://github.com/krispo/ng2-nvd3/pull/104) \n\n#### 2.0.0-rc3\n\n* Angular 4\n\n#### 1.1.3\n* Angular2 - v2.0.0-rc4 \n\n#### 1.1.2\n* Angular2 - v2.0.0-rc3 \n\n#### 1.1.1\n* Angular2 - v2.0.0-rc2 \n\n#### 1.1.0\n* Angular2 - v2.0.0-rc1 \n\n#### 1.0.7\n* Angular2 - v2.0.0-beta.3 \n    \n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrispo%2Fng2-nvd3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrispo%2Fng2-nvd3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrispo%2Fng2-nvd3/lists"}