angular-d3-charts

Integrate angular 2 app with interactive d3 charts e.g. Doughnut, Pie, Single Bar chart, Multiple bar chart and Stacked bar chart.

Beautiful charts for Angular2 based on d3.js

Getting Started

npm install angular-d3-charts --save

Notice: the latest version on NPM may not reflect the branch master. Open an issue and tag me if you need it to be published.

Configuration

Ensure you import the module:

import { DoughnutChartComponent, PieChartComponent } from 'angular-d3-charts'; // this is needed!

@NgModule({
   declarations: [ 
   DoughnutChartComponent, 
   PieChartComponent, 
   ...OtherModules 
   ] // along with your other modules
})
export class AppModule {}

Usage

Doughnut Chart:

<angular-d3-donut [data]="donutChartData" ></angular-d3-donut>   

donutChartData = [{
      id: 0, // number
      label: 'label name',  // string
      value: value,  // number
      color: 'color of slice',  // string,
      iconImage: 'path of image' // string
   },
      id: 1, // number
      label: 'label name',  // string
      value: value,  // number
      color: 'color of slice',  // string,
      iconImage: 'path of image' // string
   }, ...
   ]

Attributes

Attributes of angular-d3-donut are

It can contain the following properties.

Input

Option	Default	Type	Description
outerRadius	150	Number	Outer radius of the donut chart. (Recommended to not to larger than 150)
innerRadius	70	Number	Inner radius of the donut chart.
data	Not set	Object	As above mentioned
centerImage	Not set	String	Path of center image in donut.
spreadSlice	False	Boolean	If you want to spread out the slide.

Output

Option	Description
centerImageEvent	When cemter image is clicked, the centerImageEvent function triggers.

<angular-d3-donut [spreadSlice]=true [centerImage]='centerImage' [data]="donutChartData" (centerImageEvent)="centerImageEvent()"></angular-d3-donut>

In your.component.ts file write
public centerImageEvent() {
 // Perform action here
}

Pie Chart:

<angular-d3-pie [data]="pieChartData" ></angular-d3-pie>   

pieChartData = [{
      id: 0, // number
      label: 'label name',  // string
      value: value,  // number
      color: 'color of slice',  // string,
   },
      id: 1, // number
      label: 'label name',  // string
      value: value,  // number
      color: 'color of slice',  // string,
   }, ... ]

Attributes

Attributes of angular-pie-donut are

It can contain the following properties.

Input

Option	Default	Type	Description
outerRadius	150	Number	Outer radius of the donut chart. (Recommended to not to larger than 150)
data	Not set	Object	As above mentioned
spreadSlice	False	Boolean	If you want to spread out the slide.

<angular-d3-pie [spreadSlice]=true [data]="pieChartData" [outerRadius]=90></angular-d3-pie>