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
    }