2.0.0 • Published 8 years ago
ng2-nvd3 v2.0.0
ng2-nvd3
Angular component for nvd3 (uses d3 v3!). It has similar technique as angular-nvd3 for angular 1, but designed for angular 2+ and without extra features (like extended mode) you won't need.
Demos
Online demos:
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
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
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
declare let d3: any;
@Component({
selector: 'main',
template: `
<div>
<nvd3 [options]="options" [data]="data"></nvd3>
</div>
`,
// 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 and MaibornWolff team for the huge updates #51 !
Change Log
2.0.0 (master)
Fixed aot
issue #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
2.0.0
8 years ago
2.0.0-rc3
8 years ago
2.0.0-rc2
8 years ago
2.0.0-rc1
8 years ago
1.1.3
9 years ago
1.1.2
9 years ago
1.1.1
9 years ago
1.1.0
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
10 years ago
1.0.6
10 years ago
1.0.5
10 years ago
1.0.4
10 years ago
1.0.3
10 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago