Skip to content
Angular2 component for nvd3
Branch: master
Clone or download
Latest commit 4528b48 Aug 7, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Update compiled files Aug 1, 2017
lib Change index.ts location Aug 1, 2017
test fix test reference Aug 1, 2017
.gitignore update .*ignore Jun 27, 2017
.npmignore update .*ignore Jun 27, 2017
.travis.yml
LICENSE fix name May 14, 2016
README.md change version Aug 7, 2017
index.ts
karma.conf.js fix typescript version Jun 27, 2017
package.json
tsconfig.json
tsconfig.publish.json Change ngc configuration Aug 1, 2017
typings.json
yarn.lock merging MaibornWolff Jun 6, 2017

README.md

ng2-nvd3

Build Status NPM Version

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

You can’t perform that action at this time.