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
Github
https://github.com/amanjain325/angular-d3-charts
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
Add d3 script to your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
Add these styles to your main stylesheet. For Bar Charts Only
}
Ensure you import the module:
; // this is needed! @ {}
Usage
Doughnut Chart:
angular-d3-donut ="donutChartId" ="donutChartData"/angular-d3-donut
public donutChartData =
Example:
public donutChartData = ;
Attributes
Attributes of angular-d3-donut are
It can contain the following properties.
Input
Option | Default | Type | Description |
---|---|---|---|
id | donutChart | String | Unique Id of the donut chart. |
width | 700 | Number | Width of the donut chart. |
height | 400 | Number | Height of the donut chart. |
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. |
iconWidth | 40 | Number | Width of the icon images on slices. |
iconHeight | 40 | Number | Height of the icon images on slices. |
middleText | Not Set | String | Text in the middle of the inner circle |
middleTextColor | Black | String | Color of the middle text |
middleTextFontSize | 1em | String | Size of the middle text |
Output
Option | Description |
---|---|
centerImageEvent | When center image is clicked, the centerImageEvent function triggers. |
angular-d3-donut =true ='centerImage' ="donutChartData" ="centerImageEvent()"/angular-d3-donut
angular-d3-donut =100 =80 =true ="piedata" ="centerImageEvent()"/angular-d3-donut
angular-d3-donut =800 =90 ="'test'" ="'2em'" ="'red'" =80 =false ="piedata" =20 =20 ="centerImageEvent()"/angular-d3-donut
For text in middle of Donut chart:
angular-d3-donut =100 ="'test'" ="'2em'" ="'red'" =80 =false ="piedata" =20 =20 ="centerImageEvent()"/angular-d3-donut
In your.component.ts file writepublic centerImageEvent
Pie Chart:
public pieChartData =
Example:
public pieChartData =
Attributes
Attributes of angular-d3-pie are
It can contain the following properties.
Input
Option | Default | Type | Description |
---|---|---|---|
id | pieChart | String | Unique Id of the pie chart. |
width | 700 | Number | Width of the pie chart. |
height | 400 | Number | Height of the pie chart. |
outerRadius | 150 | Number | Outer radius of the pie 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 =true ="pieChartData" =90/angular-d3-pie
Bar Chart:
public barChartData =
Attributes
Attributes of angular-d3-bar are
It can contain the following properties.
Input
Option | Default | Type | Description |
---|---|---|---|
id | barChart | String | Unique Id of the bar chart. |
width | 700 | Number | Width of the bar chart. |
height | 400 | Number | Height of the bar chart. |
transitionDuration | 1000 | Number | The duration of the bar's transition (bar comes from x- axis). |
transitionDelay | 100 | Number | The delay of the bar's transition. |
barWidth | '11px' | String | Width of the bars. |
yAxisd3Format | '.1S' | String | d3Format of Y axis, Refer to the d3 documentation. |
data | Not set | Object | As above mentioned |
colors | Not set | Array | Color of the bars. |
dataGroup | 1 | Number | Number of data. (dataGroup > 1 for stacked bar chart.) |
yAxisTicks | 10 | Number | Ticks on Y axis. |
alphaDistance | 0.6 | Number | Distance between 2 bars, when chart is multi bar chart. |
dataColumns | [1] | Array | Length of array = Number of columns ,Value on index = number of stacked bars on particular column. |
Single Bar Chart
dataColumns = [1];
Stacked Bar Chart
dataColumns = [3];
Multi Bar Chart
dataColumns = [3, 2];
colors =
Examples:
public colors = public dataColumns = ; // Single Bar Chart// public dataColumns = [3]; // Stacked Bar Chart// public dataColumns = [2, 1]; // Multi Stacked Bar Chartpublic barChartData = angular-d3-bar ="test2" ="barChartData" ="dataColumns" ="colors" =10 =400 =200 =1000 =30 ="'16px'"/angular-d3-bar