Chart3DModel API in Vue Chart3d API component

Interface for a class Chart3D

Properties

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.

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.

backgroundImage

string

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

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.

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');

depth

number

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

description

string

Description for chart.

enableExport

boolean

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

enablePersistence

boolean

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

enableRotation

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableSideBySidePlacement

boolean

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

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.

highlightColor

string

Defines the color for the highlighted data point.

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

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.

isMultiSelect

boolean

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

isTransposed

boolean

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

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

margin

MarginModel

Options to customize left, right, top and bottom margins of the chart.

palettes

string[]

Palette for the chart series.

perspectiveAngle

number

Defines the perspective angle for the 3D chart.

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.

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');

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

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.

series

Chart3DSeriesModel[]

The configuration for series in the chart.

subTitle

string

SubTitle of the chart.

subTitleStyle

TitleSettingsModel

Options for customizing the Subtitle of the Chart.

theme

ChartTheme

Specifies the theme for the chart.

tilt

number

Defines the slope angle for the 3D chart.

title

string

Title of the chart

titleStyle

TitleSettingsModel

Options for customizing the title of the Chart.

tooltip

Chart3DTooltipSettingsModel

The chart tooltip configuration options.

useGroupingSeparator

boolean

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

wallColor

string

Represents the color of the 3D wall.

wallSize

number

Defines the width of the 3D chart wall.

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.