CircularChart3DModel API in JavaScript Circularchart3d API control

Interface for a class CircularChart3D

Properties

afterExport

EmitType<CircularChart3DAfterExportEventArgs>

Triggers after the export is completed.

beforeExport

EmitType<CircularChart3DExportEventArgs>

Triggers before the export starts.

beforePrint

EmitType<CircularChart3DPrintEventArgs>

Triggers before printing starts.

beforeResize

EmitType<CircularChart3DBeforeResizeEventArgs>

Triggered before resizing the chart.

circularChart3DMouseClick

EmitType<CircularChart3DMouseEventArgs>

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

circularChart3DMouseDown

EmitType<CircularChart3DMouseEventArgs>

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

circularChart3DMouseLeave

EmitType<CircularChart3DMouseEventArgs>

Triggered when the cursor leaves a circular 3D chart.

circularChart3DMouseMove

EmitType<CircularChart3DMouseEventArgs>

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

circularChart3DMouseUp

EmitType<CircularChart3DMouseEventArgs>

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

legendClick

EmitType<CircularChart3DLegendClickEventArgs>

Triggers after a legend is clicked.

legendRender

EmitType<CircularChart3DLegendRenderEventArgs>

Triggers before the legend is rendered.

load

EmitType<CircularChart3DLoadedEventArgs>

Triggered before the circular 3D is loaded.

loaded

EmitType<CircularChart3DLoadedEventArgs>

Triggers after the circular 3D chart is loaded.

pointClick

EmitType<CircularChart3DPointEventArgs>

Triggered when the user clicks on data points.

pointMove

EmitType<CircularChart3DPointEventArgs>

Triggered when the user hovers over data points.

pointRender

EmitType<CircularChart3DPointRenderEventArgs>

Triggers before each point for a series is rendered.

resized

EmitType<CircularChart3DResizeEventArgs>

Triggered after the chart is resized.

selectionComplete

EmitType<CircularChart3DSelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender

EmitType<CircularChart3DSeriesRenderEventArgs>

Triggers before a series is rendered.

textRender

EmitType<CircularChart3DTextRenderEventArgs>

Triggers before the data label for a series is rendered.

tooltipRender

EmitType<CircularChart3DTooltipRenderEventArgs>

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

CircularChart3DHighlightMode

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

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

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

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.

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

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.

subTitleStyle

FontModel

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

theme

CircularChart3DTheme

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

CircularChart3DTooltipSettingsModel

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.