angular-sunburst-radar-chart v3.0.2

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

####Options Data Type

####Item Data Type

If you find it useful, try considering