https://github.com/vipinkatiyarknp/ng-d3-scattered-chart
Angular 7 and d3.v4 scattered chart reusable component.
https://github.com/vipinkatiyarknp/ng-d3-scattered-chart
angular7 d3 scatter
Last synced: 3 months ago
JSON representation
Angular 7 and d3.v4 scattered chart reusable component.
- Host: GitHub
- URL: https://github.com/vipinkatiyarknp/ng-d3-scattered-chart
- Owner: vipinkatiyarknp
- Created: 2019-05-31T13:17:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T07:59:08.000Z (over 6 years ago)
- Last Synced: 2025-02-17T13:38:22.440Z (9 months ago)
- Topics: angular7, d3, scatter
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ng-d3-scattered-chart
Angular + D3 Reusable Scattered Chart Component
### Demo
* Application live demo [https://ng-d3-scattered-chart.herokuapp.com/](https://ng-d3-scattered-chart.herokuapp.com/).
#### How to use it in your project
> download it from npm
```bash
npm install ng-d3-scattered-chart --save
```
use the scattered Chart Component in your project, you just need to imports into your module;
```es6
import { D3ScatteredComponent } from 'ng-d3-scattered-chart';
```
Add the data model in the componet code file to add the data
```es6
import * as chartModel from './d3-scattered-chart/d3.scattered.chart.model';
```
Add it in a html tag in component file, such as:
```
```
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
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:4200
npm start
### License
MIT