Circular3D

Represents the circular 3D chart control.

<div id="container"/>
<script>
  let pie: Circular3D = new Circular3D({ });
  pie.appendTo("#container");
</script>

Properties

background

string

The background color of the circular 3D chart, which accepts a value in hex, rgba as a valid CSS color string.

Defaults to null

backgroundImage

string

The background image of the chart, specified as a URL link or the location of an image.

Defaults to null

border

BorderModel

Options for customizing the color and width of the circular 3D chart border.

circular3DDataLabelModule

Circular3DDataLabel

The circular3DDataLabelModule is used to manipulate and add data labels in the circular 3D chart.

circular3DExportModule

Circular3DExport

The circular3DExportModule Module is used to facilitate the export of the circular 3D chart.

circular3DHighlightModule

Circular3DHighlight

The circular3DHighlightModule is used to manipulate and add highlights to the circular 3D chart.

circular3DLegendModule

Circular3DLegend

The circular3DLegendModule is used to manipulate and add legend in the circular 3D chart.

circular3DSelectionModule

Circular3DSelection

The circular3DSelectionModule is used to manipulate and add selection in the circular 3D chart.

circular3DTooltipModule

Circular3DTooltip

The circular3DTooltipModule is used to manipulate and add tooltips in the circular 3D chart.

dataSource

Object | DataManager

Specifies the dataSource for the circular 3D chart. It can be an array of JSON objects or an instance of DataManager.

<div id='Pie'></div>

let dataManager: DataManager = new DataManager({
        url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);
let pie: Circular3D = new Circular3D({
...
    dataSource: dataManager,
    series: [{
       xName: 'Id',
       yName: 'Estimate',
       query: query
   }],
...
});
pie.appendTo('#Pie');

Defaults to ”

depth

number

Specifies the depth of the circular 3D chart.

Defaults to 50

enableAnimation

boolean

If set true, enables the animation for circular 3D chart.

Defaults to true

enableExport

boolean

Enables or disables the export feature in the circular 3D chart.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRotation

boolean

Enables or disables rotation in the circular 3D chart.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height

string

The height of the chart as a string, accepting input as both ‘100px’ or ‘100%‘. If specified as ‘100%’, the chart renders to the full height of its parent element.

Defaults to null

highlightColor

string

Defines the color for the highlighted data point.

Defaults to ”

highlightMode

Circular3DHighlightMode

Specifies whether a point has to be highlighted or not. Takes values: ‘None’ or ‘Point’.

• None: Disables the highlight.
• Point: Highlights a point.

Defaults to None

highlightPattern

SelectionPattern

Specifies the highlight pattern for series or data points in the circular 3D chart. Options include:

• none: No specific selection pattern.
• chessboard: Chessboard pattern.
• dots: Dots pattern.
• diagonalForward: Diagonal forward pattern.
• crosshatch: Crosshatch pattern.
• pacman: Pacman pattern.
• diagonalbackward: Diagonal backward pattern.
• grid: Grid pattern.
• turquoise: Turquoise pattern.
• star: Star pattern.
• triangle: Triangle pattern.
• circle: Circle pattern.
• tile: Tile pattern.
• horizontaldash: Horizontal dash pattern.
• verticaldash: Vertical dash pattern.
• rectangle: Rectangle pattern.
• box: Box pattern.
• verticalstripe: Vertical stripe pattern.
• horizontalstripe: Horizontal stripe pattern.
• bubble: Bubble pattern.

Defaults to None

isMultiSelect

boolean

Enables or disables multi-selection in the circular 3D chart. If set true, enables the multi selection in circular 3D chart. It requires selectionMode to be Point.

Defaults to false

legendSettings

Circular3DLegendSettingsModel

Options for customizing the legend of the circular 3D chart.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

margin

MarginModel

Options to customize the left, right, top, and bottom margins of the circular 3D chart.

rotation

number

Defines the rotation angle for the circular 3D chart.

Defaults to 0

selectedDataIndexes

IndexesModel[]

Specifies the point indexes to be selected while loading a circular 3D chart. It requires selectionMode to be Point.

<div id='Pie'></div>

let pie: Circular3D = new Circular3D({
...
  selectionMode: 'Point',
  selectedDataIndexes: [ { series: 0, point: 1},
                         { series: 2, point: 3} ],
...
});
pie.appendTo('#Pie');

Defaults to []

selectionMode

Circular3DSelectionMode

Specifies whether a point has to be selected or not. Takes values: ‘None’ or ‘Point’.

• None: Disables the selection.
• Point: Selects a point.

Defaults to None

selectionPattern

SelectionPattern

Specifies the selection pattern for series or data points in the circular 3D chart. Options include:

• none: No specific selection pattern.
• chessboard: Chessboard pattern.
• dots: Dots pattern.
• diagonalForward: Diagonal forward pattern.
• crosshatch: Crosshatch pattern.
• pacman: Pacman pattern.
• diagonalbackward: Diagonal backward pattern.
• grid: Grid pattern.
• turquoise: Turquoise pattern.
• star: Star pattern.
• triangle: Triangle pattern.
• circle: Circle pattern.
• tile: Tile pattern.
• horizontaldash: Horizontal dash pattern.
• verticaldash: Vertical dash pattern.
• rectangle: Rectangle pattern.
• box: Box pattern.
• verticalstripe: Vertical stripe pattern.
• horizontalstripe: Horizontal stripe pattern.
• bubble: Bubble pattern.

Defaults to None

series

Circular3DSeriesModel[]

The configuration for series in circular 3D chart. The series property allows you to define an array of circular 3D series, each with its own settings and data.

subTitle

string

Represents the subtitle for the circular 3D chart.

Defaults to null

subTitleStyle

FontModel

Options for customizing the subtitle of the circular 3D Chart.

theme

Circular3DTheme

Specifies the theme for the circular 3D chart.

Defaults to ‘Material’

tilt

number

Defines the slope angle for the circular 3D chart.

Defaults to 0

title

string

Represents the title for the circular 3D chart.

Defaults to null

titleStyle

FontModel

Options for customizing the title of the circular 3D chart.

tooltip

Chart3DTooltipSettingsModel

Options for customizing the tooltip of the circular 3D chart.

useGroupingSeparator

boolean

Specifies whether a grouping separator should be used for numbers.

Defaults to false

width

string

The width of the chart as a string, accepting input as both ‘100px’ or ‘100%’ If specified as ‘100%’, the chart renders to the full width of its parent element.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

animationRect

Initiates animation for the circular 3D series.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

calculateBounds

Method to calculate bounds for the circular 3D chart.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

defaultLabelBound

Sets the default label bounds for the specified circular 3D chart series based on its circular bounds.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

export

Export method for the circular 3D chart.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getModuleName

Gets the module name for the circular 3D chart. @private

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

getSeriesBound

Calculates and returns the bounding rectangle (Rect) for the specified circular 3D chart series.

Returns Rect

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

highlightAnimation

Performs a highlight animation on the specified HTML element with the given duration and starting opacity.

Returns void

pdfExport

Export the chart on the page to a PDF document.

Returns void

print

Handles the print method for the circular 3D chart control.

Returns void

processSelection

Processes the selection in the circular 3D chart.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

stopElementAnimation

Stops the animation for the specified HTML element in the circular 3D chart.

Returns void

titleTooltip

Displays a tooltip for the given event at the specified coordinates.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

afterExport

EmitType<Circular3DAfterExportEventArgs>

Triggers after the export is completed.

beforeExport

EmitType<Circular3DExportEventArgs>

Triggers before the export starts.

beforePrint

EmitType<Circular3DPrintEventArgs>

Triggers before printing starts.

beforeResize

EmitType<Circular3DBeforeResizeEventArgs>

Triggered before resizing the chart.

circular3DMouseClick

EmitType<Circular3DMouseEventArgs>

Triggered when the user clicks on a circular 3D chart.

circular3DMouseDown

EmitType<Circular3DMouseEventArgs>

Triggered when the mouse is pressed down on a circular 3D chart.

circular3DMouseLeave

EmitType<Circular3DMouseEventArgs>

Triggered when the cursor leaves a circular 3D chart.

circular3DMouseMove

EmitType<Circular3DMouseEventArgs>

Triggered when the user hovers over a circular 3D chart.

circular3DMouseUp

EmitType<Circular3DMouseEventArgs>

Triggered when the mouse button is released on a circular 3D chart.

legendClick

EmitType<Circular3DLegendClickEventArgs>

Triggers after a legend is clicked.

legendRender

EmitType<Circular3DLegendRenderEventArgs>

Triggers before the legend is rendered.

load

EmitType<Circular3DLoadedEventArgs>

Triggered before the circular 3D is loaded.

loaded

EmitType<Circular3DLoadedEventArgs>

Triggers after the circular 3D chart is loaded.

pointClick

EmitType<Circular3DPointEventArgs>

Triggered when the user clicks on data points.

pointMove

EmitType<Circular3DPointEventArgs>

Triggered when the user hovers over data points.

pointRender

EmitType<Circular3DPointRenderEventArgs>

Triggers before each point for a series is rendered.

resized

EmitType<Circular3DResizeEventArgs>

Triggered after the chart is resized.

selectionComplete

EmitType<Circular3DSelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender

EmitType<Circular3DSeriesRenderEventArgs>

Triggers before a series is rendered.

textRender

EmitType<Circular3DTextRenderEventArgs>

Triggers before the data label for a series is rendered.

tooltipRender

EmitType<Circular3DTooltipRenderEventArgs>

Triggered when the tooltip is ready to render on the screen.