Nefarious Plastic Mannequins

    angular2-nvd3
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    angular2-nvd3

    NPM Version NPM license Dependency Status Build Status

    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.

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

    then lets do awosome chart...

    Use as component

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

    Use as directive

    In case you want to use as directive appNvD3.

    @Component({
      ...
      template: `<app-chart appNvD3 [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 (== 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
            }
          }
        }

    you rock....!!!

    Install

    npm i angular2-nvd3

    DownloadsWeekly Downloads

    262

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • hendrathings