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
.
;... @
then lets do awesome chart...
Use as component
@
Use as directive
In case you want to use as directive nvd3
.
@
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 }