1.0.10 • Published 5 years ago
ng-d3-scattered-chart v1.0.10
ng-d3-scattered-chart
Angular + D3 Reusable Scattered Chart Component
Demo
- Application live demo https://ng-d3-scattered-chart.herokuapp.com/.
How to use it in your project
download it from npm
npm install ng-d3-scattered-chart --save
use the scattered Chart Component in your project, you just need to imports into your module;
import { D3ScatteredComponent } from 'ng-d3-scattered-chart';
Add the data model in the componet code file to add the data
import * as chartModel from './d3-scattered-chart/d3.scattered.chart.model';
Add it in a html tag in component file, such as:
<app-d3-scattered-chart
[data]="chartConfig.chartData"
[svgBgColor]="chartConfig.svgBgColor"
[svgWidth]="chartConfig.svgWidth"
[svgHeigth]="chartConfig.svgHeigth"
[groupNames]="chartConfig.groupNames"
[groupColors]="chartConfig.groupColors"
[xAxisLabel]="chartConfig.xAxisLabel"
[yAxisLabel]="chartConfig.yAxisLabel"
[showBorder]="chartConfig.showBorder"
[circleRadius]="chartConfig.circleRadius"
[displayYaxis]="chartConfig.displayYaxis"
[displayXaxis]="chartConfig.displayXaxis"
(bubbleClick)="onBubbleClick($event)"></app-d3-scattered-chart >
Add the config in component code file, such as:
chartConfig = {
svgBgColor: 'transparent',
showBorder: true,
displayYaxis: true,
displayXaxis: true,
svgWidth: 520,
svgHeigth: 520,
circleRadius: 5,
xAxisLabel: 'Spetal Length',
yAxisLabel: 'Petal Length',
groupNames: ['setosa', 'versicolor', 'virginica'],
groupColors: ['#F8766D', '#00BA38', '#619CFF'],
chartData: chartModel.chartData
}
Properties
Name | Default Value |
---|---|
data | chart data |
svgBgColor | Chart background color |
svgWidth | Chart block width |
svgHeigth | Chart block height |
groupNames | Chart group |
groupColors | Chart group colors |
xAxisLabel | X axis label |
yAxisLabel | Y axis label |
showBorder | true/false |
circleRadius | Radius of dot circle |
displayYaxis | true/false |
displayXaxis | true/false |
method
onBubbleClick(data) {
this.clickedNodedata = `Node group name: ${data.Species}, Node Node Petal Length:${data.Petal_Length}, Node group Spetal Length:${data.Sepal_Length}`;
console.log(data);
}
it will return the data of the node you clicked !!!
Setup
# install dependencies
npm install
# serve with hot reload at localhost:4200
npm start
### License
MIT