ejSunburstChart

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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  background="grey" >   
    </ej-sunburstchart>

    valueMemberPath string

    Bind the data field from the data source.

    Default Value

    • null

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  border.color="green" >   
    </ej-sunburstchart>

    border.width number

    Width of the Sunburst border.

    Default Value

    • 2

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  selectionSettings.color="green">   
    </ej-sunburstchart>

    segmentBorder.width number

    Width of the Sunburst segment border.

    Default Value

    • 2

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  segmentBorder.width="2">   
    </ej-sunburstchart>

    dataSource object

    Specifies the dataSource to the sunburst.

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [dataSource]="dataSource">   
    </ej-sunburstchart>

    palette string

    Palette color for the data points.

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [palette]=["#002e4d", "#005c99"]>   
    </ej-sunburstchart>

    parentNode string

    Parent node of the data points.

    Default Value

    • null

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  yName="yValue">   
    </ej-sunburstchart>

    isResponsive boolean

    Controls whether sunburst has to be responsive or not.

    Default Value

    • true

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [size.height]="20">   
    </ej-sunburstchart>

    size.width string

    Width of the Sunburst.

    Default Value

    • ’’

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [size.width]="20">   
    </ej-sunburstchart>

    visible boolean

    Controls the visibility of sunburst.

    Default Value

    • true

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.border]="{color:'red'}">   
    </ej-sunburstchart>

    tooltip.border.width number

    Border width of the tooltip.

    Default Value

    • 5

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.border]="{width:2}">   
    </ej-sunburstchart>

    tooltip.fill string

    Fill color for the sunburst tooltip.

    Default Value

    • null

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.font]="{color:'blue'}">   
    </ej-sunburstchart>

    tooltip.font.fontFamily string

    Font Family for the tooltip.

    Default Value

    • “Segoe UI”

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.font]="{fontWeight:'lighter'}">   
    </ej-sunburstchart>

    tooltip.font.opacity number

    Opacity for text in the tooltip.

    Default Value

    • 1

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.font]="{size:'10px'}">   
    </ej-sunburstchart>

    tooltip.template string

    Custom template to the tooltip.

    Default Value

    • null

    Example

  • html
  • <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">
                        &nbsp;&nbsp;Category:&nbsp;#point.x#
                       <br />&nbsp;&nbsp;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

  • html
  • <ej-sunburstchart  id="sunburst"  [tooltip.format]=" ">   
    </ej-sunburstchart>

    tooltip.opacity number

    Sets the opacity of the dispalyed tooltip

    Default Value

    • 0.95

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  points.x="xValue">   
    </ej-sunburstchart>

    points.y number

    Points y value of the sunburst.

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  points.x="yValue">   
    </ej-sunburstchart>

    points.text string

    Points text of the sunburst.

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  points.text="other">   
    </ej-sunburstchart>

    points.fill string

    Points fill color of the sunburst.

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  points.fill="green">   
    </ej-sunburstchart>

    startAngle number

    Sunburst rendering will start from the specified value

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [startAngle]="90">   
    </ej-sunburstchart>

    endAngle number

    Sunburst rendering will end at the specified value

    Default Value

    • null

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [endAngle]="90">   
    </ej-sunburstchart>

    radius number

    Sunburst outer radius value

    Default Value

    • 1

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [radius]="0.8">   
    </ej-sunburstchart>

    innerRadius number

    Sunburst inner radius value

    Default Value

    • 0.4

    Example

  • html
  • <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

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [dataLabelSettings.font] ="{fontFamily:'Arial'}" >   
    </ej-sunburstchart>

    dataLabelSettings.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [dataLabelSettings.font] ="{fontStyle:'Bold'}" >   
    </ej-sunburstchart>

    dataLabelSettings.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [dataLabelSettings.font] ="{fontWeight:'lighter'}" >   
    </ej-sunburstchart>

    dataLabelSettings.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  dataLabelSettings.font.color="green" >   
    </ej-sunburstchart>

    dataLabelSettings.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [dataLabelSettings.font] ="{size:'12px'}" >   
    </ej-sunburstchart>

    dataLabelSettings.template string

    Custom template for datalabel

    Default Value

    • “null”

    Example

  • html
  • <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

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  title.text="Sunburst Chart">   
    </ej-sunburstchart>

    title.visible string

    Title text visibility for sunburst

    Default Value

    • true

    Example

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [title.font]="{fontFamily:'Arial'}">   
    </ej-sunburstchart>

    title.font.fontStyle enum

    Font style for Sunburst title.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [title.font]="{fontStyle:'bold'}">   
    </ej-sunburstchart>

    title.font.fontWeight enum

    Font weight for Sunburst title.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [title.font]="{fontWeight:'lighter'}">   
    </ej-sunburstchart>

    title.font.opacity number

    Opacity of the Sunburst title.

    Default Value

    • 1

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [title.font]="{opacity:0.5}">   
    </ej-sunburstchart>

    title.font.size string

    Font size for Sunburst title.

    Default Value

    • “20px”

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [title.subtitle.visible]="true">   
    </ej-sunburstchart>

    title.subtitle.textAlignment enum

    Sub title text alignment

    Default Value

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [title.subtitle.font]="{fontFamily:'Arial'}">   
    </ej-sunburstchart>

    title.subtitle.font.fontStyle enum

    Font style for sub title.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [title.subtitle.font]="{fontStyle:'bold'}">   
    </ej-sunburstchart>

    title.subtitle.font.fontWeight enum

    Font weight for sub title.

    Default Value

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  highlightSettings.mode="child">   
    </ej-sunburstchart>

    highlightSettings.color string

    Color of the levels/point on highlight.

    Default Value

    • “red”

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  highlightSettings.color="green">   
    </ej-sunburstchart>

    highlightSettings.opacity number

    Opacity of the levels/point on highlight.

    Default Value

    • 0.5

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  selectionSettings.mode="point">   
    </ej-sunburstchart>

    selectionSettings.color string

    Color of the levels/point on selection.

    Default Value

    • “green”

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  segmentBorder.width="2">   
    </ej-sunburstchart>

    selectionSettings.opacity number

    Opacity of the levels/point on selection.

    Default Value

    • 0.5

    Example

  • html
  • <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

  • html
  • <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

  • ts
  • this.Level = [
            { groupMemberPath: 'Country' },            
    ];
  • html
  • <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

  • html
  • <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

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.border]="{color:'#FF0000'}">   
    </ej-sunburstchart>

    legend.border.width number

    Border width of the legend.

    Default Value

    • 1

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.columnCount]="2">   
    </ej-sunburstchart>

    legend.rowCount number

    Number of rows to arrange the legend items.

    Default Value

    • null

    Example

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.font]="{fontFamily:'Arial'}">   
    </ej-sunburstchart>

    legend.font.fontStyle enum

    Font style for legend item text.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.font]="{fontStyle:'Bold'}">   
    </ej-sunburstchart>

    legend.font.fontWeight enum

    Font weight for legend item text.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.font]="{fontWeight:'lighter'}">   
    </ej-sunburstchart>

    legend.font.size string

    Font size for legend item text.

    Default Value

    • “12px”

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.font]="{size:'12px'}">   
    </ej-sunburstchart>

    legend.itemPadding number

    Gap or padding between the legend items.

    Default Value

    • 10

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

    Example

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.title.font]="{fontFamily:'Arial'}">   
    </ej-sunburstchart>

    legend.title.font.fontStyle enum

    Font style for legend title.

    Default Value

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.title.font]="{fontStyle:'lighter'}">   
    </ej-sunburstchart>

    legend.title.font.fontWeight enum

    Font weight for legend title.

    Default Value

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [legend.title.visible]="true">   
    </ej-sunburstchart>

    legend.title.text string

    Text to be displayed in legend title.

    Default Value

    • ””

    Example

  • html
  • <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

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <ej-sunburstchart  id="sunburst"  [margin.bottom]="10">   
    </ej-sunburstchart>

    enableAnimation boolean

    Enable/disable the animation for all the levels.

    Default Value

    • false

    Example

  • html
  • <ej-sunburstchart  id="sunburst"  [enableAnimation]="true">   
    </ej-sunburstchart>

    opacity number

    Opacity of the levels.

    Default Value

    • 1

    Example

  • html
  • <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

  • html
  • <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

    Example

  • html
  • <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

    Example

  • html
  • <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

    Example

  • html
  • <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

  • ts
  • export class AppComponent {
    
    redraw(){
              
         this.sunburst.widget.redraw();
    
    }
    
    // Create sunburst instance
    @ViewChild('animation') sunburst: EJComponents<any, any>;
    
    }
  • js
  • $("#container").ejSparkline("redraw");

    _destroy ()

    destroy the sunburst

    Returns: void

    Example

  • ts
  • export class AppComponent {
    
    destroy(){
              
         this.sunburst.widget.destroy();
    
    }
    
    // Create sunburst instance
    @ViewChild('animation') sunburst: EJComponents<any, any>;
    
    }
  • js
  • $("#container").ejSunburstChart("destroy");

    Events

    load

    Fires before loading.

    Example

  • ts
  • onload(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (load)="onload($event)">   
    </ej-sunburstchart>
    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

  • ts
  • onprerender(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (preRender)="onprerender($event)">   
    </ej-sunburstchart>
    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

  • ts
  • onloaded(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (loaded)="onloaded($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ondrawlabelrendering(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (drawLabelRendering)="ondrawlabelrendering($event)">   
    </ej-sunburstchart>
    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

  • ts
  • onsegmentrendering(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (segmentRendering)="onsegmentrendering($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ontitlerendering(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (titleRendering)="ontitlerendering($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ontooltipinitialize(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (tooltipInitialize)="ontooltipinitialize($event)">   
    </ej-sunburstchart>
    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

  • ts
  • onpointregionclick(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (pointRegionClick)="onpointregionclick($event)">   
    </ej-sunburstchart>
    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

  • ts
  • onpointregionmousemove(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (pointRegionMouseMove)="onpointregionmousemove($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ondrilldownclick(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (drillDownClick)="ondrilldownclick($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ondrilldownback(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (drillDownBack)="ondrilldownback($event)">   
    </ej-sunburstchart>
    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

  • ts
  • ondrilldownreset(sender){
         
         //Do something
    
    }
  • html
  • <ej-sunburstchart  id="events" (drillDownReset)="ondrilldownreset($event)">   
    </ej-sunburstchart>
    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