Methods

redraw()

redraw the entire sunburst. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

HTML

<div id="SunburstCtrl">
    <ej-sunburstchart></ej-sunburstchart>
</div>

JS

var sun = $("#SunburstCtrl").data("ejSunburstChart");
sun.redraw();

destroy ()

destroy the sunburst

HTML

<div id="SunburstCtrl">
    <ej-sunburstchart></ej-sunburstchart>
</div>

JS

var sun = $("#SunburstCtrl").data("ejSunburstChart");
sun.destroy();

Events

Load

Fires before loading, you can use Load event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-load="onLoad"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onLoad = "Load";    
});
 
function Load(){
    // Do Something
}

PreRender

Fires before rendering sunburst, you can use PreRender event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-preRender="onPreRender"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onPreRender = "PreRender";    
});
 
function PreRender(){
    // Do Something
}

Loaded

Fires after rendering sunburst, you can use Loaded event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-loaded="onLoaded"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onLoaded = "Loaded";    
});
 
function Loaded(){
    // Do Something
}

DataLabelRendering

Fires before rendering the data label, you can use DataLabelRendering event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-dataLabelRendering="onDataLabelRendering"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onDataLabelRendering = "DataLabelRendering";    
});
 
function DataLabelRendering(){
    // Do Something
}

SegmentRendering

Fires before rendering each segment, you can use SegmentRendering event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-segmentRendering="onSegmentRendering"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onSegmentRendering = "SegmentRendering";    
});
 
function SegmentRendering(){
    // Do Something
}

TitleRendering

Fires before rendering sunburst title, you can use TitleRendering event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-titleRendering="onTitleRendering"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onTitleRendering = "TitleRendering";    
});
 
function TitleRendering(){
    // Do Something
}

TooltipInitialize

Fires during initialization of tooltip, you can use TooltipInitialize event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-tooltipInitialize="onTooltipInitialize"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onTooltipInitialize = "TooltipInitialize";    
});
 
function TooltipInitialize(){
    // Do Something
}

PointRegionClick

Fires after clicking the point in sunburst, you can use PointRegionClick event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-pointRegionClick="onPointRegionClick"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onPointRegionClick = "PointRegionClick";    
});
 
function PointRegionClick(){
    // Do Something
}

PointRegionMouseMove

Fires while moving the mouse over sunburst points, you can use PointRegionMouseMove event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-pointRegionMouseMove="onPointRegionMouseMove"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onPointRegionMouseMove = "PointRegionMouseMove";    
});
 
function PointRegionMouseMove(){
    // Do Something
}

DrillDownClick

Fires when clicking the point to perform drilldown, you can use DrillDownClick event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-drillDownClick="onDrillDownClick"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onDrillDownClick = "DrillDownClick";    
});
 
function DrillDownClick(){
    // Do Something
}

DrillDownBack

Fires when resetting drilldown points, you can use DrillDownBack event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-drillDownBack="onDrillDownBack"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onDrillDownBack = "DrillDownBack";    
});
 
function DrillDownBack(){
    // Do Something
}

DrillDownReset

Fires after resetting the sunburst points, you can use DrillDownReset event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-drillDownReset="onDrillDownReset"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onDrillDownReset = "DrillDownReset";    
});
 
function DrillDownReset(){
    // Do Something
}

LegendItemRendering

Fires before rendering the legend item, you can use LegendItemRendering event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-legendItemRendering="onLegendItemRendering"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onLegendItemRendering = "LegendItemRendering";    
});
 
function Load(){
    // Do Something
}

LegendItemClick

Fires when clicking the legend item, you can use LegendItemClick event.

HTML

<div ng-controller="SunburstCtrl">
    <div id="container" style="width: 100%" e-legendItemClick="onLegendItemClick"></div>
</div>

JS

angular.controller('SunburstCtrl', function ($scope) {    
    $scope.onLegendItemClick = "LegendItemClick";    
});
 
function LegendItemClick(){
    // Do Something
}