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