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
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 |
####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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent