CircularChart3DComponent

Represents react Circular 3D chart Component

<CircularChart3DComponent></CircularChart3DComponent>

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.

tooltip

CircularChart3DTooltipSettingsModel

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.

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

Events

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.