Circular3DComponent

23 Sep 202514 minutes to read

Circular3D Component

<ejs-circular3d></ejs-circular3d>

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.

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

animationRect

Initiates animation for the circular 3D series.

Parameter	Type	Description
slice	`Element`	Specifies the slice element to animate.
series	`Circular3DSeries`	Specifies the circular 3D chart series.

Returns void

calculateBounds

Method to calculate bounds for the circular 3D chart.

Returns void

defaultLabelBound

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

Parameter	Type	Description
series	`Circular3DSeries`	The Circular3DSeries for which to set the default label bounds.

Returns void

export

Export method for the circular 3D chart.

Parameter	Type	Description
type	`ExportType`	Specifies the type of the image file (PNG, JPEG, SVG).
fileName	`string`	Specifies the name of the exported image file.

Returns void

getModuleName

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

Returns string

getSeriesBound

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

Parameter	Type	Description
series	`Circular3DSeries`	The Circular3DSeries for which to calculate the bounding rectangle.

Returns Rect

highlightAnimation

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

Parameter	Type	Description
element	`HTMLElement`	The HTML element to animate.
duration	`number`	The duration of the animation in milliseconds.
startOpacity	`number`	The starting opacity value for the animation.

Returns void

pdfExport

Export the chart on the page to a PDF document.

Parameter	Type	Description
fileName	`string`	The name of the exported file.
orientation (optional)	`PdfPageOrientation`	Page orientation (portrait or landscape).
controls (optional)	`Circular3D[]`	Array of controls to be exported.
width (optional)	`number`	The width of the exported chart.
height (optional)	`number`	The height of the exported chart.
isVertical (optional)	`boolean`	Export the chart vertically or horizontally.
header (optional)	`IPDFArgs`	Text to appear at the top of the exported PDF document.
footer (optional)	`IPDFArgs`	Text to appear at the bottom of the exported PDF document.
exportToMultiplePage (optional)	`boolean`	Export the chart to multiple PDF pages.

Returns void

print

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

Parameter	Type	Description
id (optional)	`string[]` \| `string` \| `Element`	Specifies the element to print.

Returns void

processSelection

Processes the selection in the circular 3D chart.

Returns void

stopElementAnimation

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

Parameter	Type	Description
element	`HTMLElement`	The HTML element for which the animation should be stopped.

Returns void

titleTooltip

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

Parameter	Type	Description
event	`Event`	The event triggering the tooltip display.
x	`number`	The x-coordinate for the tooltip position.
y	`number`	The y-coordinate for the tooltip position.
isTouch (optional)	`boolean`	Optional parameter indicating whether the event is a touch event. Defaults to false if not provided.