CircularChart3DComponent

23 Sep 202510 minutes to read

CircularChart3D Component

<ejs-circularchart3d></ejs-circularchart3d>

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.

circularChartDataLabel3DModule CircularChartDataLabel3D

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

circularChartExport3DModule CircularChartExport3D

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

circularChartHighlight3DModule CircularChartHighlight3D

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

circularChartLegend3DModule CircularChartLegend3D

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

circularChartSelection3DModule CircularChartSelection3D

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

circularChartTooltip3DModule CircularChartTooltip3D

The circularChartTooltip3DModule 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: CircularChart3D = new CircularChart3D({
...
    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 CircularChart3DHighlightMode

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 CircularChart3DLegendSettingsModel

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: CircularChart3D = new CircularChart3D({
...
  selectionMode: 'Point',
  selectedDataIndexes: [ { series: 0, point: 1},
                         { series: 2, point: 3} ],
...
});
pie.appendTo('#Pie');

Defaults to []

selectionMode CircularChart3DSelectionMode

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 CircularChart3DSeriesModel[]

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 CircularChart3DTheme

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

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

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)	`CircularChart3D[]`	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.