Represents react Circular 3D chart Component
<CircularChart3DComponent></CircularChart3DComponent>
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
string
The background image of the chart, specified as a URL link or the location of an image.
Defaults to null
Options for customizing the color and width of the circular 3D chart border.
The circularChartDataLabel3DModule
is used to manipulate and add data labels in the circular 3D chart.
The circularChartExport3DModule
Module is used to facilitate the export of the circular 3D chart.
The circularHighlight3DModule
is used to manipulate and add highlights to the circular 3D chart.
The circularChartLegend3DModule
is used to manipulate and add legend in the circular 3D chart.
The circularChartSelection3DModule
is used to manipulate and add selection in the circular 3D chart.
The circularChartTooltip3DModule
is used to manipulate and add tooltips in the circular 3D chart.
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 ”
number
Specifies the depth of the circular 3D chart.
Defaults to 50
boolean
If set true, enables the animation for circular 3D chart.
Defaults to true
boolean
Enables or disables the export feature in the circular 3D chart.
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enables or disables rotation in the circular 3D chart.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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
string
Defines the color for the highlighted data point.
Defaults to ”
Specifies whether a point has to be highlighted or not. Takes values: ‘None’ or ‘Point’.
Defaults to None
Specifies the highlight pattern for series or data points in the circular 3D chart. Options include:
Defaults to None
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
CircularChart3DLegendSettingsModel
Options for customizing the legend of the circular 3D chart.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Options to customize the left, right, top, and bottom margins of the circular 3D chart.
number
Defines the rotation angle for the circular 3D chart.
Defaults to 0
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 []
Specifies whether a point has to be selected or not. Takes values: ‘None’ or ‘Point’.
Defaults to None
Specifies the selection pattern for series or data points in the circular 3D chart. Options include:
Defaults to None
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.
string
Represents the subtitle for the circular 3D chart.
Defaults to null
Options for customizing the subtitle of the circular 3D Chart.
Specifies the theme for the circular 3D chart.
Defaults to ‘Material’
number
Defines the slope angle for the circular 3D chart.
Defaults to 0
string
Represents the title for the circular 3D chart.
Defaults to null
Options for customizing the title of the circular 3D chart.
CircularChart3DTooltipSettingsModel
Options for customizing the tooltip of the circular 3D chart.
boolean
Specifies whether a grouping separator should be used for numbers.
Defaults to false
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
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
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. |
Returns void
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
EmitType<CircularChart3DAfterExportEventArgs>
Triggers after the export is completed.
EmitType<CircularChart3DExportEventArgs>
Triggers before the export starts.
EmitType<CircularChart3DPrintEventArgs>
Triggers before printing starts.
EmitType<CircularChart3DBeforeResizeEventArgs>
Triggered before resizing the chart.
EmitType<CircularChart3DMouseEventArgs>
Triggered when the user clicks on a circular 3D chart.
EmitType<CircularChart3DMouseEventArgs>
Triggered when the mouse is pressed down on a circular 3D chart.
EmitType<CircularChart3DMouseEventArgs>
Triggered when the cursor leaves a circular 3D chart.
EmitType<CircularChart3DMouseEventArgs>
Triggered when the user hovers over a circular 3D chart.
EmitType<CircularChart3DMouseEventArgs>
Triggered when the mouse button is released on a circular 3D chart.
EmitType<CircularChart3DLegendClickEventArgs>
Triggers after a legend is clicked.
EmitType<CircularChart3DLegendRenderEventArgs>
Triggers before the legend is rendered.
EmitType<CircularChart3DLoadedEventArgs>
Triggered before the circular 3D is loaded.
EmitType<CircularChart3DLoadedEventArgs>
Triggers after the circular 3D chart is loaded.
EmitType<CircularChart3DPointEventArgs>
Triggered when the user clicks on data points.
EmitType<CircularChart3DPointEventArgs>
Triggered when the user hovers over data points.
EmitType<CircularChart3DPointRenderEventArgs>
Triggers before each point for a series is rendered.
EmitType<CircularChart3DResizeEventArgs>
Triggered after the chart is resized.
EmitType<CircularChart3DSelectionCompleteEventArgs>
Triggers after the selection is completed.
EmitType<CircularChart3DSeriesRenderEventArgs>
Triggers before a series is rendered.
EmitType<CircularChart3DTextRenderEventArgs>
Triggers before the data label for a series is rendered.
EmitType<CircularChart3DTooltipRenderEventArgs>
Triggered when the tooltip is ready to render on the screen.