The seriesGroups property is used to describe all series displayed on the chart. smartChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns. seriesGroups is an array of objects where each object represents one group.

Properties

bands

dataSource

depth

bands[]

Optional color bands dislayed in the chart's plot area.

Properties

colorstring | null

Color used to fill the area between the minValue and the maxValue.

Get the color property.

 const threedchart = document.querySelector('smart-3d-chart');

 let color = threedchart.seriesGroups[0].bands[0].color;

lineColorstring | null

Band line color.

Get the lineColor property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineColor = threedchart.seriesGroups[0].bands[0].lineColor;

lineWidthstring | number | null

Band line width.

Get the lineWidth property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineWidth = threedchart.seriesGroups[0].bands[0].lineWidth;

maxValueany

End value of the color band.

Default value

NaN

Get the maxValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let maxValue = threedchart.seriesGroups[0].bands[0].maxValue;

minValueany

Start value of the color band.

Default value

NaN

Get the minValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let minValue = threedchart.seriesGroups[0].bands[0].minValue;

opacitynumber

Fraction indicating the fill opacity.

Default value

Get the opacity property.

 const threedchart = document.querySelector('smart-3d-chart');

 let opacity = threedchart.seriesGroups[0].bands[0].opacity;

Get the bands property.

 const threedchart = document.querySelector('smart-3d-chart');

 let bands = threedchart.seriesGroups[0].bands;

dataSourceany

Determines the data source of the serie

Get the dataSource property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataSource = threedchart.seriesGroups[0].dataSource;

depthnumber | string

Sets the Z-axis width of the series group. Can be set as number or percetage of the slot's width.

Default value

Get the depth property.

 const threedchart = document.querySelector('smart-3d-chart');

 let depth = threedchart.seriesGroups[0].depth;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format series labels.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.seriesGroups[0].formatFunction;

formatSettingsobject

Object describing the format settings of series labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.seriesGroups[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.seriesGroups[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.seriesGroups[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.seriesGroups[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.seriesGroups[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.seriesGroups[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.seriesGroups[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.seriesGroups[0].formatSettings;

opacitynumber

Sets the opacity of the series group.

Default value

Get the opacity property.

 const threedchart = document.querySelector('smart-3d-chart');

 let opacity = threedchart.seriesGroups[0].opacity;

series[]

An array of chart series.

colorFunctionfunction | null

A custom function that returns the color of a data point. The function will receive the following parameters: dataValue, itemIndex, serie, group. The implementation of the function can return a single color which will be used as a fillColor and the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.

Get the colorFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let colorFunction = threedchart.seriesGroups[0].series[0].colorFunction;

dataFieldstring

Name of the field in the data source.

Default value

"null"

Get the dataField property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataField = threedchart.seriesGroups[0].series[0].dataField;

dataFieldClosestring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldClose property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldClose = threedchart.seriesGroups[0].series[0].dataFieldClose;

dataFieldHighstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldHigh property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldHigh = threedchart.seriesGroups[0].series[0].dataFieldHigh;

dataFieldLowstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldLow property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldLow = threedchart.seriesGroups[0].series[0].dataFieldLow;

dataFieldOpenstring

Data field used in candlestcik and ohlc series.

Default value

"null"

Get the dataFieldOpen property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldOpen = threedchart.seriesGroups[0].series[0].dataFieldOpen;

dataFieldFromstring

Data field used in in range column series as a start data field.

Default value

"null"

Get the dataFieldFrom property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldFrom = threedchart.seriesGroups[0].series[0].dataFieldFrom;

dataFieldTostring

Data field used in range column series as an end data field.

Default value

"null"

Get the dataFieldTo property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataFieldTo = threedchart.seriesGroups[0].series[0].dataFieldTo;

radiusDataFieldstring

Data field used in bubble series.

Default value

"null"

Get the radiusDataField property.

 const threedchart = document.querySelector('smart-3d-chart');

 let radiusDataField = threedchart.seriesGroups[0].series[0].radiusDataField;

displayTextstring

Name to display for this serie.

Default value

"null"

Get the displayText property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayText = threedchart.seriesGroups[0].series[0].displayText;

displayTextClosestring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextClose property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayTextClose = threedchart.seriesGroups[0].series[0].displayTextClose;

displayTextHighstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextHigh property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayTextHigh = threedchart.seriesGroups[0].series[0].displayTextHigh;

displayTextLowstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextLow property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayTextLow = threedchart.seriesGroups[0].series[0].displayTextLow;

displayTextOpenstring

Name to display for candlestick and ohlc series.

Default value

"null"

Get the displayTextOpen property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayTextOpen = threedchart.seriesGroups[0].series[0].displayTextOpen;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.seriesGroups[0].series[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.seriesGroups[0].series[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.seriesGroups[0].series[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.seriesGroups[0].series[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.seriesGroups[0].series[0].formatSettings;

summarystring

Specifies the summary of the series group.

Default value

Get the summary property.

 const threedchart = document.querySelector('smart-3d-chart');

 let summary = threedchart.seriesGroups[0].series[0].summary;

endAnglenumber

Maximum angle in a pie, donut, polar and spider series.

Default value

360

Get the endAngle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let endAngle = threedchart.seriesGroups[0].series[0].endAngle;

initialAnglenumber

Initial angle in pie and donut series.

Default value

Get the initialAngle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let initialAngle = threedchart.seriesGroups[0].series[0].initialAngle;

innerRadiusnumber

Inner radius of donut series in pixels or percents.

Default value

Get the innerRadius property.

 const threedchart = document.querySelector('smart-3d-chart');

 let innerRadius = threedchart.seriesGroups[0].series[0].innerRadius;

labelsobject

Object describing the labels properties of the axis.

Default value

null

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let angle = threedchart.seriesGroups[0].series[0].angle;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the labels.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.seriesGroups[0].series[0].formatFunction;

formatSettingsobject

Object describing the format settings of the labels.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.seriesGroups[0].series[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.seriesGroups[0].series[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.seriesGroups[0].series[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.seriesGroups[0].series[0].formatSettings;

offsetobject

Labels offset.

Properties

xnumber | null

Horizontal offset.

Default value

Get the x property.

 const threedchart = document.querySelector('smart-3d-chart');

 let x = threedchart.seriesGroups[0].series[0].offset.x;

ynumber | null

Vertical offset.

Default value

Get the y property.

 const threedchart = document.querySelector('smart-3d-chart');

 let y = threedchart.seriesGroups[0].series[0].offset.y;

znumber | null

Horizontal offset on Z-axis.

Default value

Get the z property.

 const threedchart = document.querySelector('smart-3d-chart');

 let z = threedchart.seriesGroups[0].series[0].offset.z;

Get the offset property.

 const threedchart = document.querySelector('smart-3d-chart');

 let offset = threedchart.seriesGroups[0].series[0].offset;

radiusnumber | null

Radius of the labels in pie/donut series.

Get the radius property.

 const threedchart = document.querySelector('smart-3d-chart');

 let radius = threedchart.seriesGroups[0].series[0].radius;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.seriesGroups[0].series[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const threedchart = document.querySelector('smart-3d-chart');

 let unitInterval = threedchart.seriesGroups[0].series[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.seriesGroups[0].series[0].visible;

Get the labels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let labels = threedchart.seriesGroups[0].series[0].labels[0].labels;

legendFillColorstring | null

Fill color of the legend box. The default value is inherited from the serie's color.

Get the legendFillColor property.

 const threedchart = document.querySelector('smart-3d-chart');

 let legendFillColor = threedchart.seriesGroups[0].series[0].labels[0].legendFillColor;

legendFormatFunctionfunction | null

Legend data formatting function for the values in the serie.

Get the legendFormatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let legendFormatFunction = threedchart.seriesGroups[0].series[0].labels[0].legendFormatFunction;

legendFormatSettingsobject

Legend data formatting settings for the values in the serie.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].thousandsSeparator;

Get the legendFormatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let legendFormatSettings = threedchart.seriesGroups[0].series[0].labels[0].legendFormatSettings;

legendLineColorstring | null

Line color of the legend box. The default value is inherited from the serie's color.

Get the legendLineColor property.

 const threedchart = document.querySelector('smart-3d-chart');

 let legendLineColor = threedchart.seriesGroups[0].series[0].labels[0].legendLineColor;

lineColorstring | null

Line color for the serie.

Get the lineColor property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineColor = threedchart.seriesGroups[0].series[0].labels[0].lineColor;

lineColorSelectedstring | null

Line color for the serie when selected.

Get the lineColorSelected property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineColorSelected = threedchart.seriesGroups[0].series[0].labels[0].lineColorSelected;

lineColorSymbolstring | null

Line color for the marker symbols in serie.

Get the lineColorSymbol property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineColorSymbol = threedchart.seriesGroups[0].series[0].labels[0].lineColorSymbol;

lineWidthstring | null | number

Determines the line tickness of the items in this serie.

Get the lineWidth property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineWidth = threedchart.seriesGroups[0].series[0].labels[0].lineWidth;

lineWidthSelectedstring | null | number

Determines the line tickness of the items in this serie when selected.

Get the lineWidthSelected property.

 const threedchart = document.querySelector('smart-3d-chart');

 let lineWidthSelected = threedchart.seriesGroups[0].series[0].labels[0].lineWidthSelected;

minRadiusstring | null | number

Min radius of bubble series in pixels or percents.

Get the minRadius property.

 const threedchart = document.querySelector('smart-3d-chart');

 let minRadius = threedchart.seriesGroups[0].series[0].labels[0].minRadius;

maxRadiusstring | null | number

Max radius of bubble series in pixels or percents.

Get the maxRadius property.

 const threedchart = document.querySelector('smart-3d-chart');

 let maxRadius = threedchart.seriesGroups[0].series[0].labels[0].maxRadius;

opacitynumber

Determines the opacity of the items in this serie.

Default value

Get the opacity property.

 const threedchart = document.querySelector('smart-3d-chart');

 let opacity = threedchart.seriesGroups[0].series[0].labels[0].opacity;

radiusnumber | null

Outer radius of pie and donut series in pixels or percents.

Get the radius property.

 const threedchart = document.querySelector('smart-3d-chart');

 let radius = threedchart.seriesGroups[0].series[0].labels[0].radius;

selectedRadiusChangenumber | null

Radius change on selection of pie and donut series in pixels or percents.

Get the selectedRadiusChange property.

 const threedchart = document.querySelector('smart-3d-chart');

 let selectedRadiusChange = threedchart.seriesGroups[0].series[0].labels[0].selectedRadiusChange;

startAnglenumber

Minimum angle in a pie, donut, polar and spider series.

Default value

Get the startAngle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let startAngle = threedchart.seriesGroups[0].series[0].labels[0].startAngle;

symbolSizenumber

Determines the size of the symbol element.

Get the symbolSize property.

 const threedchart = document.querySelector('smart-3d-chart');

 let symbolSize = threedchart.seriesGroups[0].series[0].labels[0].symbolSize;

symbolSizeSelectednumber

Determines the size of the symbol element. This property is applicable to line and area series only.

Get the symbolSizeSelected property.

 const threedchart = document.querySelector('smart-3d-chart');

 let symbolSizeSelected = threedchart.seriesGroups[0].series[0].labels[0].symbolSizeSelected;

symbolType"none" | "circle" | "square" | "diamond" | "triangle_up" | "triangle_down" | "triangle_left" | "triangle_right"

Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only.

Default value

"none"

Get the symbolType property.

 const threedchart = document.querySelector('smart-3d-chart');

 let symbolType = threedchart.seriesGroups[0].series[0].labels[0].symbolType;

toolTipBackgroundstring | null

Determines the tooltip's background.

Get the toolTipBackground property.

 const threedchart = document.querySelector('smart-3d-chart');

 let toolTipBackground = threedchart.seriesGroups[0].series[0].labels[0].toolTipBackground;

toolTipClassstring | null

Determines the tooltip's CSS class name.

Get the toolTipClass property.

 const threedchart = document.querySelector('smart-3d-chart');

 let toolTipClass = threedchart.seriesGroups[0].series[0].labels[0].toolTipClass;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

Tooltip data formatting function for the values in the serie.

Get the toolTipFormatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let toolTipFormatFunction = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatFunction;

toolTipFormatSettingsobject

Tooltip data formatting settings for the values in the serie.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].thousandsSeparator;

Get the toolTipFormatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let toolTipFormatSettings = threedchart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings;

toolTipLineColorstring | null

Determines the tooltip's border lines color.

Get the toolTipLineColor property.

 const threedchart = document.querySelector('smart-3d-chart');

 let toolTipLineColor = threedchart.seriesGroups[0].series[0].labels[0].toolTipLineColor;

useGradientColorsboolean

Determines whether to use color gradients.

Default value

false

Get the useGradientColors property.

 const threedchart = document.querySelector('smart-3d-chart');

 let useGradientColors = threedchart.seriesGroups[0].series[0].labels[0].useGradientColors;

Get the series property.

 const threedchart = document.querySelector('smart-3d-chart');

 let series = threedchart.seriesGroups[0].series;

showLabelsboolean

When showLabels is set to true, the chart will render pie labels.

Default value

true

Get the showLabels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let showLabels = threedchart.seriesGroups[0].showLabels;

startAnglenumber

The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.

Default value

Get the startAngle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let startAngle = threedchart.seriesGroups[0].startAngle;

type"column" | "stackedcolumn" | "stackedcolumn100" | "rangecolumn" | "waterfall" | "stackedwaterfall" | "line" | "stackedline" | "stackedline100" | "spline" | "stackedspline" | "stackedspline100" | "stepline" | "stackedstepline" | "stackedstepline100" | "area" | "stackedarea" | "stackedarea100" | "rangearea" | "splinearea" | "stackedsplinearea" | "stackedsplinearea100" | "splinerangearea" | "steprangearea" | "stackedsplineara" | "steparea" | "stackedsteparea" | "stackedsteparea100" | "pie" | "donut" | "scatter" | "stackedscatter" | "stackedscatter100" | "bubble" | "stackedbubble" | "stackedbubble100" | "candlestick" | "ohlc"

Sets the chart type. smartChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, smartChart supports the following series types:

'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points

Default value

column

Get the type property.

 const threedchart = document.querySelector('smart-3d-chart');

 let type = threedchart.seriesGroups[0].type;

verticalWidthnumber

Sets the Y-axis width of the series group. Used to set the thickness of the line series

Default value

Get the verticalWidth property.

 const threedchart = document.querySelector('smart-3d-chart');

 let verticalWidth = threedchart.seriesGroups[0].verticalWidth;

widthnumber | string

Sets the X-axis width of the series group. Can be set as number or percetage of the slot's width.

Default value

Get the width property.

 const threedchart = document.querySelector('smart-3d-chart');

 let width = threedchart.seriesGroups[0].width;

showConnectionLinesboolean

Determines whether to show grid connecting lines when a chart item is hovered over.

Default value

false

 <smart-3d-chart show-connection-lines></smart-3d-chart>

showLegendboolean

Determines whether to show or hide the chart series legend.

Default value

true

 <smart-3d-chart show-legend></smart-3d-chart>

showLegendTableboolean

Determines whether to show or hide the chart series legend table.

Default value

false

 <smart-3d-chart show-legend-table></smart-3d-chart>

showToolTipsboolean

Enables or disables the chart tooltips.

Default value

true

 <smart-3d-chart show-tool-tips></smart-3d-chart>

titlePaddingobject

Sets the padding of the chart's title (caption).

Properties

bottomnumber

Bottom padding.

Default value

Get the bottom property.

 const threedchart = document.querySelector('smart-3d-chart');

 let bottom = threedchart.titlePadding.bottom;

leftnumber

Left padding.

Default value

Get the left property.

 const threedchart = document.querySelector('smart-3d-chart');

 let left = threedchart.titlePadding.left;

rightnumber

Right padding.

Default value

Get the right property.

 const threedchart = document.querySelector('smart-3d-chart');

 let right = threedchart.titlePadding.right;

topnumber

Top padding.

Default value

Get the top property.

 const threedchart = document.querySelector('smart-3d-chart');

 let top = threedchart.titlePadding.top;

toolTipFormatFunction{(value?: any, index?: number, series?: any): string}

User defined tooltip text formatting callback function.

toolTipLineColorstring | null

Tooltip line color. By default it is set to the hovered item's color

valueAxisobject

An object with settings about the Chart's y-axis (value axis).

Properties

baselineValueany

Sets the baseline value for the axis.

Default value

Get the baselineValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let baselineValue = threedchart.valueAxis[0].baselineValue;

displayTextstring | null

Sets the text displayed on the axis.

Get the displayText property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayText = threedchart.valueAxis[0].displayText;

formatFunction{(value?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.valueAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.valueAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.valueAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.valueAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.valueAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.valueAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.valueAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.valueAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.valueAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the valueAxis.

Properties

color

step

visible

colorstring

Color of the grid lines.

Default value

Get the color property.

 const threedchart = document.querySelector('smart-3d-chart');

 let color = threedchart.valueAxis[0].gridLines[0].color;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.valueAxis[0].gridLines[0].step;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.valueAxis[0].gridLines[0].visible;

Get the gridLines property.

 const threedchart = document.querySelector('smart-3d-chart');

 let gridLines = threedchart.valueAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let angle = threedchart.valueAxis[0].labels[0].angle;

classstring | null

CSS class of the labels.

Get the class property.

 const threedchart = document.querySelector('smart-3d-chart');

 let class = threedchart.valueAxis[0].labels[0].class;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.valueAxis[0].labels[0].step;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.valueAxis[0].labels[0].visible;

Get the labels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let labels = threedchart.valueAxis[0].labels;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScale = threedchart.valueAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScaleBase = threedchart.valueAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the valueAxis.

Default value

NaN

Get the maxValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let maxValue = threedchart.valueAxis[0].maxValue;

minValueany

Sets the minimum value of the valueAxis.

Default value

NaN

Get the minValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let minValue = threedchart.valueAxis[0].minValue;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const threedchart = document.querySelector('smart-3d-chart');

 let unitInterval = threedchart.valueAxis[0].unitInterval;

visibleboolean

Shows or hides the valueAxis.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.valueAxis[0].visible;

xAxisobject

Sets the Chart's xAxis.

Properties

dataFieldstring

Points to a data field in the data source.

Default value

Get the dataField property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataField = threedchart.xAxis[0].dataField;

displayTextstring | null

Optional custom xAxis display text.

Get the displayText property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayText = threedchart.xAxis[0].displayText;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const threedchart = document.querySelector('smart-3d-chart');

 let flip = threedchart.xAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.xAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.xAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.xAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.xAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.xAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.xAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.xAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.xAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.xAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the xAxis.

Properties

color

step

visible

colorstring

Color of the grid lines.

Default value

Get the color property.

 const threedchart = document.querySelector('smart-3d-chart');

 let color = threedchart.xAxis[0].gridLines[0].color;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.xAxis[0].gridLines[0].step;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.xAxis[0].gridLines[0].visible;

Get the gridLines property.

 const threedchart = document.querySelector('smart-3d-chart');

 let gridLines = threedchart.xAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let angle = threedchart.xAxis[0].labels[0].angle;

classstring | null

CSS class of the labels.

Get the class property.

 const threedchart = document.querySelector('smart-3d-chart');

 let class = threedchart.xAxis[0].labels[0].class;

offsetobject

Labels offset.

Properties

xnumber | null

Horizontal offset on X-axis(left-right).

Default value

Get the x property.

 const threedchart = document.querySelector('smart-3d-chart');

 let x = threedchart.xAxis[0].labels[0].offset.x;

ynumber | null

Vertical offset.

Default value

Get the y property.

 const threedchart = document.querySelector('smart-3d-chart');

 let y = threedchart.xAxis[0].labels[0].offset.y;

znumber | null

Horizontal offset on Z-axis(forward-backward).

Default value

Get the z property.

 const threedchart = document.querySelector('smart-3d-chart');

 let z = threedchart.xAxis[0].labels[0].offset.z;

Get the offset property.

 const threedchart = document.querySelector('smart-3d-chart');

 let offset = threedchart.xAxis[0].labels[0].offset;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.xAxis[0].labels[0].step;

visibleboolean | string

Possible values: true, false

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.xAxis[0].labels[0].visible;

Get the labels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let labels = threedchart.xAxis[0].labels;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScale = threedchart.xAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScaleBase = threedchart.xAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the xAxis.

Default value

NaN

Get the maxValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let maxValue = threedchart.xAxis[0].maxValue;

minValueany

Sets the minimum value of the xAxis.

Default value

NaN

Get the minValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let minValue = threedchart.xAxis[0].minValue;

rangeSelectorobject

Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.

Properties

colorstring | null

Sets the color of the range selector chart. If null, it will be set to the same color as the chart

Get the color property.

 const threedchart = document.querySelector('smart-3d-chart');

 let color = threedchart.xAxis[0].rangeSelector.color;

formatFunction{(value?: any, index?: number, series?: any): string}

Callback function used to format the values.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.xAxis[0].rangeSelector.formatFunction;

formatSettingsany

Chart Format Settings

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.xAxis[0].rangeSelector.formatSettings;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let angle = threedchart.xAxis[0].rangeSelector.labels[0].angle;

classstring | null

CSS class of the labels.

Get the class property.

 const threedchart = document.querySelector('smart-3d-chart');

 let class = threedchart.xAxis[0].rangeSelector.labels[0].class;

offsetobject

Labels offset.

Properties

xnumber | null

Horizontal offset.

Default value

Get the x property.

 const threedchart = document.querySelector('smart-3d-chart');

 let x = threedchart.xAxis[0].rangeSelector.labels[0].offset.x;

ynumber | null

Vertical offset.

Default value

Get the y property.

 const threedchart = document.querySelector('smart-3d-chart');

 let y = threedchart.xAxis[0].rangeSelector.labels[0].offset.y;

Get the offset property.

 const threedchart = document.querySelector('smart-3d-chart');

 let offset = threedchart.xAxis[0].rangeSelector.labels[0].offset;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.xAxis[0].rangeSelector.labels[0].step;

unitIntervalnumber

Sets the interval between the labels.

Get the unitInterval property.

 const threedchart = document.querySelector('smart-3d-chart');

 let unitInterval = threedchart.xAxis[0].rangeSelector.labels[0].unitInterval;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.xAxis[0].rangeSelector.labels[0].visible;

Get the labels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let labels = threedchart.xAxis[0].rangeSelector.labels;

opacitynumber

Sets the opacity of the range selector chart.

Default value

Get the opacity property.

 const threedchart = document.querySelector('smart-3d-chart');

 let opacity = threedchart.xAxis[0].rangeSelector.opacity;

serieType"line" | "area"

Sets the range selector chart type

Default value

area

Get the serieType property.

 const threedchart = document.querySelector('smart-3d-chart');

 let serieType = threedchart.xAxis[0].rangeSelector.serieType;

visibleboolean

Shows or hides the range selector.

Default value

false

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.xAxis[0].rangeSelector.visible;

Get the rangeSelector property.

 const threedchart = document.querySelector('smart-3d-chart');

 let rangeSelector = threedchart.xAxis[0].rangeSelector;

type"auto" | "date" | "basic" | "linear"

The type of the axis.

'auto' - automatically detects and switches to 'basic', 'linear' or 'date'.
'date' - when displaying dates.
'basic' - displays all data points sequentially.
'linear' - linear arrangement by the value of the xAxis data field.

Default value

"auto"

Get the type property.

 const threedchart = document.querySelector('smart-3d-chart');

 let type = threedchart.xAxis[0].type;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const threedchart = document.querySelector('smart-3d-chart');

 let unitInterval = threedchart.xAxis[0].unitInterval;

visibleboolean

Shows or hides the xAxis.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.xAxis[0].visible;

zAxisobject

Sets the Chart's zAxis.

Properties

dataFieldstring

Points to a data field in the data source.

Default value

Get the dataField property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dataField = threedchart.zAxis[0].dataField;

displayTextstring | null

Optional custom zAxis display text.

Get the displayText property.

 const threedchart = document.querySelector('smart-3d-chart');

 let displayText = threedchart.zAxis[0].displayText;

flipboolean

Specifies whether the values are displayed in reverse order.

Default value

false

Get the flip property.

 const threedchart = document.querySelector('smart-3d-chart');

 let flip = threedchart.zAxis[0].flip;

formatFunction{(value?: any, index?: number, series?: any): string}

Custom function to format the displayed values along the axis.

Get the formatFunction property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatFunction = threedchart.zAxis[0].formatFunction;

formatSettingsobject

Settings used to format the displayed values along the axis.

Properties

dateFormatstring | null

Optional date format string. This property is applicable only when displaying Date objects.

Get the dateFormat property.

 const threedchart = document.querySelector('smart-3d-chart');

 let dateFormat = threedchart.zAxis[0].formatSettings[0].dateFormat;

decimalPlacesnumber | null

Decimal places of numeric values.

Get the decimalPlaces property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalPlaces = threedchart.zAxis[0].formatSettings[0].decimalPlaces;

decimalSeparatorstring | null

A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.

Get the decimalSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let decimalSeparator = threedchart.zAxis[0].formatSettings[0].decimalSeparator;

negativeWithBracketsboolean

A boolean value indicating whether to display negative numbers in brackets.

Default value

false

Get the negativeWithBrackets property.

 const threedchart = document.querySelector('smart-3d-chart');

 let negativeWithBrackets = threedchart.zAxis[0].formatSettings[0].negativeWithBrackets;

prefixstring

Text to prepend to the value.

Default value

Get the prefix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let prefix = threedchart.zAxis[0].formatSettings[0].prefix;

sufixstring

Text to append to the value

Default value

Get the sufix property.

 const threedchart = document.querySelector('smart-3d-chart');

 let sufix = threedchart.zAxis[0].formatSettings[0].sufix;

thousandsSeparatorstring | null

A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.

Get the thousandsSeparator property.

 const threedchart = document.querySelector('smart-3d-chart');

 let thousandsSeparator = threedchart.zAxis[0].formatSettings[0].thousandsSeparator;

Get the formatSettings property.

 const threedchart = document.querySelector('smart-3d-chart');

 let formatSettings = threedchart.zAxis[0].formatSettings;

gridLinesobject

Object describing the grid lines properties of the zAxis.

Properties

color

step

visible

colorstring

Color of the grid lines.

Default value

Get the color property.

 const threedchart = document.querySelector('smart-3d-chart');

 let color = threedchart.zAxis[0].gridLines[0].color;

stepnumber | null

Interval steps between grid line placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.zAxis[0].gridLines[0].step;

visibleboolean | string

Possible values: true, false, 'custom'.

Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.zAxis[0].gridLines[0].visible;

Get the gridLines property.

 const threedchart = document.querySelector('smart-3d-chart');

 let gridLines = threedchart.zAxis[0].gridLines;

labelsobject

Object describing the labels properties of the axis.

Properties

anglenumber

Text rotation angle.

Default value

Get the angle property.

 const threedchart = document.querySelector('smart-3d-chart');

 let angle = threedchart.zAxis[0].labels[0].angle;

classstring | null

CSS class of the labels.

Get the class property.

 const threedchart = document.querySelector('smart-3d-chart');

 let class = threedchart.zAxis[0].labels[0].class;

offsetobject

Labels offset.

Properties

xnumber | null

Horizontal offset on X-axis(left-right).

Default value

Get the x property.

 const threedchart = document.querySelector('smart-3d-chart');

 let x = threedchart.zAxis[0].labels[0].offset.x;

ynumber | null

Vertical offset.

Default value

Get the y property.

 const threedchart = document.querySelector('smart-3d-chart');

 let y = threedchart.zAxis[0].labels[0].offset.y;

znumber | null

Horizontal offset on Z-axis(forward-backward).

Default value

Get the z property.

 const threedchart = document.querySelector('smart-3d-chart');

 let z = threedchart.zAxis[0].labels[0].offset.z;

Get the offset property.

 const threedchart = document.querySelector('smart-3d-chart');

 let offset = threedchart.zAxis[0].labels[0].offset;

stepnumber | null

Interval steps between label placements (multiples of the axis unit interval).

Get the step property.

 const threedchart = document.querySelector('smart-3d-chart');

 let step = threedchart.zAxis[0].labels[0].step;

visibleboolean | string

Possible values: true, false

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.zAxis[0].labels[0].visible;

Get the labels property.

 const threedchart = document.querySelector('smart-3d-chart');

 let labels = threedchart.zAxis[0].labels;

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default value

false

Get the logarithmicScale property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScale = threedchart.zAxis[0].logarithmicScale;

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value

Get the logarithmicScaleBase property.

 const threedchart = document.querySelector('smart-3d-chart');

 let logarithmicScaleBase = threedchart.zAxis[0].logarithmicScaleBase;

maxValueany

Sets the maximum value of the zAxis.

Default value

NaN

Get the maxValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let maxValue = threedchart.zAxis[0].maxValue;

minValueany

Sets the minimum value of the zAxis.

Default value

NaN

Get the minValue property.

 const threedchart = document.querySelector('smart-3d-chart');

 let minValue = threedchart.zAxis[0].minValue;

unitIntervalnumber | null

Sets the interval between the units.

Get the unitInterval property.

 const threedchart = document.querySelector('smart-3d-chart');

 let unitInterval = threedchart.zAxis[0].unitInterval;

visibleboolean

Shows or hides the zAxis.

Default value

true

Get the visible property.

 const threedchart = document.querySelector('smart-3d-chart');

 let visible = threedchart.zAxis[0].visible;

Events

itemClickCustomEvent

The event is raised when the user clicks on a chart element.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.itemIndex - The item index of the item.

ev.detail.serieIndex - The serie index of the item.

ev.detail.groupIndex - The group index of the item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of itemClick event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        itemIndex = detail.itemIndex,
        serieIndex = detail.serieIndex,
        groupIndex = detail.groupIndex;

	// event handling code goes here.
})

showCustomEvent

The event is raised when a chart element is shown.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onShow

Arguments

evCustomEvent

ev.detailObject

ev.detail.itemIndex - The item index of the item.

ev.detail.serieIndex - The serie index of the item.

ev.detail.groupIndex - The group index of the item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of show event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('show', function (event) {
    const detail = event.detail,
        itemIndex = detail.itemIndex,
        serieIndex = detail.serieIndex,
        groupIndex = detail.groupIndex;

	// event handling code goes here.
})

hideCustomEvent

The event is raised when a chart element is hidden.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onHide

Arguments

evCustomEvent

ev.detailObject

ev.detail.itemIndex - The item index of the item.

ev.detail.serieIndex - The serie index of the item.

ev.detail.groupIndex - The group index of the item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of hide event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('hide', function (event) {
    const detail = event.detail,
        itemIndex = detail.itemIndex,
        serieIndex = detail.serieIndex,
        groupIndex = detail.groupIndex;

	// event handling code goes here.
})

selectCustomEvent

The event is raised when a chart element is selected.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onSelect

Arguments

evCustomEvent

ev.detailObject

ev.detail.itemIndex - The item index of the item.

ev.detail.serieIndex - The serie index of the item.

ev.detail.groupIndex - The group index of the item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of select event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('select', function (event) {
    const detail = event.detail,
        itemIndex = detail.itemIndex,
        serieIndex = detail.serieIndex,
        groupIndex = detail.groupIndex;

	// event handling code goes here.
})

unselectCustomEvent

The event is raised when a chart element is unselected.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onUnselect

Arguments

evCustomEvent

ev.detailObject

ev.detail.itemIndex - The item index of the item.

ev.detail.serieIndex - The serie index of the item.

ev.detail.groupIndex - The group index of the item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of unselect event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('unselect', function (event) {
    const detail = event.detail,
        itemIndex = detail.itemIndex,
        serieIndex = detail.serieIndex,
        groupIndex = detail.groupIndex;

	// event handling code goes here.
})

rangeSelectionChangedCustomEvent

The event is raised after the chart's range selector position changes and after the chart ends rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRangeSelectionChanged

Arguments

evCustomEvent

ev.detailObject

ev.detail.minValue - The start value of the range selector.

ev.detail.maxValue - The end value of the range selector.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rangeSelectionChanged event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('rangeSelectionChanged', function (event) {
    const detail = event.detail,
        minValue = detail.minValue,
        maxValue = detail.maxValue;

	// event handling code goes here.
})

rangeSelectionChangingCustomEvent

The event is raised when the chart's range selector position changes and before the chart starts rendering. The event can be default prevented to cancel the range selection change.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onRangeSelectionChanging

Arguments

evCustomEvent

ev.detailObject

ev.detail.minValue - The start value of the range selector.

ev.detail.maxValue - The end value of the range selector.

ev.detail.oldMinValue - The previous start value of the range selector.

ev.detail.oldMaxValue - The previous end value of the range selector.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rangeSelectionChanging event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('rangeSelectionChanging', function (event) {
    const detail = event.detail,
        minValue = detail.minValue,
        maxValue = detail.maxValue,
        oldMinValue = detail.oldMinValue,
        oldMaxValue = detail.oldMaxValue;

	// event handling code goes here.
})

refreshBeginCustomEvent

The event is raised when the chart begins rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRefreshBegin

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of refreshBegin event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('refreshBegin', function (event) {
	// event handling code goes here.
})

refreshEndCustomEvent

The event is raised when the chart finishes rendering.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRefreshEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of refreshEnd event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('refreshEnd', function (event) {
	// event handling code goes here.
})

resizeBeginCustomEvent

The event is raised when the chart begins resizing.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeBegin

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeBegin event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('resizeBegin', function (event) {
	// event handling code goes here.
})

resizeEndCustomEvent

The event is raised when the chart finishes resizing.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addEventListener('resizeEnd', function (event) {
	// event handling code goes here.
})

Methods

addColorScheme( schemeName: string, colorsArray: any[]): void

Adds a new color sheme. If a scheme with the same name already exists, the method will update its colors.

Arguments

schemeNamestring

The name of the custom color scheme.

colorsArrayany[]

An array of color values.

Invoke the addColorScheme method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.addColorScheme("'myScheme'","['#1A6642', '#46C26F', '#F9B956', '#F38443', '#DE513D']");

beginUpdate(): void

Begins an update of the chart. The chart will not be rendered until the endUpdate method is called.

Invoke the beginUpdate method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.beginUpdate();

endUpdate( refresh?: boolean): void

Ends an update of the chart. The chart will be rendered after the endUpdate method is called.

Arguments

refresh?boolean

If set to true, the chart will complete a full refresh.

Invoke the endUpdate method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.endUpdate();

getColorScheme( schemeName: string): []

Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined.

Arguments

schemeNamestring

The name of the color scheme.

Returns[]

Invoke the getColorScheme method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getColorScheme("'myScheme'");

getItemByIndexes( groupIndex?: number | null, serieIndex?: number | null, itemIndex?: number | null): object

Gets the item with the specified indexes.

Arguments

groupIndex?number | null

Series group index.

serieIndex?number | null

Series index.

itemIndex?number | null

Item (data point) index.

Returnsobject

Invoke the getItemByIndexes method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getItemByIndexes(0,1,5);

getItemsByIndexes( groupIndex?: number | null, serieIndex?: number | null, itemIndex?: number | null): object

Gets an arrat of the items with the specified indexes. Leaving an index null will return all items that match the other indexes.

Arguments

groupIndex?number | null

Series group index.

serieIndex?number | null

Series index.

itemIndex?number | null

Item (data point) index.

Returnsobject

Invoke the getItemsByIndexes method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getItemsByIndexes(0,1,null);

getHidden(): { groupIndex: number, serieIndex: number, itemIndex: number }[]

Gets the indexes of the hidden series.

Returns{ groupIndex: number, serieIndex: number, itemIndex: number }[]

Invoke the getHidden method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getHidden();

getSelection(): []

Gets the selected items.

Returns[]

Invoke the getSelection method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getSelection();

getValueAxisLabels(): { value: any }[]

Gets the rendered values of the valueAxis labels.

Returns{ value: any }[]

Invoke the getValueAxisLabels method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getValueAxisLabels();

getXAxisLabels(): { value: any }[]

Gets the rendered values of the xAxis labels.

Returns{ value: any }[]

Invoke the getXAxisLabels method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getXAxisLabels();

getZAxisLabels(): { value: any }[]

Gets the rendered values of the zAxis labels.

Returns{ value: any }[]

Invoke the getZAxisLabels method.

const threedchart = document.querySelector('smart-3d-chart');
const result = threedchart.getZAxisLabels();

hideGroup( groupIndex: number): void

Hides all items of a chart group.

Arguments

groupIndexnumber

Series group index.

Invoke the hideGroup method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.hideGroup(0);

hideItem( groupIndex: number, serieIndex: number, itemIndex?: number): void

Hides a chart item.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index.

Invoke the hideItem method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.hideItem(0,1,5);

hideSerie( groupIndex: number, serieIndex: number): void

Hides all items of a chart serie.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

Invoke the hideSerie method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.hideSerie(0);

refresh(): void

Refreshes the content of the chart element after a property or data update.

Invoke the refresh method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.refresh();

removeColorScheme( schemeName: string): void

Removes an existing color scheme. If the scheme does not exist, the method has no effect.

Arguments

schemeNamestring

The name of the custom color scheme.

Invoke the removeColorScheme method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.removeColorScheme("'myScheme'");

saveAsJPEG( fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void

Exports the chart's content as JPEG image.

Arguments

fileName?string

File name.

includeLegend?boolean

Sets whether the legend will be part of the saved file.

includeCaption?boolean

Sets whether the caption will be part of the saved file.

Invoke the saveAsJPEG method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.saveAsJPEG("'myChart'");

saveAsPNG( fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void

Exports the chart's content as PNG image.

Arguments

fileName?string

File name.

includeLegend?boolean

Sets whether the legend will be part of the saved file.

includeCaption?boolean

Sets whether the caption will be part of the saved file.

Invoke the saveAsPNG method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.saveAsPNG("'myChart'");

saveAsPDF( fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void

Exports the chart's content as PDF file.

Arguments

fileName?string

File name.

includeLegend?boolean

Sets whether the legend will be part of the saved file.

includeCaption?boolean

Sets whether the caption will be part of the saved file.

Invoke the saveAsPDF method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.saveAsPDF("'myChart'");

selectItem( groupIndex: number, serieIndex: number, itemIndex?: number): void

Selects a chart item. If selectionMode is 'one', the previous item will be unselected.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index.

Invoke the selectItem method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.selectItem(2,1,1);

showGroup( groupIndex: number): void

Shows all items of a chart group.

Arguments

groupIndexnumber

Series group index.

Invoke the showGroup method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.showGroup(0);

showItem( groupIndex: number, serieIndex: number, itemIndex?: number): void

Shows a chart item.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index.

Invoke the showItem method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.showItem(0,1,5);

showSerie( groupIndex: number, serieIndex: number): void

Shows all items of a chart serie.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

Invoke the showSerie method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.showSerie(1,0);

setDefaultPosition(): void

Sets the camera position to its position during the initialization.

Invoke the setDefaultPosition method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.setDefaultPosition();

setCameraMode( mode: string): void

Sets the camera mode. Different camera modes change the control actions of the mouse. Available modes are 'zoom', 'pan' and 'default'.

Arguments

modestring

Camera mode.

Invoke the setCameraMode method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.setCameraMode("zoom");

setCameraPosition( x: number, y: number, z: number, animation?: boolean): void

Sets the camera position.

Arguments

xnumber

X coordinate.

ynumber

Y coordinate.

znumber

Z coordinate.

animation?boolean

Animation Enabled

Invoke the setCameraPosition method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.setCameraPosition(0,20,20);

setCameraZoom( level: number, animation?: boolean): void

Sets the camera zoom.

Arguments

levelnumber

Zoom level.

animation?boolean

Animation Enabled

Invoke the setCameraZoom method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.setCameraZoom(1.5);

unselectItem( groupIndex: number, serieIndex: number, itemIndex?: number): void

Unelects a chart item.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndex?number

Item (data point) index.

Invoke the unselectItem method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.unselectItem(2,1,1);

update(): void

Updates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values.

Invoke the update method.

const threedchart = document.querySelector('smart-3d-chart');
threedchart.update();

CSS Variables

--smart-chart-default-widthvar()

Default value

"850px"

default width of the element

--smart-chart-default-heightvar()

Default value

"500px"

default height of the element

ThreeDChart Javascript API

animation"none" | "simple" | "advanced"

Default value

animationSpeednumber

Default value

autoRotateboolean

Default value

autoRotateSpeednumber

Default value

backgroundColorstring | null

Default value

backgroundGradient[]

Default value

backgroundImagestring

Default value

backgroundTexture[]

Default value

cameraPositionobject

Properties

xnumber

Default value

ynumber

Default value

znumber

Default value

cameraZoomnumber

Default value

captionstring

Default value

Default value

controlsSettingsany

customModels[]

Default value

dataSource[]

descriptionstring

Default value

disabledboolean

Default value

enableControlsToolbarboolean

Default value

controlsToolbarItemsany

gridOptionsany

legendIndex"auto" | "serie" | "group"

Default value

legendLayoutobject | null

lightColorstring

Default value

localestring

Default value

messagesobject

Default value

rightToLeftboolean

Default value

selectionMode"none" | "single" | "multiple"

Default value

seriesGroups[]

Properties

bands[]

Properties

colorstring | null

lineColorstring | null

lineWidthstring | number | null

maxValueany

Default value

minValueany

Default value

opacitynumber

Default value