angular-sunburst-radar-chart
Version:
A Sunburst Radar chart with SVG,No Dependencies
89 lines (51 loc) • 3.49 kB
Markdown
A Sunburst chart component in Angular developed using no dependencies, offCourse used SVG
Migrated options into seperate object
Able to rotate the chart by dragging
smoother animations
Better tool tip
[](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
```
<lib-sunburst-radar-chart [options]="options" [items]="items"></lib-sunburst-radar-chart>
```
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|
|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 |
|Parameter|Data Type|Description|
|--- |--- |--- |
|name|string|name of the item |
|value|number|value of Item|
|color|string|HexCode color string
|children|Array of Item |Array of the same item data type|
If you find it useful, try considering
<a href="https://www.buymeacoffee.com/muthuishere" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>