Circular3DModel

23 Sep 20257 minutes to read

Interface for a class Circular3D

Properties

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.

background string

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

backgroundImage string

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

border BorderModel

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

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');

depth number

Specifies the depth of the circular 3D chart.

enableAnimation boolean

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

enableExport boolean

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

enablePersistence boolean

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

enableRotation boolean

Enables or disables rotation in the circular 3D chart.

enableRtl boolean

Enable or disable rendering component in right to left direction.

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.

highlightColor string

Defines the color for the highlighted data point.

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.

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.

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.

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’.

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.

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');

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.

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.

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.

subTitleStyle FontModel

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

theme Circular3DTheme

Specifies the theme for the circular 3D chart.

tilt number

Defines the slope angle for the circular 3D chart.

title string

Represents the title for the circular 3D chart.

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.

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.