ejSunburstChart
11 Oct 201724 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.
Example
<ej-sunburstchart id="sunburst">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" background="grey" >
</ej-sunburstchart>
valueMemberPath string
Bind the data field from the data source.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" valueMemberPath="population">
</ej-sunburstchart>
border object
Options for customizing the sunburst border.
border.color string
Border color of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" border.color="green" >
</ej-sunburstchart>
border.width number
Width of the Sunburst border.
Default Value
- 2
Example
<ej-sunburstchart id="sunburst" [border.width]="3" >
</ej-sunburstchart>
segmentBorder object
Options for customizing the sunburst segment border.
segmentBorder.color string
Segment Border color of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" selectionSettings.color="green">
</ej-sunburstchart>
segmentBorder.width number
Width of the Sunburst segment border.
Default Value
- 2
Example
<ej-sunburstchart id="sunburst" segmentBorder.width="2">
</ej-sunburstchart>
dataSource object
Specifies the dataSource to the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [dataSource]="dataSource">
</ej-sunburstchart>
palette string
Palette color for the data points.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [palette]=["#002e4d", "#005c99"]>
</ej-sunburstchart>
parentNode string
Parent node of the data points.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" parentNode="parentNode">
</ej-sunburstchart>
xName string
Name of the property in the datasource that contains x values.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" xName="xValue">
</ej-sunburstchart>
yName string
Name of the property in the datasource that contains y values.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" yName="yValue">
</ej-sunburstchart>
isResponsive boolean
Controls whether sunburst has to be responsive or not.
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [isResponsive]="true">
</ej-sunburstchart>
size object
Options to customize the Sunburst size.
size.height string
Height of the Sunburst.
Default Value
- ’’
Example
<ej-sunburstchart id="sunburst" [size.height]="20">
</ej-sunburstchart>
size.width string
Width of the Sunburst.
Default Value
- ’’
Example
<ej-sunburstchart id="sunburst" [size.width]="20">
</ej-sunburstchart>
visible boolean
Controls the visibility of sunburst.
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [visible]="true">
</ej-sunburstchart>
tooltip object
Options to customize the Sunburst tooltip.
tooltip.visible boolean
tooltip visibility of the Sunburst.
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [tooltip.visible]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [tooltip.border]="{color:'red'}">
</ej-sunburstchart>
tooltip.border.width number
Border width of the tooltip.
Default Value
- 5
Example
<ej-sunburstchart id="sunburst" [tooltip.border]="{width:2}">
</ej-sunburstchart>
tooltip.fill string
Fill color for the sunburst tooltip.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" tooltip.fill="green">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [tooltip.font]="{color:'blue'}">
</ej-sunburstchart>
tooltip.font.fontFamily string
Font Family for the tooltip.
Default Value
- “Segoe UI”
Example
<ej-sunburstchart id="sunburst" [tooltip.font]="{fontFamily:'Arial'}">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [tooltip.font]="{fontStyle:'bold'}">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [tooltip.font]="{fontWeight:'lighter'}">
</ej-sunburstchart>
tooltip.font.opacity number
Opacity for text in the tooltip.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [tooltip.font]="{opacity:0.5}">
</ej-sunburstchart>
tooltip.font.size string
Font size for text in the tooltip.
Default Value
- “12px”
Example
<ej-sunburstchart id="sunburst" [tooltip.font]="{size:'10px'}">
</ej-sunburstchart>
tooltip.template string
Custom template to the tooltip.
Default Value
- null
Example
<div id="Tooltip" style="display: none;">
<div id="value" style="background-color:red;padding-top:3px;padding-right:3px">
<div>
<label id="efpercentage" style="color:white">
Category: #point.x#
<br /> Value:#point.y#
</label>
</div>
</div>
</div>
<ej-sunburstchart id="sunburst" tooltip.template="Tooltip">
</ej-sunburstchart>
tooltip.format string
Setting the format for the data displayed in the tooltip
Default Value
- “#point.x# : #point.y#”
Example
<ej-sunburstchart id="sunburst" [tooltip.format]=" ">
</ej-sunburstchart>
tooltip.opacity number
Sets the opacity of the dispalyed tooltip
Default Value
- 0.95
Example
<ej-sunburstchart id="sunburst" [tooltip.opacity]="0.5">
</ej-sunburstchart>
points object
Options for customizing sunburst points.
points.x string
Points x value of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" points.x="xValue">
</ej-sunburstchart>
points.y number
Points y value of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" points.x="yValue">
</ej-sunburstchart>
points.text string
Points text of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" points.text="other">
</ej-sunburstchart>
points.fill string
Points fill color of the sunburst.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" points.fill="green">
</ej-sunburstchart>
startAngle number
Sunburst rendering will start from the specified value
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [startAngle]="90">
</ej-sunburstchart>
endAngle number
Sunburst rendering will end at the specified value
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [endAngle]="90">
</ej-sunburstchart>
radius number
Sunburst outer radius value
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [radius]="0.8">
</ej-sunburstchart>
innerRadius number
Sunburst inner radius value
Default Value
- 0.4
Example
<ej-sunburstchart id="sunburst" [innerRadius]="0.2">
</ej-sunburstchart>
dataLabelSettings object
Options to customize the Sunburst dataLabel.
dataLabelSettings.visible boolean
Datalabel visibility of the Sunburst.
Default Value
- false
Example
<ej-sunburstchart id="sunburst" [dataLabelSettings.visible]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" dataLabelSettings.labelRotationMode="normal">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [dataLabelSettings.font] ="{fontFamily:'Arial'}" >
</ej-sunburstchart>
dataLabelSettings.font.fontStyle enum
Font style of the data label.
Default Value
- “normal”. See FontStyle
Example
<ej-sunburstchart id="sunburst" [dataLabelSettings.font] ="{fontStyle:'Bold'}" >
</ej-sunburstchart>
dataLabelSettings.font.fontWeight enum
Font weight of the data label.
Default Value
- “regular”. See FontWeight
Example
<ej-sunburstchart id="sunburst" [dataLabelSettings.font] ="{fontWeight:'lighter'}" >
</ej-sunburstchart>
dataLabelSettings.font.opacity number
Opacity of the text.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [dataLabelSettings.font] ="{opacity:0.5}" >
</ej-sunburstchart>
dataLabelSettings.font.color string
Font color of the data label text.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" dataLabelSettings.font.color="green" >
</ej-sunburstchart>
dataLabelSettings.font.size string
Font size of the data label.
Default Value
- “12px”
Example
<ej-sunburstchart id="sunburst" [dataLabelSettings.font] ="{size:'12px'}" >
</ej-sunburstchart>
dataLabelSettings.template string
Custom template for datalabel
Default Value
- “null”
Example
<div id="item">
</div>
<ej-sunburstchart id="sunburst" dataLabelSettings.template="item">
</ej-sunburstchart>
dataLabelSettings.fill string
Fill color for the datalabel
Default Value
- null
Example
<ej-sunburstchart id="sunburst" dataLabelSettings.fill="green" >
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" dataLabelSettings.labelOverflowMode="hide">
</ej-sunburstchart>
title object
Options for customizing the title and subtitle of sunburst.
title.text string
Title text for sunburst
Default Value
- ””
Example
<ej-sunburstchart id="sunburst" title.text="Sunburst Chart">
</ej-sunburstchart>
title.visible string
Title text visibility for sunburst
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [title.visible]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" title.textAlignment="near">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [title.font]="{fontFamily:'Arial'}">
</ej-sunburstchart>
title.font.fontStyle enum
Font style for Sunburst title.
Default Value
- “Normal”. See FontStyle
Example
<ej-sunburstchart id="sunburst" [title.font]="{fontStyle:'bold'}">
</ej-sunburstchart>
title.font.fontWeight enum
Font weight for Sunburst title.
Default Value
- “Regular”. See FontWeight
Example
<ej-sunburstchart id="sunburst" [title.font]="{fontWeight:'lighter'}">
</ej-sunburstchart>
title.font.opacity number
Opacity of the Sunburst title.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [title.font]="{opacity:0.5}">
</ej-sunburstchart>
title.font.size string
Font size for Sunburst title.
Default Value
- “20px”
Example
<ej-sunburstchart id="sunburst" [title.font]="{size:'10px'}">
</ej-sunburstchart>
title.subtitle object
Options to customize the sub title of Sunburst.
title.subtitle.text string
Subtitle text for sunburst
Default Value
- ””
Example
<ej-sunburstchart id="sunburst" title.subtitle.text="Sunburst Subtitle">
</ej-sunburstchart>
title.subtitle.visible string
Sub title text visibility for sunburst
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [title.subtitle.visible]="true">
</ej-sunburstchart>
title.subtitle.textAlignment enum
Sub title text alignment
Default Value
- “far”. See TextAlignment
Example
<ej-sunburstchart id="sunburst" title.subtitle.textAlignment="far">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [title.subtitle.font]="{fontFamily:'Arial'}">
</ej-sunburstchart>
title.subtitle.font.fontStyle enum
Font style for sub title.
Default Value
- “Normal”. See FontStyle
Example
<ej-sunburstchart id="sunburst" [title.subtitle.font]="{fontStyle:'bold'}">
</ej-sunburstchart>
title.subtitle.font.fontWeight enum
Font weight for sub title.
Default Value
- “Regular”. See FontWeight
Example
<ej-sunburstchart id="sunburst" [title.subtitle.font]="{fontWeight:'lighter'}">
</ej-sunburstchart>
title.subtitle.font.opacity number
Opacity of the sub title.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [title.subtitle.font]="{opacity:0.5}">
</ej-sunburstchart>
title.subtitle.font.size string
Font size for sub title.
Default Value
- “12px”
Example
<ej-sunburstchart id="sunburst" [title.subtitle.font]="{size:'10px'}">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [highlightSettings.enable]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" highlightSettings.mode="child">
</ej-sunburstchart>
highlightSettings.color string
Color of the levels/point on highlight.
Default Value
- “red”
Example
<ej-sunburstchart id="sunburst" highlightSettings.color="green">
</ej-sunburstchart>
highlightSettings.opacity number
Opacity of the levels/point on highlight.
Default Value
- 0.5
Example
<ej-sunburstchart id="sunburst" [highlightSettings.opacity]="0.5">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [highlightSettings.type]="color">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [selectionSettings.enable]="true">
</ej-sunburstchart>
selectionSettings.mode enum
Specifies whether the levels or data point has to be selected.
Default Value
- “point”. See Mode
Example
<ej-sunburstchart id="sunburst" selectionSettings.mode="point">
</ej-sunburstchart>
selectionSettings.color string
Color of the levels/point on selection.
Default Value
- “green”
Example
<ej-sunburstchart id="sunburst" segmentBorder.width="2">
</ej-sunburstchart>
selectionSettings.opacity number
Opacity of the levels/point on selection.
Default Value
- 0.5
Example
<ej-sunburstchart id="sunburst" [selectionSettings.opacity]="0.5">
</ej-sunburstchart>
selectionSettings.type enum
Specifies whether the levels or data point has to be selected.
Default Value
- “opacity”. See Mode
Example
<ej-sunburstchart id="sunburst" [selectionSettings.type]="color">
</ej-sunburstchart>
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
this.Level = [
{ groupMemberPath: 'Country' },
];
<ej-sunburstchart id="sunburst" [levels]="level">
</ej-sunburstchart>
legend object
Options to customize the legend items and legend title.
legend.visible boolean
Visibility of the legend.
Default Value
- false
Example
<ej-sunburstchart id="sunburst" [legend.visible]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.clickAction="toggleSegmentSelection">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.alignment="far">
</ej-sunburstchart>
legend.border object
Options for customizing the legend border.
legend.border.color string
Border color of the legend.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [legend.border]="{color:'#FF0000'}">
</ej-sunburstchart>
legend.border.width number
Border width of the legend.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [legend.border]="{width:2}">
</ej-sunburstchart>
legend.columnCount number
Number of columns to arrange the legend items.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [legend.columnCount]="2">
</ej-sunburstchart>
legend.rowCount number
Number of rows to arrange the legend items.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" [legend.rowCount]="2">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [legend.font]="{fontFamily:'Arial'}">
</ej-sunburstchart>
legend.font.fontStyle enum
Font style for legend item text.
Default Value
- “Normal”. See FontStyle
Example
<ej-sunburstchart id="sunburst" [legend.font]="{fontStyle:'Bold'}">
</ej-sunburstchart>
legend.font.fontWeight enum
Font weight for legend item text.
Default Value
- “Regular”. See FontWeight
Example
<ej-sunburstchart id="sunburst" [legend.font]="{fontWeight:'lighter'}">
</ej-sunburstchart>
legend.font.size string
Font size for legend item text.
Default Value
- “12px”
Example
<ej-sunburstchart id="sunburst" [legend.font]="{size:'12px'}">
</ej-sunburstchart>
legend.itemPadding number
Gap or padding between the legend items.
Default Value
- 10
Example
<ej-sunburstchart id="sunburst" [legend.itemPadding]="5">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [legend.itemStyle]="{height:13}">
</ej-sunburstchart>
legend.itemStyle.width number
Width of the shape in legend items.
Default Value
- 10
Example
<ej-sunburstchart id="sunburst" [legend.itemStyle]="{width:13}">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [legend.location]="{x:20}">
</ej-sunburstchart>
legend.location.y number
Y value or vertical offset to position the legend.
Default Value
- 0
Example
<ej-sunburstchart id="sunburst" [legend.location]="{y:200}">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.position="top">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.shape="circle">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.size.height="100">
</ej-sunburstchart>
legend.size.width string
Width of the legend. Width can be specified in either pixel or percentage.
Default Value
- null
Example
<ej-sunburstchart id="sunburst" legend.size.width="100">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [legend.title.font]="{fontFamily:'Arial'}">
</ej-sunburstchart>
legend.title.font.fontStyle enum
Font style for legend title.
Default Value
- “normal”. See FontStyle
Example
<ej-sunburstchart id="sunburst" [legend.title.font]="{fontStyle:'lighter'}">
</ej-sunburstchart>
legend.title.font.fontWeight enum
Font weight for legend title.
Default Value
- “normal”. See FontWeight
Example
<ej-sunburstchart id="sunburst" [legend.title.font]="{fontWeight:'lighter'}">
</ej-sunburstchart>
legend.title.font.size string
Font size for legend title.
Default Value
- “12px”
Example
<ej-sunburstchart id="sunburst" [legend.title.font]="{size:'15px'}">
</ej-sunburstchart>
legend.title.visible string
Enables or disables the legend title.
Default Value
- true
Example
<ej-sunburstchart id="sunburst" [legend.title.visible]="true">
</ej-sunburstchart>
legend.title.text string
Text to be displayed in legend title.
Default Value
- ””
Example
<ej-sunburstchart id="sunburst" legend.title.text="Countries">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" legend.title.textAlignment="near">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" theme="azuredark">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [margin.left]="10">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [margin.right]="10">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [margin.top]="10">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" [margin.bottom]="10">
</ej-sunburstchart>
enableAnimation boolean
Enable/disable the animation for all the levels.
Default Value
- false
Example
<ej-sunburstchart id="sunburst" [enableAnimation]="true">
</ej-sunburstchart>
opacity number
Opacity of the levels.
Default Value
- 1
Example
<ej-sunburstchart id="sunburst" [opacity]="0.5">
</ej-sunburstchart>
zoomSettings object
Options for enable zooming feature of chart.
zoomSettings.enable boolean
Enables or disables zooming.
Default Value
- false
Example
<ej-sunburstchart id="sunburst" [zoomSettings.enable]="true">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" zoomSettings.toolbarHorizontalAlignment="center">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" zoomSettings.toolbarVerticalAlignment="middle">
</ej-sunburstchart>
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
<ej-sunburstchart id="sunburst" animationType="fadeIn" >
</ej-sunburstchart>
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
export class AppComponent {
redraw(){
this.sunburst.widget.redraw();
}
// Create sunburst instance
@ViewChild('animation') sunburst: EJComponents<any, any>;
}
$("#container").ejSparkline("redraw");
_destroy ()
destroy the sunburst
Returns: void
Example
export class AppComponent {
destroy(){
this.sunburst.widget.destroy();
}
// Create sunburst instance
@ViewChild('animation') sunburst: EJComponents<any, any>;
}
$("#container").ejSunburstChart("destroy");
Events
load
Fires before loading.
Example
onload(sender){
//Do something
}
<ej-sunburstchart id="events" (load)="onload($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Load event data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
preRender
Fires before rendering sunburst.
Example
onprerender(sender){
//Do something
}
<ej-sunburstchart id="events" (preRender)="onprerender($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | PreRender event data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
loaded
Fires after rendering sunburst.
Example
onloaded(sender){
//Do something
}
<ej-sunburstchart id="events" (loaded)="onloaded($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Loaded event data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
dataLabelRendering
Fires before rendering the datalabel
Example
ondrawlabelrendering(sender){
//Do something
}
<ej-sunburstchart id="events" (drawLabelRendering)="ondrawlabelrendering($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Sunburst datalabel data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
segmentRendering
Fires before rendering each segment
Example
onsegmentrendering(sender){
//Do something
}
<ej-sunburstchart id="events" (segmentRendering)="onsegmentrendering($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Sunburst datalabel data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
titleRendering
Fires before rendering sunburst title.
Example
ontitlerendering(sender){
//Do something
}
<ej-sunburstchart id="events" (titleRendering)="ontitlerendering($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Sunburst title data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
tooltipInitialize
Fires during initialization of tooltip.
Example
ontooltipinitialize(sender){
//Do something
}
<ej-sunburstchart id="events" (tooltipInitialize)="ontooltipinitialize($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Sunburst tooltip data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
pointRegionClick
Fires after clicking the point in sunburst
Example
onpointregionclick(sender){
//Do something
}
<ej-sunburstchart id="events" (pointRegionClick)="onpointregionclick($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Includes clicked points region data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
pointRegionMouseMove
Fires while moving the mouse over sunburst points
Example
onpointregionmousemove(sender){
//Do something
}
<ej-sunburstchart id="events" (pointRegionMouseMove)="onpointregionmousemove($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Includes data of mouse moved region |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
drillDownClick
Fires when clicking the point to perform drilldown.
Example
ondrilldownclick(sender){
//Do something
}
<ej-sunburstchart id="events" (drillDownClick)="ondrilldownclick($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Clicked point data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
drillDownBack
Fires when resetting drilldown points.
Example
ondrilldownback(sender){
//Do something
}
<ej-sunburstchart id="events" (drillDownBack)="ondrilldownback($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Drill down data of points |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |
drillDownReset
Fires after resetting the sunburst points
Example
ondrilldownreset(sender){
//Do something
}
<ej-sunburstchart id="events" (drillDownReset)="ondrilldownreset($event)">
</ej-sunburstchart>
Name | Type | Description |
---|---|---|
|
string | Drill down reset data |
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the sunburst model object |
|
string | Name of the event |