angular2-nvd3
Create nvd3 with angular2 use directive or as a component.
This project has tested latest angular2 v2.4.1
.
This project is reincarnation from ng2-nvd3.
If you are using nvd3 for angular2.RC take a look ng2-nvd3.
Install
This node use some dependency of @types :
- @types/nvd3@^1.8.33
- @types/d3@^3.5.35
- d3@^3.5.17
- nvd3@^1.8.5
Most of people get chart background turn into black, make sure to include nvd3.css
via transpiler webpack
or systemjs
or current using it.
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 decalaration via NgModule
.
;... @
then lets do awosome chart...
Use as component
@
Use as directive
In case you want to use as directive appNvD3
.
@
Set option and data
all chaining function use ase json...
thisoptions = chart: type: 'lineChart' useInteractiveGuideline: true height: 450 transitionDuration: 350 showLegend: false margin: top: 20 right: 20 bottom: 40 left: 55 { return dx; } { return dy; } xScale: d3time xAxis: ticks: d3timemonths { return d3timed; } yAxis: axisLabel: 'Gross volume' { if d == null return 0; return d3d; } axisLabelDistance: 400 thisdata = key: "Cumulative Return" values: "label" : "A" "value" : -29765957771107 "label" : "B" "value" : 0 "label" : "C" "value" : 32807804682612 ;
you can set your callback:
thisoptions = chart: ... { // do something maybe change background }
you rock....!!!