Chart3DComponent

23 Sep 202511 minutes to read

3D Chart Component

<ejschart3d></ejschart3d>

Properties

axes Chart3DAxisModel[]

Secondary axis collection for the chart.

background string

The background color of the chart that accepts value in hex and rgba as a valid CSS color string.

Defaults to null

backgroundImage string

The background image of the chart that accepts value in string as url link or location of an image.

Defaults to null

border BorderModel

Options for customizing the color and width of the chart border.

columns Chart3DColumnModel[]

Options to split chart into multiple plotting areas vertically.
Each object in the collection represents a plotting area in the chart.

dataLabel3DModule DataLabel3D

The dataLabel3DModule is used to manipulate and add data label to the series.

dataSource Object|DataManager

Specifies the DataSource for the chart. It can be an array of JSON objects or an instance of DataManager.

<div id='Chart'></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 chart3D: Chart3D = new Chart3D({
...
 dataSource:dataManager,
  series: [{
       xName: 'Id',
       yName: 'Estimate',
       query: query
   }],
...
});
chart3D.appendTo('#Chart');

Defaults to ’’

depth number

Depth of the 3D Chart from front view of the series to the background wall.

Defaults to 50

description string

Description for chart.

Defaults to null

enableExport boolean

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

Defaults to false

enablePersistence boolean

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

Defaults to false

enableRotation boolean

If set true, enables the rotation in the 3D chart.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSideBySidePlacement boolean

To enable the side by side placing the points for column type series.

Defaults to true

export3DModule Export3D

The Export Module is used to export chart.

height string

The height of the chart as a string accepts input both as ‘100px’ or ‘100%’.
If specified as ‘100%, chart renders to the full height of its parent element.

Defaults to null

highlight3DModule Highlight3D

The highlight3DModule is used to manipulate and add highlight to the chart.

highlightColor string

Defines the color for the highlighted data point.

Defaults to ’’

highlightMode HighlightMode

Specifies whether a series or data point should be highlighted. The options are:

  • none: Disables the highlight.
  • series: highlight a series.
  • point: highlight a point.
  • cluster: highlight a cluster of point

Defaults to None

highlightPattern SelectionPattern

Specifies whether series or data point has to be selected. They are,

  • none: sets none as highlighting pattern.
  • chessboard: sets chess board as highlighting pattern.
  • dots: sets dots as highlighting pattern.
  • diagonalForward: sets diagonal forward as highlighting pattern.
  • crosshatch: sets crosshatch as highlighting pattern.
  • pacman: sets pacman highlighting pattern.
  • diagonalbackward: sets diagonal backward as highlighting pattern.
  • grid: sets grid as highlighting pattern.
  • turquoise: sets turquoise as highlighting pattern.
  • star: sets star as highlighting pattern.
  • triangle: sets triangle as highlighting pattern.
  • circle: sets circle as highlighting pattern.
  • tile: sets tile as highlighting pattern.
  • horizontaldash: sets horizontal dash as highlighting pattern.
  • verticaldash: sets vertical dash as highlighting pattern.
  • rectangle: sets rectangle as highlighting pattern.
  • box: sets box as highlighting pattern.
  • verticalstripe: sets vertical stripe as highlighting pattern.
  • horizontalstripe: sets horizontal stripe as highlighting pattern.
  • bubble: sets bubble as highlighting pattern.

Defaults to None

isMultiSelect boolean

If set true, enables the multi selection in chart. It requires selectionMode to be Point Series or Cluster.

Defaults to false

isTransposed boolean

It specifies whether the chart should be render in transposed manner or not.

Defaults to false

legendSettings Chart3DLegendSettingsModel

The chart legend configuration options.

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 left, right, top and bottom margins of the chart.

palettes string[]

Palette for the chart series.

Defaults to []

perspectiveAngle number

Defines the perspective angle for the 3D chart.

Defaults to 90

primaryXAxis Chart3DAxisModel

Options to configure the horizontal axis.

primaryYAxis Chart3DAxisModel

Options to configure the vertical axis.

rotation number

Defines the rotating angle for the 3D chart.

Defaults to 0

rows Chart3DRowModel[]

Options to split Chart into multiple plotting areas horizontally.
Each object in the collection represents a plotting area in the Chart.

selectedDataIndexes IndexesModel[]

Specifies the point indexes to be selected while loading a chart.
It requires selectionMode or highlightMode to be Point | Series | or Cluster.

<div id='Chart'></div>
let chart3D: Chart3D = new Chart3D({
...
  selectionMode: 'Point',
  selectedDataIndexes: [ { series: 0, point: 1},
                         { series: 2, point: 3} ],
...
});
chart3D.appendTo('#Chart');

Defaults to []

selection3DModule Selection3D

The selection3DModule is used to manipulate and add selection to the chart.

selectionMode Chart3DSelectionMode

Specifies whether a series or data point should be highlighted. The options are:

  • none: Disables the selection.
  • series: selects a series.
  • point: selects a point.
  • cluster: selects a cluster of point

Defaults to None

selectionPattern SelectionPattern

Specifies whether series or data point has to be selected. They are,

  • none: sets none as selecting pattern.
  • chessboard: sets chess board as selecting pattern.
  • dots: sets dots as selecting pattern.
  • diagonalForward: sets diagonal forward as selecting pattern.
  • crosshatch: sets crosshatch as selecting pattern.
  • pacman: sets pacman selecting pattern.
  • diagonalbackward: sets diagonal backward as selecting pattern.
  • grid: sets grid as selecting pattern.
  • turquoise: sets turquoise as selecting pattern.
  • star: sets star as selecting pattern.
  • triangle: sets triangle as selecting pattern.
  • circle: sets circle as selecting pattern.
  • tile: sets tile as selecting pattern.
  • horizontaldash: sets horizontal dash as selecting pattern.
  • verticaldash: sets vertical dash as selecting pattern.
  • rectangle: sets rectangle as selecting pattern.
  • box: sets box as selecting pattern.
  • verticalstripe: sets vertical stripe as selecting pattern.
  • horizontalstripe: sets horizontal stripe as selecting pattern.
  • bubble: sets bubble as selecting pattern.

Defaults to None

series Chart3DSeriesModel[]

The configuration for series in the chart.

subTitle string

SubTitle of the chart.

Defaults to ’’

subTitleStyle TitleSettingsModel

Options for customizing the Subtitle of the Chart.

theme ChartTheme

Specifies the theme for the chart.

Defaults to ‘Bootstrap5’

tilt number

Defines the slope angle for the 3D chart.

Defaults to 0

title string

Title of the chart

Defaults to ’’

titleStyle TitleSettingsModel

Options for customizing the title of the Chart.

tooltip Chart3DTooltipSettingsModel

The chart tooltip configuration options.

tooltip3DModule Tooltip3D

The tooltip3DModule is used to manipulate and add tooltip to the series.

useGroupingSeparator boolean

Specifies whether a grouping separator should be used for a number.

Defaults to false

wallColor string

Represents the color of the 3D wall.

Defaults to null

wallSize number

Defines the width of the 3D chart wall.

Defaults to 2

width string

The width of the chart as a string accepts input as both like ‘100px’ or ‘100%’.
If specified as ‘100%, chart renders to the full width of its parent element.

Defaults to null

Methods

addSeries

Adds new series to the chart

Parameter Type Description
seriesCollection Chart3DSeriesModel[] The series collection to be added to the chart.

Returns void

createChartSvg

Method to create SVG element.

Returns void

destroy

To destroy the widget.

Returns void

export

Export method for the chart.

Parameter Type Description
type ExportType Specifies the type of the export.
fileName string Specifies the file name of the exported file.

Returns void

print

Prints the chart in the page.

Parameter Type Description
id (optional) string[] | string | Element The id of the chart to be printed on the page.

Returns void

removeSeries

Removes a series from the chart

Parameter Type Description
index number The index of the series to be removed from the chart.

Returns void

Events

afterExport EmitType<IAfterExportEventArgs>

Triggers after the export completed.

axisLabelRender EmitType<Chart3DAxisLabelRenderEventArgs>

Triggers before each axis label is rendered.

beforeExport EmitType<Chart3DExportEventArgs>

Triggers before the export gets started.

beforePrint EmitType<Chart3DPrintEventArgs>

Triggers before the prints gets started.

beforeResize EmitType<Chart3DBeforeResizeEventArgs>

Triggers before resizing of chart

chart3DMouseClick EmitType<Chart3DMouseEventArgs>

Triggered when the user clicks on a 3D chart.

chart3DMouseDown EmitType<Chart3DMouseEventArgs>

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

chart3DMouseLeave EmitType<Chart3DMouseEventArgs>

Triggered when the cursor leaves a 3D chart.

chart3DMouseMove EmitType<Chart3DMouseEventArgs>

Triggered when the user hovers over a 3D chart.

chart3DMouseUp EmitType<Chart3DMouseEventArgs>

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

legendClick EmitType<Chart3DLegendClickEventArgs>

Triggered when the user clicks on the legend.

legendRender EmitType<Chart3DLegendRenderEventArgs>

Triggered when the legend is ready to render on the screen.

load EmitType<Chart3DLoadedEventArgs>

Triggered before the chart is loaded.

loaded EmitType<Chart3DLoadedEventArgs>

Triggered after the chart is loaded.

pointClick EmitType<Chart3DPointEventArgs>

Triggered when the user clicks on data points.

pointMove EmitType<Chart3DPointEventArgs>

Triggered when the user hovers over data points.

pointRender EmitType<Chart3DPointRenderEventArgs>

Triggered when the data point is ready to render on the screen.

resized EmitType<Chart3DResizeEventArgs>

Triggers after resizing of chart.

selectionComplete EmitType<Chart3DSelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender EmitType<Chart3DSeriesRenderEventArgs>

Triggered when the series is ready to render on the screen.

textRender EmitType<Chart3DTextRenderEventArgs>

Triggered when the data label is ready to render on the screen.

tooltipRender EmitType<Chart3DTooltipRenderEventArgs>

Triggered when the tooltip is ready to render on the screen.