ejSunburstChart

11 Jul 201824 minutes to read

Essential Sunburst can be easily configured to the DOM element, such as div. You can create a Sunburst with highly customizable look and feel.

Syntax

JS

$(element).ejSunburstChart();

Example

HTML

<div id="container"></div> 
 
<script>
// Create Sunburst
$('#container').ejSunburstChart();      
</script>

Requires

• module:jQuery.js

• module:ej.core.js

• module:ej.data.js

• module:ej.sunburst.js

• module:ej.globalize.js

Members

background string

Background color of the plot area.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

    background : "gray" 
                          
});

valueMemberPath string

Bind the data field from the data source.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

    valueMemberPath : "Population" 
                          
});

border object

Options for customizing the sunburst border.

border.color string

Border color of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   border: { color: "green" }                      

});

border.width number

Width of the Sunburst border.

Default Value

• 2

Example

JS

$("#container").ejSunburstChart({

   border: { width: 3 }                      

});

segmentBorder object

Options for customizing the sunburst segment border.

segmentBorder.color string

Segment Border color of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   segmentBorder: { color: "green" }                      

});

segmentBorder.width number

Width of the Sunburst segment border.

Default Value

• 2

Example

JS

$("#container").ejSunburstChart({

   segmentBorder: { width: 3 }                      

});

dataSource object

Specifies the dataSource to the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    
    dataSource: data
                       
});

palette string

Palette color for the data points.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    palette : "ColorFieldName"                  
});

parentNode string

Parent node of the data points.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    
    parentNode: "ParentNode"
                       
});

xName string

Name of the property in the datasource that contains x values.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    
    xName: "XValue"
                       
});

yName string

Name of the property in the datasource that contains y values.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    
    yName: "YValue"
                       
});

isResponsive boolean

Controls whether sunburst has to be responsive or not.

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   isResponsive : true             

});

size object

Options to customize the Sunburst size.

size.height string

Height of the Sunburst.

Default Value

• ’’

Example

JS

$("#container").ejSunburstChart({

   size :{height : '80'}          

});

size.width string

Width of the Sunburst.

Default Value

• ’’

Example

JS

$("#container").ejSunburstChart({

   size :{width : '80'}          

});

visible boolean

Controls the visibility of sunburst.

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   visible : true             

});

tooltip object

Options to customize the Sunburst tooltip.

tooltip.visible boolean

tooltip visibility of the Sunburst.

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   tooltip :{visible : false}          

});

tooltip.border object

Options for customizing the border of the sunburst tooltip.

tooltip.border.color string

Border color of the tooltip.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    tooltip:{
        border:{color : "green"}
    }                  
});

tooltip.border.width number

Border width of the tooltip.

Default Value

• 5

Example

JS

$("#container").ejSunburstChart({
    tooltip :{border :{width : 2}}                  
});

tooltip.fill string

Fill color for the sunburst tooltip.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    tooltip:{fill : "green"}                  
});

tooltip.font object

Options for customizing the font of the tooltip.

tooltip.font.color string

Font color of the text in the tooltip.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
tooltip :{font :{color : "green"}}                 
});

tooltip.font.fontFamily string

Font Family for the tooltip.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({
tooltip :{ font : { fontFamily : "Algerian"}}                 
});

tooltip.font.fontStyle enum

Specifies the font Style for the tooltip.

Name	Type	Description
Normal	string	Specifies the fontStyle as normal.
Italic	string	Specifies the fontStyle as italic.

Default Value

• “Normal”

Example

JS

$("#container").ejSunburstChart({
tooltip : {font :{fontStyle : "italic"}}                 
});

tooltip.font.fontWeight enum

Specifies the font weight for the tooltip.

Name	Type	Description
Regular	string	Specifies the font weight as regular.
Bold	string	Specifies the font weight as bold.
Lighter	string	Specifies the font weight as lighter.

Default Value

• “Regular”

Example

JS

$("#container").ejSunburstChart({
tooltip :{font :{fontWeight : "lighter"}}                 
});

tooltip.font.opacity number

Opacity for text in the tooltip.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({
tooltip :{font :{opacity : 0.5}}                 
});

tooltip.font.size string

Font size for text in the tooltip.

Default Value

• “12px”

Example

JS

$("#container").ejSunburstChart({
tooltip :{font :{size : "14px"}}                 
});

tooltip.template string

Custom template to the tooltip.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    tooltip :{template : "item"}                  
});

tooltip.format string

Setting the format for the data displayed in the tooltip

Default Value

• “#point.x# : #point.y#”

Example

JS

$("#container").ejSunburstChart({
    tooltip :{format : "#point.x# : #point.y#%"}                  
});

tooltip.opacity number

Sets the opacity of the displayed tooltip

Default Value

• 0.95

Example

JS

$("#container").ejSunburstChart({
    tooltip :{opacity : 1}                  
});

points object

Options for customizing sunburst points.

points.x string

Points x value of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   points: { x: "XValue" }                      

});

points.y number

Points y value of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   points: { y: 100 }                      

});

points.text string

Points text of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   points: { text: "Other" }                      

});

points.fill string

Points fill color of the sunburst.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   points: { fill: "red" }                      

});

startAngle number

Sunburst rendering will start from the specified value

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

    startAngle : 90             

});

endAngle number

Sunburst rendering will end at the specified value

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

    endAngle : 360             

});

radius number

Sunburst outer radius value

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({

    radius : 0.8             

});

innerRadius number

Sunburst inner radius value

Default Value

• 0.4

Example

JS

$("#container").ejSunburstChart({

    innerRadius : 0.2            

});

dataLabelSettings object

Options to customize the Sunburst dataLabel.

dataLabelSettings.visible boolean

Datalabel visibility of the Sunburst.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({

   dataLabelSettings :{visible : true}          

});

dataLabelSettings.labelRotationMode enum

Alignment of sunburst datalabel

Name	Type	Description
Angle	string	Display the datalabel in angle
Normal	string	Align the datalabel in normal mode

Default Value

• “Angle”. See DatalabelAlignment

Example

JS

$("#container").ejSunburstChart({

   dataLabelSettings :{labelRotationMode : "normal"}                    

});

dataLabelSettings.font object

Options for customizing the data label font.

dataLabelSettings.font.fontFamily string

Font family of the data label.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{ font :{fontFamily : "Algerian"}}                 
});

dataLabelSettings.font.fontStyle enum

Font style of the data label.

Default Value

• “normal”. See FontStyle

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{font :{ fontStyle : "italic" }}                 
});

dataLabelSettings.font.fontWeight enum

Font weight of the data label.

Default Value

• “regular”. See FontWeight

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{font : { fontWeight : "lighter" }}                 
});

dataLabelSettings.font.opacity number

Opacity of the text.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{font :{ opacity : 0.5 }}               
});

dataLabelSettings.font.color string

Font color of the data label text.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{font :{ color : "red" }}                 
});

dataLabelSettings.font.size string

Font size of the data label.

Default Value

• “12px”

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{font : { size : "14px" }}               
});

dataLabelSettings.template string

Custom template for datalabel

Default Value

• “null”

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{ template: "item" }               
});

dataLabelSettings.fill string

Fill color for the datalabel

Default Value

• null

Example

JS

$("#container").ejSunburstChart({
    dataLabelSettings :{ fill: "yellow" }               
});

dataLabelSettings.labelOverflowMode enum

Datalabel overflow mode

Name	Type	Description
Trim	string	Trim the datalabel
Hide	string	Hide the datalabel
None	string	Datalabel displayed in normal format

Default Value

• “Trim”. See LabelOverflowMode

Example

JS

$("#container").ejSunburstChart({

   dataLabelSettings :{labelOverflowMode : "hide"}                    

});

title object

Options for customizing the title and subtitle of sunburst.

title.text string

Title text for sunburst

Default Value

• ””

Example

JS

$("#container").ejSunburstChart({

   title : { text: "Sunburst Chart" }                     

});

title.visible string

Title text visibility for sunburst

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   title : { visible: false }                     

});

title.textAlignment enum

Title text alignment

Name	Type	Description
Center	string	Display the sunburst title center
Near	string	Display the title near to the chart
Far	string	Display the title far to the chart

Default Value

• “center”. See TextAlignment

Example

JS

$("#container").ejSunburstChart({

   title :{textAlignment : "near"}                    

});

title.font object

Options for customizing the font of sunburst title.

title.font.fontFamily string

Font family for Sunburst title.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({

   title : { font : { fontFamily : "Algerian" } }                     

});

title.font.fontStyle enum

Font style for Sunburst title.

Default Value

• “Normal”. See FontStyle

Example

JS

$("#container").ejSunburstChart({

   title : { font : { fontStyle : "italic" } }                     

});

title.font.fontWeight enum

Font weight for Sunburst title.

Default Value

• “Regular”. See FontWeight

Example

JS

$("#container").ejSunburstChart({

   title : { font : { fontWeight : "lighter" } }                     

});

title.font.opacity number

Opacity of the Sunburst title.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({

   title : { font : { opacity : 0.8 } }                     

});

title.font.size string

Font size for Sunburst title.

Default Value

• “20px”

Example

JS

$("#container").ejSunburstChart({

   title : { font : { size : "22px" } }                     

});

title.subtitle object

Options to customize the sub title of Sunburst.

title.subtitle.text string

Subtitle text for sunburst

Default Value

• ””

Example

JS

$("#container").ejSunburstChart({

   title : { subtitle :{text: "Sunburst Subtitle" }}                 

});

title.subtitle.visible string

Sub title text visibility for sunburst

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   title : {subtitle:{visible: false }}                     

});

title.subtitle.textAlignment enum

Sub title text alignment

Default Value

• “far”. See TextAlignment

Example

JS

$("#container").ejSunburstChart({

   title :{subtitle : {textAlignment : "near"}}                    

});

title.subtitle.font object

Options for customizing the font of sub title.

title.subtitle.font.fontFamily string

Font family of sub title.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({

   title: {subtitle : {font :{ fontFamily : "Algerian" } } }                      

});

title.subtitle.font.fontStyle enum

Font style for sub title.

Default Value

• “Normal”. See FontStyle

Example

JS

$("#container").ejSunburstChart({

   title: { subtitle : {font :{ fontStyle : "Normal" } } }                     

});

title.subtitle.font.fontWeight enum

Font weight for sub title.

Default Value

• “Regular”. See FontWeight

Example

JS

$("#container").ejSunburstChart({

   title: { subtitle : {font :{ fontWeight : "regular" } } }                     

});

title.subtitle.font.opacity number

Opacity of the sub title.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({

   title: { subtitle : {font :{ opacity : 0.5 } } }                     

});

title.subtitle.font.size string

Font size for sub title.

Default Value

• “12px”

Example

JS

$("#container").ejSunburstChart({

   title: { subtitle : {font :{ size : "14px" } } }                     

});

highlightSettings object

Options for customizing the appearance of the levels or point while highlighting.

highlightSettings.enable boolean

Enables/disables the ability to highlight the levels or point interactively.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({
    highlightSettings:{enable:true}                 
});

highlightSettings.mode enum

Specifies whether the levels or point has to be highlighted.

Name	Type	Description
Point	string	Highlight/Select the point in the levels.
Parent	string	Highlight/Select the parent of levels.
Child	string	Highlight/Select the child of levels.
All	string	Highlight/Select all the points in levels.

Default Value

• “point”. See Mode

Example

JS

$("#container").ejSunburstChart({
    highlightSettings:{mode:"point"}                  
});

highlightSettings.color string

Color of the levels/point on highlight.

Default Value

• “red”

Example

JS

$("#container").ejSunburstChart({
    highlightSettings:{color:"red"}               
});

highlightSettings.opacity number

Opacity of the levels/point on highlight.

Default Value

• 0.5

Example

JS

$("#container").ejSunburstChart({
    highlightSettings:{opacity:1}            
});

highlightSettings.type enum

Specifies whether the levels or data point has to be highlighted.

Name	Type	Description
Opacity	string	Highlight/Select the point in opacity.
Color	string	Highlight/Select the point in color.

Default Value

• “opacity”. See Mode

Example

JS

$("#container").ejSunburstChart({
    highlightSettings:{type:"color"}                  
});

selectionSettings object

Options for customizing the appearance of the levels or data point while selection.

selectionSettings.enable boolean

Enables/disables the ability to select the levels or data point interactively.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({
    selectionSettings:{enable:true}                 
});

selectionSettings.mode enum

Specifies whether the levels or data point has to be selected.

Default Value

• “point”. See Mode

Example

JS

$("#container").ejSunburstChart({
    selectionSettings:{mode:"point"}                  
});

selectionSettings.color string

Color of the levels/point on selection.

Default Value

• “green”

Example

JS

$("#container").ejSunburstChart({
    selectionSettings:{color:"red"}               
});

selectionSettings.opacity number

Opacity of the levels/point on selection.

Default Value

• 0.5

Example

JS

$("#container").ejSunburstChart({
    selectionSettings:{opacity:1}            
});

selectionSettings.type enum

Specifies whether the levels or data point has to be selected.

Default Value

• “opacity”. See Mode

Example

JS

$("#container").ejSunburstChart({
    selectionSettings:{type:"color"}                  
});

levels array

Specify levels of sunburst for grouped visualization of data

Default Value

• []

levels.groupMemberPath string

Specifies the group member path

Default Value

• null

Example

JS

$("#container").ejSunburstChart({   
      levels: [{ groupMemberPath: "Continent" }]
  });

legend object

Options to customize the legend items and legend title.

legend.visible boolean

Visibility of the legend.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({

   legend : {visible:true}}                     

});

legend.clickAction enum

Interactive action of legend items.

Name	Type	Description
None	string	None of the mouse action performed on legend
ToggleSegmentVisibility	string	Toggle segment visibility action is performed on legend
ToggleSegmentSelection	string	Toggle segment selection action is performed on legend

Default Value

• “toggleSegmentVisibility”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   legend :{clickAction : "toggleSegmentSelection"}                    

});

legend.alignment enum

Horizontal alignment of the legend.

Name	Type	Description
Center	string	Align the legend as center to the chart
Near	string	Align the legend as near to the chart
Far	string	Align the legend as far to the chart

Default Value

• “Center”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   legend :{alignment : "far"}                    

});

legend.border object

Options for customizing the legend border.

legend.border.color string

Border color of the legend.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   legend : {border :{ color :"green"}}                     

});

legend.border.width number

Border width of the legend.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({

   legend :{ border :{width :2}}                     

});

legend.columnCount number

Number of columns to arrange the legend items.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   legend :{ columnCount : 2}                    

});

legend.rowCount number

Number of rows to arrange the legend items.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   legend :{ rowCount : 2}                    

});

legend.font object

Options to customize the font used for legend item text.

legend.font.fontFamily string

Font family for legend item text.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({

   legend :{ font :{fontFamily : "Algerian"}}                    

});

legend.font.fontStyle enum

Font style for legend item text.

Default Value

• “Normal”. See FontStyle

Example

JS

$("#container").ejSunburstChart({

   legend :{ font :{fontStyle : "italic"}}                    

});

legend.font.fontWeight enum

Font weight for legend item text.

Default Value

• “Regular”. See FontWeight

Example

JS

$("#container").ejSunburstChart({

   legend :{ font :{fontWeight : "lighter"}}                    

});

legend.font.size string

Font size for legend item text.

Default Value

• “12px”

Example

JS

$("#container").ejSunburstChart({

   legend :{ font :{size : "14px"}}                    

});

legend.itemPadding number

Gap or padding between the legend items.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   legend :{itemPadding : 5}                     

});

legend.itemStyle object

Options to customize the style of legend items.

legend.itemStyle.height number

Height of the shape in legend items.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   legend :{ itemStyle :{height : 20}}                    

});

legend.itemStyle.width number

Width of the shape in legend items.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   legend :{ itemStyle :{width : 15}}                    

});

legend.location object

Options to customize the location of sunburst legend. Legend is placed in provided location only when value of position property is custom

legend.location.x number

X value or horizontal offset to position the legend in chart.

Default Value

• 0

Example

JS

$("#container").ejSunburstChart({

   legend :{location :{x :20}}                    

});

legend.location.y number

Y value or vertical offset to position the legend.

Default Value

• 0

Example

JS

$("#container").ejSunburstChart({

   legend :{location : {y : 100}}                  

});

legend.position enum

Places the legend at specified position. Legend can be placed at left, right, top or bottom of the chart area.
To manually specify the location of legend, set custom as value to this property.

Name	Type	Description
Left	string	Legend will be placed left side of the chart area
Right	string	Legend will be placed right side of the chart area
Top	string	Legend will be placed top of the chart area
Bottom	string	Legend will be placed bottom of the chart area

Default Value

• “Bottom”. See Position

Example

JS

$("#container").ejSunburstChart({

   legend :{ position : "top"}                    

});

legend.shape enum

Shape of the legend items.

Name	Type	Description
Diamond	string	Shape of legend will be diamond
Pentagon	string	Shape of legend will be pentagon
Rectangle	string	Shape of legend will be rectangle
Circle	string	Shape of legend will be circle.
Cross	string	Shape of legend will be cross.
Triangle	string	Shape of legend will be triangle.

Default Value

• “None”. See Shape

Example

JS

$("#container").ejSunburstChart({

   legend :{ shape : "circle" }                      

});

legend.size object

Options to customize the size of the legend.

legend.size.height string

Height of the legend. Height can be specified in either pixel or percentage.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   legend :{ size :{height : "20%"}}                    

});

legend.size.width string

Width of the legend. Width can be specified in either pixel or percentage.

Default Value

• null

Example

JS

$("#container").ejSunburstChart({

   legend :{ size :{width : "20%"}}                    

});

legend.title object

Options to customize the legend title.

legend.title.font object

Options to customize the font used for legend title

legend.title.font.fontFamily string

Font family for the text in legend title.

Default Value

• “Segoe UI”

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { font :{fontFamily: "Algerian" } } }                      

});

legend.title.font.fontStyle enum

Font style for legend title.

Default Value

• “normal”. See FontStyle

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { font :{fontStyle: "normal" } } }                      

});

legend.title.font.fontWeight enum

Font weight for legend title.

Default Value

• “normal”. See FontWeight

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { font :{fontWeight: "normal" } } }                      

});

legend.title.font.size string

Font size for legend title.

Default Value

• “12px”

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { font :{size: "14px" } } }                      

});

legend.title.visible string

Enables or disables the legend title.

Default Value

• true

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { visible: false } }                      

});

legend.title.text string

Text to be displayed in legend title.

Default Value

• ””

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { text : "Countries" } }                      

});

legend.title.textAlignment enum

Alignment of the legend title.

Name	Type	Description
Center	string	Legend Title will be aligned as center of the legends
Near	string	Legend Title will be aligned as near
Far	string	Legend Title will be aligned as far

Default Value

• “center”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   legend: { title: { textAlignment : "near" } }                      

});

theme enum

Specifies the theme for Sunburst.

Name	Type	Description
FlatLight	string	The Chart will be displayed in light flat theme
FlatDark	string	The Chart will be displayed in dark flat theme

Default Value

• “Flatlight”. See Theme

Example

JS

$("#container").ejSunburstChart({

   theme : "flatdark"            

});

margin object

Options to customize the left, right, top and bottom margins of sunburst area.

margin.left number

Spacing for the left margin of chart area. Setting positive value decreases the width of the chart area from left side.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   margin : { left: 15 }             

});

margin.right number

Spacing for the right margin of chart area. Setting positive value decreases the width of the chart area from right side.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   margin : { right: 10 }             

});

margin.top number

Spacing for the top margin of chart area. Setting positive value decreases the height of the chart area from the top.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   margin : { top: 10 }             

});

margin.bottom number

Spacing for the bottom margin of the chart area. Setting positive value decreases the height of the chart area from the bottom.

Default Value

• 10

Example

JS

$("#container").ejSunburstChart({

   margin : { bottom: 10 }             

});

enableAnimation boolean

Enable/disable the animation for all the levels.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({
    enableAnimation : true                  
});

opacity number

Opacity of the levels.

Default Value

• 1

Example

JS

$("#container").ejSunburstChart({
    opacity : 0.5              
});

zoomSettings object

Options for enable zooming feature of chart.

zoomSettings.enable boolean

Enables or disables zooming.

Default Value

• false

Example

JS

$("#container").ejSunburstChart({

   zoomSettings :{enable :true}          

});

zoomSettings.toolbarHorizontalAlignment enum

Toolbar horizontal alignment

Name	Type	Description
Center	string	Aligns the toolbar in center
Left	string	Aligns the toolbar in left
Right	string	Aligns the toolbar in right

Default Value

• “right”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   zoomSettings: { toolbarHorizontalAlignment: "center" }                      

});

zoomSettings.toolbarVerticalAlignment enum

Toolbar vertical alignment

Name	Type	Description
Top	string	Aligns the toolbar in top
Bottom	string	Aligns the toolbar in bottom
Middle	string	Aligns the toolbar in center

Default Value

• “top”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   zoomSettings: { toolbarVerticalAlignment: "middle" }                      

});

animationType enum

Animation type of sunburst

Name	Type	Description
Rotation	string	Animates points rendering in rotation
FadeIn	string	Animates points in fade in

Default Value

• “rotation”. See Alignment

Example

JS

$("#container").ejSunburstChart({

   animationType:"fadeIn"                     

});

Methods

redraw()

Redraws 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.

Returns: void

Example

JS

// Redraw Sunburst
var sunburstObj = $("#container").data("ejSunburstChart");
sunburstObj.redraw();

JS

$("#container").ejSparkline("redraw");

destroy ()

destroy the sunburst

Returns: void

Example

JS

// Destroy sunburst
var sunburstObj = $("#container").data("ejSunburstChart");
sunburstObj.destroy();

JS

$("#container").ejSunburstChart("destroy");

Events

load

Fires before loading.

Example

JS

//load event for sunburst

$("#container").ejSunburstChart({

    load: function (args) {
             //Do something
    }
    
});

Name	Type	Description
JS data	string	Load event data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

preRender

Fires before rendering sunburst.

Example

JS

//preRender event for sunburst

$("#container").ejSunburstChart({

    preRender: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	PreRender event data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

loaded

Fires after rendering sunburst.

Example

JS

//loaded event for sunburst

$("#container").ejSunburstChart({

    loaded: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Loaded event data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

dataLabelRendering

Fires before rendering the datalabel

Example

JS

//dataLabelRendering event for sunburst

$("#container").ejSunburstChart({

    dataLabelRendering: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Sunburst datalabel data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

segmentRendering

Fires before rendering each segment

Example

JS

//segmentRendering event for sunburst

$("#container").ejSunburstChart({

    segmentRendering: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Sunburst datalabel data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

titleRendering

Fires before rendering sunburst title.

Example

JS

//titleRendering event for sunburst

$("#container").ejSunburstChart({

    titleRendering: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Sunburst title data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

tooltipInitialize

Fires during initialization of tooltip.

Example

JS

//tooltipInitialize event for sunburst

$("#container").ejSunburstChart({

    tooltipInitialize: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Sunburst tooltip data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

pointRegionClick

Fires after clicking the point in sunburst

Example

JS

//pointRegionClick event for sunburst

$("#container").ejSunburstChart({

    pointRegionClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Includes clicked points region data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

pointRegionMouseMove

Fires while moving the mouse over sunburst points

Example

JS

//pointRegionMouseMove event for sunburst

$("#container").ejSunburstChart({

    pointRegionMouseMove: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Includes data of mouse moved region
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

drillDownClick

Fires when clicking the point to perform drilldown.

Example

JS

//drillDownClick event for sunburst

$("#container").ejSunburstChart({

    drillDownClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Clicked point data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

drillDownBack

Fires when resetting drilldown points.

Example

JS

//drillDownBack event for sunburst

$("#container").ejSunburstChart({

    drillDownBack: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Drill down data of points
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

drillDownReset

Fires after resetting the sunburst points

Example

JS

//drillDownReset event for sunburst

$("#container").ejSunburstChart({

    drillDownReset: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS data	string	Drill down reset data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

Click

Fires, on clicking the sunburst chart.

Name	Type	Description
JS data	string	Includes clicked region data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

Example

JS

//Click event for sunburst chart

 $("#container").ejSunburstChart({


    click: function (args) {
              //Do something
    }
   
});

doubleClick

Fires, on double clicking the sunburst chart.

Name	Type	Description
JS data	string	Includes double clicked region data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

Example

JS

//DoubleClick event for sunburst chart

 $("#container").ejSunburstChart({


    doubleClick: function (args) {
              //Do something
    }
   
});

rightClick

Fires, on right clicking the sunburst chart

Name	Type	Description
JS data	string	Includes right clicked region data
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the sunburst model object
JS type	string	Name of the event

Example

JS

//RightClick event for sunburst chart

 $("#container").ejSunburstChart({

    rightClick: function (args) {
              //Do something
    }
   
});