tiroxis/ngx-nvd3

Angular2+ component or directive for NVD3.js

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.

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

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

then lets do awesome chart...

Use as component

@Component({
  ...
  template: `<div><nvd3 [options]="options" [data]="data"></nvd3></div>`
  ...
})

Use as directive

In case you want to use as directive nvd3.

@Component({
  ...
  template: `<app-chart nvd3 [options]="options" [data]="data"></app-chart>`
  ...
})

Set option and data

all chaining function use ase json...

    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:

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