ngx-nvd3


Create nvd3 with angular2+ directive or as a component.
This project has tested latest angular2 v2.4.1 and can be used in ionic 3+ which uses angular 4+.
This project is reincarnation from ng2-nvd3 and angular2-nvd3.
If you are using nvd3 for angular2.RC take a look ng2-nvd3.

Install

``
npm install ngx-nvd3
`

Usage

Hopefully you already know how to use decorator, module, component, directive, input on angular2+.

Include module in your root module of your target component declaration via NgModule.

`js
import { NvD3Module } from 'ngx-nvd3';
....

@NgModule({
...
imports: [ // import Angular's modules
...
NvD3Module
...
],
declarations: [
... // your component target to implement nvd3
]
...
})
`

then lets do awesome chart...

$3

`js
@Component({
...
template:


...
})
`

$3

In case you want to use as directive nvd3.

`js
@Component({
...
template:
...
})
`

$3

all chaining function use ase json...

`js
this.options = {
chart: {
type: 'lineChart',
useInteractiveGuideline: true,
height: 450,
transitionDuration: 350,
showLegend: false,
margin: {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: (d) => { return d.x; },
y: (d) => { return d.y; },
xScale: d3.time.scale(),
xAxis: {
ticks: d3.time.months,
tickFormat: (d) => {
return d3.time.format('%b')(new Date(d));
}
},
yAxis: {
axisLabel: 'Gross volume',
tickFormat: (d) => {
if (d == null) {
return 0;
}
return d3.format('.02f')(d);
},
axisLabelDistance: 400
}
}
}

this.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : -29.765957771107
} ,
{
"label" : "B" ,
"value" : 0
} ,
{
"label" : "C" ,
"value" : 32.807804682612
} ,
]
}
];
`

you can set your callback:

`js
this.options = {
chart: {
...
callback: () => {
// do something maybe change background
}
}
}
``