ceoaliongroo / ng2-nvd3

Angular2 component for nvd3

ng2-nvd3

Angular component for nvd3 (uses d3 v3!). It has similar technique as angular-nvd3 for angular 1, but designed for angular 2+ and without extra features (like extended mode) you won't need.

Demos

Online demos:

1. web page
2. plnkr

Install

npm install ng2-nvd3

it requires angular2+, d3 (v3.5.17) and nvd3 as dependencies.

Basic usage

Simple bar chart

Note: d3 and nvd3 should be also included in your project bundle.

Simple discrete bar chart:

Module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NvD3Module } from 'ng2-nvd3';

// d3 and nvd3 should be included somewhere
import 'd3';
import 'nvd3';

@NgModule({
    imports:      [ BrowserModule, NvD3Module ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Component

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
declare let d3: any;

@Component({
  selector: 'main',
  template: `
    <div>
      <nvd3 [options]="options" [data]="data"></nvd3>
    </div>
  `,
  // include original styles
  styleUrls: [
    '../../node_modules/nvd3/build/nv.d3.css'
  ],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  options;
  data;
  ngOnInit() {
    this.options = {
      chart: {
        type: 'discreteBarChart',
        height: 450,
        margin : {
          top: 20,
          right: 20,
          bottom: 50,
          left: 55
        },
        x: function(d){return d.label;},
        y: function(d){return d.value;},
        showValues: true,
        valueFormat: function(d){
          return d3.format(',.4f')(d);
        },
        duration: 500,
        xAxis: {
          axisLabel: 'X Axis'
        },
        yAxis: {
          axisLabel: 'Y Axis',
          axisLabelDistance: -10
        }
      }
    }
    this.data = [
      {
        key: "Cumulative Return",
        values: [
          {
            "label" : "A" ,
            "value" : -29.765957771107
          } ,
          {
            "label" : "B" ,
            "value" : 0
          } ,
          {
            "label" : "C" ,
            "value" : 32.807804682612
          } ,
          {
            "label" : "D" ,
            "value" : 196.45946739256
          } ,
          {
            "label" : "E" ,
            "value" : 0.19434030906893
          } ,
          {
            "label" : "F" ,
            "value" : -98.079782601442
          } ,
          {
            "label" : "G" ,
            "value" : -13.925743130903
          } ,
          {
            "label" : "H" ,
            "value" : -5.1387322875705
          }
        ]
      }
    ];
  }

}

Tests

npm test

Thanks

Special thanks to Tobias Walle and MaibornWolff team for the huge updates #51 !

Change Log

2.0.0 (master)

Fixed aot issue #104

2.0.0-rc3

• Angular 4

1.1.3

• Angular2 - v2.0.0-rc4

1.1.2

• Angular2 - v2.0.0-rc3

1.1.1

• Angular2 - v2.0.0-rc2

1.1.0

• Angular2 - v2.0.0-rc1

1.0.7

• Angular2 - v2.0.0-beta.3

License

MIT