Chart3DComponent

Represents Vuejs 3D Chart Component

<ejs-chart3d></ejs-chart3d>

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

Returns void

createChartSvg

Method to create SVG element.

Returns void

destroy

To destroy the widget.

Returns void

export

Export method for the chart.

Returns void

print

Prints the chart in the page.

Returns void

removeSeries

Removes a series 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.