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

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