# angular-sunburst-radar-chart
> A Sunburst Radar chart with SVG,No Dependencies
Latest version **3.0.2** (published 2020-11-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install angular-sunburst-radar-chart
pnpm add angular-sunburst-radar-chart
yarn add angular-sunburst-radar-chart
bun add angular-sunburst-radar-chart
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.2 |
| Published | 2020-11-29 |
| First published | 2020-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 835.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Muthukumaran Navaneethakrishnan |
| Maintainers | muthuishere |
| Keywords | angular, animated chart, chart, sunburst chart, svg chart, angular chart, sunburst radar chart, sunburst radar |
## Links
- npm: https://www.npmjs.com/package/angular-sunburst-radar-chart
- Repository: https://github.com/muthuishere/sunburst-radar-chart-workspace
- Homepage: https://muthuishere.github.io/sunburst-radar-chart-workspace/
- Issues: https://github.com/muthuishere/sunburst-radar-chart-workspace/issues
- npm.io page: https://npm.io/package/angular-sunburst-radar-chart
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^1.10.0
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 3.0.2 (latest) — 2020-11-29
- 3.0.1 — 2020-11-29
- 3.0.0 — 2020-11-27
- 2.0.0 — 2020-11-17
- 1.1.8 — 2020-11-17
- 1.1.7 — 2020-11-17
- 1.1.6 — 2020-11-16
- 1.1.5 — 2020-11-16
- 1.1.4 — 2020-11-16
- 1.1.2 — 2020-11-16
- 1.1.3 — 2020-11-16
- 1.1.1 — 2020-11-15
- 1.1.0 — 2020-11-15
- 1.0.1 — 2020-11-15
- 1.0.0 — 2020-11-15
## README
# Angular Sunburst Radar Chart
A Sunburst chart component in Angular developed using no dependencies, offCourse used SVG
####Updates
Migrated options into seperate object
Able to rotate the chart by dragging
smoother animations
Better tool tip
[Chart Demo](https://muthuishere.github.io/sunburst-radar-chart-workspace/)
To Use
Import AngularSunburstRadarChartModule to your module .
```
imports: [
... Other modules
AngularSunburstRadarChartModule
],
```
in your component.ts
```
const options = {"size":800,"maxScore":100,"legendAxisLinePosition":1,"animateChart":false,"splitBasedOnChildren":true}
const items = [ { "name": "Delaware ", "color": "#e5b0e9", "value": 100, "children": [ { "name": "Kent County", "value": 100 }, { "name": "New Castle County", "value": 100 }, { "name": "Sussex County", "value": 100 } ] },
{ "name": "Hawaii ", "value": 95, "color": "#beefc5", "children": [ { "name": "Hawaii County", "value": 95 }, { "name": "Honolulu County", "value": 95 }, { "name": "Kauai County", "value": 95 }, { "name": "Maui County", "value": 95 } ] },
{ "name": "District of Columbia ", "color": "#b7b1d0", "value": 89, "children": [ { "name": "District of Columbia", "value": 83 }, { "name": "Ward 2", "value": 79 }, { "name": "Ward 3", "value": 84 }, { "name": "Ward 4", "value": 88 }, { "name": "Ward 5", "value": 94 }, { "name": "Ward 6", "value": 95 }, { "name": "Ward 7", "value": 94 }, { "name": "Ward 8", "value": 92 } ] },
{ "name": "Arizona ", "value": 98, "color": "#6880be", "children": [ { "name": "Navajo County", "value": 99 }, { "name": "Maricopa County", "value": 95 }, { "name": "Mohave County", "value": 99 } ] } ]
```
in your component.html
```
```
The above will display chart something like below
|Parameter|Data Type|Description|
|--- |--- |--- |
|items|Item[]|List of items to be displayed on chart in Array format of type Item |
|options|Options|Options to be used in chart|
####Options Data Type
|Parameter|Data Type|Default|Description|
|--- |--- |--- |--- |
|size|number|800 |Size of Chart |
|maxScore|number|100 |Maximum score of the values |
|legendAxisLinePosition |number |1 |The position where the legend axis labels to be displayed |
|animateChart|boolean|true |Animate the chart while showing|
|splitBasedOnChildren|boolean|true |To split the angles equally based on the total children nodes available |
####Item Data Type
|Parameter|Data Type|Description|
|--- |--- |--- |
|name|string|name of the item |
|value|number|value of Item|
|color|string|HexCode color string #FFF000|
|children|Array of Item |Array of the same item data type|
If you find it useful, try considering
---
_Source: https://npm.io/package/angular-sunburst-radar-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._