Chart3DModel

23 Sep 20258 minutes to read

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.