Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krispo/ng2-nvd3
Angular2 component for nvd3
https://github.com/krispo/ng2-nvd3
Last synced: 3 days ago
JSON representation
Angular2 component for nvd3
- Host: GitHub
- URL: https://github.com/krispo/ng2-nvd3
- Owner: krispo
- License: mit
- Created: 2016-02-16T12:45:28.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-07-18T19:30:14.000Z (over 2 years ago)
- Last Synced: 2024-10-30T02:33:16.702Z (about 1 month ago)
- Language: TypeScript
- Homepage: http://krispo.github.io/ng2-nvd3/
- Size: 491 KB
- Stars: 328
- Watchers: 37
- Forks: 104
- Open Issues: 107
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-nvd3 - Angular2 component for nvd3. (Uncategorized / Uncategorized)
- awesome-angular - ng2-nvd3 - Angular2 component for nvd3. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-nvd3 - Angular2 component for nvd3 (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-nvd3 - Angular2 component for nvd3. (Uncategorized / Uncategorized)
README
# ng2-nvd3
[](https://travis-ci.org/krispo/ng2-nvd3)
[](https://www.npmjs.org/package/ng2-nvd3)
Angular 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.
## Demos
Online demos:
1. [web page](http://krispo.github.io/ng2-nvd3)
2. [plnkr](http://plnkr.co/edit/T4i7Zh?p=preview)
## Install
npm install ng2-nvd3
it requires `angular2+`, `d3` (v3.5.17) and `nvd3` as dependencies.
## Basic usage
### Simple bar chart
Note: `d3` and `nvd3` should be also included in your project bundle.
Simple discrete bar chart:
##### Module
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NvD3Module } from 'ng2-nvd3';
// d3 and nvd3 should be included somewhere
import 'd3';
import 'nvd3';
@NgModule({
imports: [ BrowserModule, NvD3Module ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
##### Component
```js
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
declare let d3: any;
@Component({
selector: 'main',
template: `
`,
// include original styles
styleUrls: [
'../../node_modules/nvd3/build/nv.d3.css'
],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
options;
data;
ngOnInit() {
this.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
}
this.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : -29.765957771107
} ,
{
"label" : "B" ,
"value" : 0
} ,
{
"label" : "C" ,
"value" : 32.807804682612
} ,
{
"label" : "D" ,
"value" : 196.45946739256
} ,
{
"label" : "E" ,
"value" : 0.19434030906893
} ,
{
"label" : "F" ,
"value" : -98.079782601442
} ,
{
"label" : "G" ,
"value" : -13.925743130903
} ,
{
"label" : "H" ,
"value" : -5.1387322875705
}
]
}
];
}
}
```
## Tests
npm test
## Thanks
Special 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) !
## Change Log
#### 2.0.0 (master)
Fixed `aot` issue [#104](https://github.com/krispo/ng2-nvd3/pull/104)
#### 2.0.0-rc3
* Angular 4
#### 1.1.3
* Angular2 - v2.0.0-rc4
#### 1.1.2
* Angular2 - v2.0.0-rc3
#### 1.1.1
* Angular2 - v2.0.0-rc2
#### 1.1.0
* Angular2 - v2.0.0-rc1
#### 1.0.7
* Angular2 - v2.0.0-beta.3
## License
MIT