Chart JAVASCRIPT UI Component API

Chart Javascript API

Class

Chart

Chart

Chart is a feature-complete interactive graph library that answers the data visualization needs of any modern web app.

Selector

smart-chart

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'.
AanimationDurationDetermines the animation duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range smartChart will reset it to the default value.
BbackgroundColorSets the chart's background color. For example: '#DDFFE8'
BbackgroundImageSets the chart's background image. For example: 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg'
BborderLineColorSets the chart's border color. For example: '#098700'
BborderLineWidthSets the chart's border line width.
CcaptionSets the caption (title) of the chart.
CclipDetermines whether to clip plotted elements that overflow the axis boundaries.
CcolorSchemeSets the chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.
CcolumnSeriesOverlapEnables or disables overlapping of the column series.
CcrosshairsColorGets or sets the color of the crosshairs lines. The 'enableCrosshairs' property should be 'true'.
CcrosshairsDashStyleGets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length. The 'enableCrosshairs' property should be 'true'. For example: '3,3'
CcrosshairsLineWidthGets or sets the width of the crosshairs lines. The 'enableCrosshairs' property should be 'true'
DdataSourceSets the chart's data source.
DdescriptionSets the description text of the chart.
DdisabledEnables or disables the chart.
DdrawDetermines the drawing function of smartChart. When the property is set, you can override the smartChart's drawing.
DdrawBeforeFunction for custom drawing before the caption and other chart elements.
EenableAxisTextAnimationDetermines if the animation of the axes text is enabled.
EenableCrosshairsEnables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.
GgreyScaleDetermines whether to display the chart using greyscale colors.
LlegendLayoutSets the legend's layout. Click for more details. Property object's options:
    LlocaleSets or gets the locale. Used in conjunction with the property messages.
    LlocalizationLocalization object containing culture-specific properties required for formatting currencies, numbers and dates. Click for more details. Property object's options:
    • decimalSeparator:string - A symbol used to mark the border between the integer and fractional parts of a number.
    • patterns:object | null - An object containing datetime formatting patterns.
    • thousandsSeparator:string - A symbol used to mark the border between thousands, millions, billions, etc.
    MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
    PpaddingSets the left, top, right and bottom padding of the Chart. Click for more details. Property object's options:
    • bottom:number - Bottom padding of the Chart.
    • left:number - Left padding of the Chart.
    • right:number - Right padding of the Chart.
    • top:number - Top padding of the Chart.
    RrenderEngineDetermines the rendering engine used to display the chart. When the property is set to an empty string, smartChart will automatically select an optimal rendering engine depending on the browser capabilities.
    RrightToLeftSets or gets a value indicating whether the Chart's layout is mirrored.
    SseriesGroupsThe 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. Click for more details. Property object's options:
    • annotations:[] - An array of chart annotation objects.
      • Property object's options:
      • fillColor:string | null - Fill/background color of the annotation.
      • height:number - Height of the annotation.
      • lineColor:string | null - Line color of the annotation.
      • offset:object - Custom offset of the annotation relative to xValue & yValue.
      • path:string | null - Line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.
      • radius:number - Radius of the annotation in case its type is 'circle'.
      • text:object - Object describing the text of the annotation.
      • type:string | null - Shape type of the annotation.
      • width:number - Width of the annotation.
      • xValue:number - Value to determine the horizontal offset of the annotation.
      • xValue2:number - Optional 2nd value to determine the horizontal offset of the annotation bottom-right point.
      • yValue:number - Value to determine the vertical offset of the annotation.
      • yValue2:number - Optional 2nd value to determine the vertical offset of the annotation's bottom-right point.
    • bands:[] - Optional color bands dislayed in the chart's plot area.
      • Property object's options:
      • color:string | null - Color used to fill the area between the minValue and the maxValue.
      • dashStyle:string | null - Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
      • lineColor:string | null - Band line color.
      • lineWidth:string | number | null - Band line width.
      • maxValue:any - End value of the color band.
      • minValue:any - Start value of the color band.
      • opacity:number - Fraction indicating the fill opacity.
    • columnsGapPercent:number - Percentage gap between columns within the same serie.
    • columnsMaxWidth:number | null - Maximum width of columns in column series.
    • columnsMinWidth:number - Minimum width of columns in column series.
    • columnsBottomWidthPercent:number - Columns bottom width (as percentage of the total width).
    • columnsTopWidthPercent:number - Columns top width (as percentage of the total width).
    • draw:function | null - Determines the drawing function of the series group. When the property is set, you can draw after the series group has been plotted.
    • dataSource:any - Determines the data source of the serie
    • drawBefore:function | null - Function for custom drawing before the series group.
    • enableSelection:boolean - Determines whether series are selectable.
    • enableSeriesToggle:boolean - Determines whether to toggle series visibility after click on a legend's box.
    • endAngle:number - The end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
    • formatFunction:{(value?: any, index?: number, series?: any): string} - Callback function used to format series labels.
    • formatSettings:object - Object describing the format settings of series labels.
      • Property object's options:
      • dateFormat:string | null - Optional date format string. This property is applicable only when displaying Date objects.
      • decimalPlaces:number | null - Decimal places of numeric values.
      • decimalSeparator:string | 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.
      • negativeWithBrackets:boolean - A boolean value indicating whether to display negative numbers in brackets.
      • prefix:string - Text to prepend to the value.
      • sufix:string - Text to append to the value
      • thousandsSeparator:string | null - A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
    • linesUnselectMode:string - Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
    • offsetX:number - Horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.
    • offsetY:number - Vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.
    • orientation:string - Specifies the orientation of the series group.
    • summary:string - Specifies the summary of the series group.
    • polar:boolean - When polar is set to true, the chart will render in polar coordinates.
    • radius:number - The radius of the polar coordinate system. Applicable to polar and spider charts only.
    • series:[] - An array of chart series.
      • Property object's options:
      • centerOffset:number - Offset from the center point in a pie/donut series.
      • colorFunction:function | 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.
      • colorScheme:string | null - Color palette to use when rendering the serie.
      • dataField:string - Name of the field in the data source.
      • dataFieldClose:string - Data field used in candlestcik and ohlc series.
      • dataFieldHigh:string - Data field used in candlestcik and ohlc series.
      • dataFieldLow:string - Data field used in candlestcik and ohlc series.
      • dataFieldOpen:string - Data field used in candlestcik and ohlc series.
      • dataFieldFrom:string - Data field used in in range column series as a start data field.
      • dataFieldTo:string - Data field used in range column series as an end data field.
      • radiusDataField:string - Data field used in bubble series.
      • displayText:string - Name to display for this serie.
      • displayTextClose:string - Name to display for candlestick and ohlc series.
      • displayTextHigh:string - Name to display for candlestick and ohlc series.
      • displayTextLow:string - Name to display for candlestick and ohlc series.
      • displayTextOpen:string - Name to display for candlestick and ohlc series.
      • emptyPointsDisplay:string - Determines how to display value gaps in line series.
      • enableSelection:boolean - Determines whether the serie is selectable.
      • enableSeriesToggle:boolean - Determines whether to toggle the series visibility after click on a legend's box.
      • labelRadius:number - Determines the labels rotation radius when the Chart is 'pie' or 'donut'.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Callback function used to format the labels.
      • formatSettings:object - Object describing the format settings of the labels.
      • summary:string - Specifies the summary of the series group.
      • endAngle:number - Maximum angle in a pie, donut, polar and spider series.
      • fillColor:string | null - Fill color for the serie.
      • fillColorAlt:string | null - Alternating fill color for the serie. Applicable to OHLC series only.
      • fillColorAltSelected:string | null - Alternating fill color for the serie when selected. Applicable to OHLC series only.
      • fillColorSelected:string | null - Fill color for the serie when selected.
      • fillColorSymbol:string | null - Fill color for the marker symbols in the serie.
      • fillColorSymbolSelected:string | null - Fill color for the the marker symbols in serie when selected.
      • greyScale:boolean | null - Determines whether to display the serie in grey scale.
      • hiddenPointsDisplay:boolean - Determines whether to hide slices of toggled points in pie and donut series.
      • initialAngle:number - Initial angle in pie and donut series.
      • innerRadius:number - Inner radius of donut series in pixels or percents.
      • labels:object - Object describing the labels properties of the axis.
      • legendFillColor:string | null - Fill color of the legend box. The default value is inherited from the serie's color.
      • legendFormatFunction:function | null - Legend data formatting function for the values in the serie.
      • legendFormatSettings:object - Legend data formatting settings for the values in the serie.
      • legendLineColor:string | null - Line color of the legend box. The default value is inherited from the serie's color.
      • lineColor:string | null - Line color for the serie.
      • lineColorSelected:string | null - Line color for the serie when selected.
      • lineColorSymbol:string | null - Line color for the marker symbols in serie.
      • lineColorSymbolSelected:string | null - Line color for the marker symbols in the serie when selected.
      • lineDashStyle:string | null - A string sequence of numbers represening line and space lengths, e.g. '2,2'.
      • linesUnselectMode:string - Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
      • lineWidth:string | null | number - Determines the line tickness of the items in this serie.
      • lineWidthSelected:string | null | number - Determines the line tickness of the items in this serie when selected.
      • minRadius:string | null | number - Min radius of bubble series in pixels or percents.
      • maxRadius:string | null | number - Max radius of bubble series in pixels or percents.
      • opacity:number - Determines the opacity of the items in this serie.
      • radius:number | null - Outer radius of pie and donut series in pixels or percents.
      • selectedRadiusChange:number | null - Radius change on selection of pie and donut series in pixels or percents.
      • startAngle:number - Minimum angle in a pie, donut, polar and spider series.
      • symbolSize:number - Determines the size of the symbol element.
      • symbolSizeSelected:number - Determines the size of the symbol element. This property is applicable to line and area series only.
      • symbolType:string - Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only.
      • toolTipBackground:string | null - Determines the tooltip's background.
      • toolTipClass:string | null - Determines the tooltip's CSS class name.
      • toolTipFormatFunction:{(value?: any, index?: number, series?: any): string} - Tooltip data formatting function for the values in the serie.
      • toolTipFormatSettings:object - Tooltip data formatting settings for the values in the serie.
      • toolTipLineColor:string | null - Determines the tooltip's border lines color.
      • useGradientColors:boolean - Determines whether to use color gradients.
    • seriesGapPercent:number - Percentage gap between columns belonging to different series.
    • skipOverlappingPoints:boolean - Determines whether to display overlapping data points in column, ohlc and candlestick series.
    • showLabels:boolean - When showLabels is set to true, the chart will render pie labels.
    • spider:boolean - When spider is set to true, the chart will render in polar coordinates.
    • startAngle:number - The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
    • type:string | null - 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
    • toolTipFormatSettings:object - Object describing the format settings of series tooltips.
      • Property object's options:
      • dateFormat:string | null - Optional date format string. This property is applicable only when displaying Date objects.
      • decimalPlaces:number | null - Decimal places of numeric values.
      • decimalSeparator:string | 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.
      • negativeWithBrackets:boolean - A boolean value indicating whether to display negative numbers in brackets.
      • prefix:string - Text to prepend to the value.
      • sufix:string - Text to append to the value
      • thousandsSeparator:string | null - A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
    • toolTipFormatFunction:{(value?: any, index?: number, series?: any): string} - Sets the tooltip format function. The function is used to format the tooltips of the Chart serie
    • useGradientColors:boolean - Determines whether to use color gradients.
    • valueAxis:object - Object describing the valueAxis for this group. smartChart allows you to use a common valueAxis and/or multiple value axes per serie group.
      • Property object's options:
      • alternatingBackgroundColor:string - Alternating background color between grid lines.
      • alternatingBackgroundColor2:string - Second alternating background color.
      • alternatingBackgroundOpacity:number - Opacity of the alternating background.
      • axisSize:number | string | null - Sets the size of the axis.
      • bands:[] - Optional color bands dislayed in the chart's plot area.
      • baselineValue:any - Sets the baseline value for the axis.
      • customDraw:boolean - boolean determining whether to draw the axis or the user will use APIs to draw it.
      • description:string - Sets the description of the value axis.
      • displayValueAxis:boolean - Specifies whether the values axis is displayed.
      • flip:boolean - Specifies whether the values are displayed in reverse order.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format the displayed values along the axis.
      • formatSettings:object - Settings used to format the displayed values along the axis.
      • gridLines:object - Object describing the grid lines properties of the valueAxis.
      • labels:object - Object describing the labels properties of the axis.
      • line:object - Object describing the line properties of the axis.
      • logarithmicScale:boolean - Determines whether to use logarithmic scale.
      • logarithmicScaleBase:number - Base for logarithmic scale.
      • maxValue:any - Sets the maximum value of the valueAxis.
      • minValue:any - Sets the minimum value of the valueAxis.
      • padding:object - Object describing the padding of the axis.
      • position:string - Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.
      • textRotationAngle:number | null - Text rotation angle.
      • type:string - Value Axis Type
      • textRotationPoint:string - Position to rotate the text around.
      • tickMarks:object - Object describing the tick marks properties of the valueAxis.
      • title:object - Object describing the title of the valueAxis.
      • unitInterval:number | null - Sets the interval between the units.
      • valuesOnTicks:boolean - Specifies whether the axis values will be aligned with the tick marks.
      • visible:boolean - Shows or hides the valueAxis.
    • xAxis:object - Object describing the xAxis for this group.
      • Property object's options:
      • alternatingBackgroundColor:string - Alternating background color between grid lines.
      • alternatingBackgroundColor2:string - Second alternating background color.
      • alternatingBackgroundOpacity:number - Opacity of the alternating background.
      • axisSize:number | string | null - Sets the size of the xAxis.
      • bands:[] - Optional color bands dislayed in the chart's plot area.
      • baseUnit:string | null - The base unit when used with 'date' axis.
      • customDraw:boolean - boolean determining whether to draw the axis or the user will use APIs to draw it.
      • dataField:string - Points to a data field in the data source.
      • dateFormat:string | null - Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.
      • displayText:string | null - Optional custom xAxis display text.
      • flip:boolean - Specifies whether the values are displayed in reverse order.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format the displayed values along the axis.
      • formatSettings:object - Settings used to format the displayed values along the axis.
      • gridLines:object - Object describing the grid lines properties of the xAxis.
      • labels:object - Object describing the labels properties of the axis.
      • line:object - Object describing the line properties of the axis.
      • logarithmicScale:boolean - Determines whether to use logarithmic scale.
      • logarithmicScaleBase:number - Base for logarithmic scale.
      • maxValue:any - Sets the maximum value of the xAxis.
      • minValue:any - Sets the minimum value of the xAxis.
      • padding:object - Object describing the padding of the axis.
      • position:string - Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available.
      • rangeSelector:object - Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
      • text:string - xAxis's text value.
      • textRotationAngle:number | null - Text rotation angle.
      • textRotationPoint:string - Position to rotate the text around.
      • tickMarks:object - Object describing the tick marks properties of the xAxis.
      • title:object - Object describing the title of the xAxis.
      • toolTipFormatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format xAxis values in tooltips.
      • toolTipFormatSettings:object - Settings used to format xAxis values in tooltips.
      • type:string - 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.
      • unitInterval:number | null - Sets the interval between the units.
      • valuesOnTicks:boolean - Specifies whether the axis values will be aligned with the tick marks.
      • visible:boolean - Shows or hides the xAxis.
    SshowBorderLineDetermines whether to display the chart's border line.
    SshowLegendDetermines whether to show or hide the chart series legend.
    SshowToolTipsEnables or disables the chart tooltips.
    SshowToolTipsOnAllSeriesDetermines whether to show a composite tooltip containing information for all series.
    TthemeDetermines the set of default background, line, text and band colors that will be used in the Chart.
    TtitlePaddingSets the padding of the chart's title (caption). Click for more details. Property object's options:
    • bottom:number - Bottom padding.
    • left:number - Left padding.
    • right:number - Right padding.
    • top:number - Top padding.
    TtoolTipBackgroundTooltip background color.
    TtoolTipFormatFunctionUser defined tooltip text formatting callback function.
    TtoolTipHideDelayDetermines the tooltip hide delay in milliseconds.
    TtoolTipLineColorTooltip line color.
    TtoolTipShowDelayDetermines the tooltip show delay in milliseconds. Values may range from 0 to 10000 [ms].
    VvalueAxisAn object with settings about the Chart's y-axis (value axis). Click for more details. Property object's options:
    • alternatingBackgroundColor:string - Alternating background color between grid lines.
    • alternatingBackgroundColor2:string - Second alternating background color.
    • alternatingBackgroundOpacity:number - Opacity of the alternating background.
    • axisSize:number | string | null - Sets the size of the axis.
    • bands:[] - Optional color bands dislayed in the chart's plot area.
      • Property object's options:
      • color:string | null - Color used to fill the area between the minValue and the maxValue.
      • dashStyle:string | null - Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
      • lineColor:string | null - Band line color.
      • lineWidth:string | null - Band line width.
      • maxValue:any - End value of the color band.
      • minValue:any - Start value of the color band.
      • opacity:number - Fraction indicating the fill opacity.
    • baselineValue:any - Sets the baseline value for the axis.
    • customDraw:boolean - boolean determining whether to draw the axis or the user will use APIs to draw it.
    • description:string - Sets the description of the value axis.
    • displayValueAxis:boolean - Specifies whether the values axis is displayed.
    • flip:boolean - Specifies whether the values are displayed in reverse order.
    • formatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format the displayed values along the axis.
    • formatSettings:object - Settings used to format the displayed values along the axis.
      • Property object's options:
      • dateFormat:string | null - Optional date format string. This property is applicable only when displaying Date objects.
      • decimalPlaces:number | null - Decimal places of numeric values.
      • decimalSeparator:string | 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.
      • negativeWithBrackets:boolean - A boolean value indicating whether to display negative numbers in brackets.
      • prefix:string - Text to prepend to the value.
      • sufix:string - Text to append to the value
      • thousandsSeparator:string | null - A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
    • gridLines:object - Object describing the grid lines properties of the valueAxis.
      • Property object's options:
      • color:string - Color of the grid lines.
      • custom:[] | null - An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
      • dashStyle:string - Grid lines dash style, e.g. '2,2'.
      • lineWidth:number - Line width (in pixels) of the grid lines.
      • step:number | null - Interval steps between grid line placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between the grid lines.
      • visible:boolean | 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.

    • labels:object - Object describing the labels properties of the axis.
      • Property object's options:
      • angle:number - Text rotation angle.
      • autoRotate:boolean - boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
      • class:string | null - CSS class of the labels.
      • custom:[] | null - An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Callback function used to format the labels.
      • formatSettings:object - Object describing the format settings of the labels.
      • horizontalAlignment:string - Horizontal labels alignment.
      • offset:object - Labels offset.
      • rotationPoint:string - Position to rotate the text around.
      • step:number | null - Interval steps between label placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between the labels.
      • verticalAlignment:string - Vertical labels alignment.
      • visible:boolean | 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.

    • line:object - Object describing the line properties of the axis.
      • Property object's options:
      • color:string - Color of axis line.
      • dashStyle:string - Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
      • lineWidth:number - Line width. The default is inherited from gridLines.lineWidth.
      • visible:boolean - boolean determining the visibility of the axis line.
    • logarithmicScale:boolean - Determines whether to use logarithmic scale.
    • logarithmicScaleBase:number - Base for logarithmic scale.
    • maxValue:any - Sets the maximum value of the valueAxis.
    • minValue:any - Sets the minimum value of the valueAxis.
    • padding:object - Object describing the padding of the axis.
      • Property object's options:
      • bottom:number - Bottom padding. Available for horizontal valueAxis.
      • left:number - Left padding. Available for vertical valueAxis.
      • right:number - Right padding. Available for vertical valueAxis.
      • top:number - Top padding. Available for horizontal valueAxis.
    • position:string - Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.
    • type:string - Value Axis Type
    • textRotationAngle:number | null - Text rotation angle.
    • textRotationPoint:string - Position to rotate the text around.
    • tickMarks:object - Object describing the tick marks properties of the valueAxis.
      • Property object's options:
      • color:string - Color of the tick marks.
      • custom:[] | null - An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.
      • dashStyle:string - Tick marks dash style, e.g. '2,2'.
      • lineWidth:number - Line width (in pixels) of the tick marks.
      • size:number - Size (in pixels) of the tick marks.
      • step:number | null - Interval steps between tick mark placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between tick marks.
      • visible:boolean | string -

        Possible values: true, false, 'custom'.

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

    • title:object - Object describing the title of the valueAxis.
      • Property object's options:
      • class:string | null - CSS class of the title text.
      • horizontalAlignment:string - Horizontal alignment.
      • text:string - Text of the title.
      • verticalAlignment:string - Vertical alignment.
      • visible:boolean - boolean determining the visibility of the title.
    • unitInterval:number | null - Sets the interval between the units.
    • valuesOnTicks:boolean - Specifies whether the axis values will be aligned with the tick marks.
    • visible:boolean - Shows or hides the valueAxis.
    XxAxisSets the Chart's xAxis. Click for more details. Property object's options:
    • alternatingBackgroundColor:string - Alternating background color between grid lines.
    • alternatingBackgroundColor2:string - Second alternating background color.
    • alternatingBackgroundOpacity:number - Opacity of the alternating background.
    • axisSize:number | string | null - Sets the size of the xAxis.
    • bands:[] - Optional color bands dislayed in the chart's plot area.
      • Property object's options:
      • color:string | null - Color used to fill the area between the minValue and the maxValue.
      • dashStyle:string | null - Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
      • lineColor:string | null - Band line color.
      • lineWidth:string | null - Band line width.
      • maxValue:any - End value of the color band.
      • minValue:any - Start value of the color band.
      • opacity:number - Fraction indicating the fill opacity.
    • baseUnit:string | null - The base unit when used with 'date' axis.
    • customDraw:boolean - boolean determining whether to draw the axis or the user will use APIs to draw it.
    • dataField:string - Points to a data field in the data source.
    • dateFormat:string | null - Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.
    • displayText:string | null - Optional custom xAxis display text.
    • flip:boolean - Specifies whether the values are displayed in reverse order.
    • formatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format the displayed values along the axis.
    • formatSettings:object - Settings used to format the displayed values along the axis.
      • Property object's options:
      • dateFormat:string | null - Optional date format string. This property is applicable only when displaying Date objects.
      • decimalPlaces:number | null - Decimal places of numeric values.
      • decimalSeparator:string | 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.
      • negativeWithBrackets:boolean - A boolean value indicating whether to display negative numbers in brackets.
      • prefix:string - Text to prepend to the value.
      • sufix:string - Text to append to the value
      • thousandsSeparator:string | null - A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
    • gridLines:object - Object describing the grid lines properties of the xAxis.
      • Property object's options:
      • color:string - Color of the grid lines.
      • custom:[] | null - An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
      • dashStyle:string - Grid lines dash style, e.g. '2,2'.
      • lineWidth:number - Line width (in pixels) of the grid lines.
      • step:number | null - Interval steps between grid line placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between the grid lines.
      • visible:boolean | 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.

    • labels:object - Object describing the labels properties of the axis.
      • Property object's options:
      • angle:number - Text rotation angle.
      • autoRotate:boolean - boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
      • class:string | null - CSS class of the labels.
      • custom:[] | null - An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Callback function used to format the labels.
      • formatSettings:object - Object describing the format settings of the labels.
      • horizontalAlignment:string - Horizontal labels alignment.
      • offset:object - Labels offset.
      • rotationPoint:string - Position to rotate the text around.
      • step:number | null - Interval steps between label placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between the labels.
      • verticalAlignment:string - Vertical labels alignment.
      • visible:boolean | 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.

    • line:object - Object describing the line properties of the axis.
      • Property object's options:
      • color:string - Color of axis line.
      • dashStyle:string - Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
      • lineWidth:number - Line width. The default is inherited from gridLines.lineWidth.
      • visible:boolean - boolean determining the visibility of the axis line.
    • logarithmicScale:boolean - Determines whether to use logarithmic scale.
    • logarithmicScaleBase:number - Base for logarithmic scale.
    • maxValue:any - Sets the maximum value of the xAxis.
    • minValue:any - Sets the minimum value of the xAxis.
    • padding:object - Object describing the padding of the axis.
      • Property object's options:
      • bottom:number - Bottom padding. Available for horizontal xAxis.
      • left:number - Left padding. Available for vertical xAxis.
      • right:number - Right padding. Available for vertical xAxis.
      • top:number - Top padding. Available for horizontal xAxis.
    • position:string - Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available.
    • rangeSelector:object - Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
      • Property object's options:
      • backgroundColor:string | null - Sets the range selector chart's background color.
      • backgroundImage:string - Sets the range selector chart's background image.
      • baseUnit:string | null - The base unit when used with 'date' axis.
      • borderLineColor:string | null - Sets the range selector chart's border color.
      • borderLineWidth:number | null - Sets the range selector chart's border line width.
      • caption:string - Sets the caption (title) of the range selector chart.
      • colorScheme:string | null - Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.
      • columnSeriesOverlap:boolean - Enables or disables overlapping of the column series.
      • columnsGapPercent:number - Percentage gap between columns within the same serie.
      • dataField:string | null - Points to a data field in the data source.
      • description:string - Sets the description text of the range selector chart.
      • greyScale:boolean | null - Determines whether to display the range selector chart using greyscale colors.
      • formatFunction:{(value?: any, index?: number, series?: any): string} - Callback function used to format the values.
      • formatSettings:any - Chart Format Settings
      • gridLines:object - Object describing the grid lines properties of the range selector chart's xAxis.
      • labels:object - Object describing the labels properties of the axis.
      • maxValue:any - Sets the maximum value of the range selector chart's xAxis.
      • minValue:any - Sets the minimum value of the range selector chart's xAxis.
      • padding:object - Object describing the padding of the range selector chart.
      • position:string | null - Sets the range selector chart position.
      • renderTo:HTMLElement | null - An HTML element outside the chart to render the range selector chart to.
      • rightToLeft:boolean | null - Sets or gets a value indicating whether the range selector chart's layout is mirrored.
      • seriesGapPercent:number - Percentage gap between columns belonging to different series.
      • seriesGroups:[] | null -

        (Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.

        Please refer to the main seriesGroups property entry for more information and a full subproperty list.

      • serieType:string | null - Sets the range selector 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
      • showBorderLine:boolean | null - Determines whether to display the range selector chart's border line.
      • size:number | null - Sets the size of the range selector chart.
      • skipOverlappingPoints:boolean - Determines whether to display overlapping data points in column, ohlc and candlestick series.
      • titlePadding:object - Sets the padding of the chart's title (caption).
      • unitInterval:number | null - Sets the interval between the units.
      • valueAxis:object - An object with settings about the range selector Chart's y-axis (value axis).
      • visible:boolean - Shows or hides the range selector.
    • text:string - xAxis's text value.
    • textRotationAngle:number | null - Text rotation angle.
    • textRotationPoint:string - Position to rotate the text around.
    • tickMarks:object - Object describing the tick marks properties of the xAxis.
      • Property object's options:
      • color:string - Color of the tick marks.
      • custom:[] | null - An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.
      • dashStyle:string - Tick marks dash style, e.g. '2,2'.
      • lineWidth:number - Line width (in pixels) of the tick marks.
      • size:number - Size (in pixels) of the tick marks.
      • step:number | null - Interval steps between tick mark placements (multiples of the axis unit interval).
      • unitInterval:number - Sets the interval between tick marks.
      • visible:boolean | string -

        Possible values: true, false, 'custom'.

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

    • title:object - Object describing the title of the xAxis.
      • Property object's options:
      • class:string | null - CSS class of the title text.
      • horizontalAlignment:string - Horizontal alignment.
      • text:string - Text of the title.
      • verticalAlignment:string - Vertical alignment.
      • visible:boolean - boolean determining the visibility of the title.
    • toolTipFormatFunction:{(value?: any, index?: number, series?: any): string} - Custom function to format xAxis values in tooltips.
    • toolTipFormatSettings:object - Settings used to format xAxis values in tooltips.
      • Property object's options:
      • dateFormat:string | null - Optional date format string. This property is applicable only when displaying Date objects.
      • decimalPlaces:number | null - Decimal places of numeric values.
      • decimalSeparator:string | 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.
      • negativeWithBrackets:boolean - A boolean value indicating whether to display negative numbers in brackets.
      • prefix:string - Text to prepend to the value.
      • sufix:string - Text to append to the value
      • thousandsSeparator:string | null - A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
    • type:string - 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.
    • unitInterval:number | null - Sets the interval between the units.
    • valuesOnTicks:boolean - Specifies whether the axis values will be aligned with the tick marks.
    • visible:boolean - Shows or hides the xAxis.

    Events

    AannotationClickThe event is raised when the user clicks on a chart annotation.
    AannotationMouseenterThe event is raised when the user moves the cursor above a chart annotation.
    AannotationMouseleaveThe event is raised when the user moves the cursor out of a chart annotation.
    CclickThe event is raised when the user clicks on series element.
    MmouseoutThe event is raised when the user moves the cursor out of a series element.
    MmouseoverThe event is raised when the user moves the cursor above a series element.
    RrangeSelectionChangedThe event is raised after the chart's range selector position changes and after the chart ends rendering.
    RrangeSelectionChangingThe event is raised when the chart's range selector position changes and before the chart starts rendering.
    RrefreshBeginThe event is raised when the chart begins rendering.
    RrefreshEndThe event is raised when the chart finishes rendering.
    TtoggleThe event is raised when a serie is toggled by a user click in the chart's legend or through an API call.

    Methods

    AaddColorSchemeAdds a new color sheme. If a scheme with the same name already exists, the method will update its colors.
    GgetColorSchemeReturns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined.
    GgetItemCoordGets the rendered coordinates of a data point element.
    GgetItemsCountGets the number of rendered items in a specific serie.
    GgetValueAxisLabelsGets the rendered coordinates and values of the valueAxis labels.
    GgetValueAxisRectGets the rendered rectangle coordinates of the valueAxis of specific serie group.
    GgetValueAxisValueGets the valueAxis (vertical axis)'s value.
    GgetXAxisLabelsGets the rendered coordinates and values of the xAxis labels.
    GgetXAxisRectGets the rendered rectangle coordinates of the x-Axis of specific serie group.
    GgetXAxisValueGets the xAxis (horizontal axis)'s value.
    HhideSerieHides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie.
    HhideToolTipHides the current tooltip if visible.
    PprintPrints the chart.
    RrefreshRefreshes the content of the chart element after a property or data update.
    RremoveColorSchemeRemoves an existing color scheme. If the scheme does not exist, the method has no effect.
    SsaveAsJPEGExports the chart's content as JPEG image.
    SsaveAsPNGExports the chart's content as PNG image.
    SsaveAsPDFExports the chart's content as PDF.
    SshowSerieShows a hidden chart serie. The result of calling this function is same as the user checking the legend box of a chart serie.
    SshowToolTipShows a the tooltip for a particular data point.
    UupdateUpdates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values.

    Properties

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

    Sets or gets the animation mode. Animation is disabled when the property is set to 'none'.

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    Default value

    "advanced"
    Example about animation
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animation: 'none',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    animationDurationnumber

    Determines the animation duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range smartChart will reset it to the default value.

    Default value

    300
    Example about animationDuration
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animationDuration: 500,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    backgroundColorstring | null

    Sets the chart's background color. For example: '#DDFFE8' 

    Example about backgroundColor
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	backgroundColor: '#DDFFE8',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    backgroundImagestring

    Sets the chart's background image. For example: 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg'

    Default value

    ""
    Example about backgroundImage
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	backgroundImage: 'chart_background.png',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    borderLineColorstring | null

    Sets the chart's border color. For example: '#098700' 

    Example about borderLineColor
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	borderLineColor: '#098700',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    borderLineWidthnumber

    Sets the chart's border line width.

    Default value

    1
    Example about borderLineWidth
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	borderLineWidth: 2,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    captionstring

    Sets the caption (title) of the chart.

    Default value

    "Caption"
    
	
    
	clipboolean
	
    
			
	
    Determines whether to clip plotted elements that overflow the axis boundaries. 
    
	
    Default value
    true
    

    
				
    Example about clip
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	clip: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"
	
    
			
	
    Sets the chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'. 
    
	
    Default value
    "scheme01"
    

    
				
    Example about colorScheme
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	colorScheme: 'scheme31',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	columnSeriesOverlapboolean
	
    
			
	
    Enables or disables overlapping of the column series. 
    
	
    Default value
    false
    

    
				
    Example about columnSeriesOverlap
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	columnSeriesOverlap: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	crosshairsColorstring | null
	
    
			
	
    Gets or sets the color of the crosshairs lines. The 'enableCrosshairs' property should be 'true'. 
    

    

    
				
    Example about crosshairsColor
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsColor: '#303030',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	crosshairsDashStylestring
	
    
			
	
    Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length. The 'enableCrosshairs' property should be 'true'. For example: '3,3' 
    
	
    Default value
    "2,2"
    

    
				
    Example about crosshairsDashStyle
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsDashStyle: '3,3',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	crosshairsLineWidthnumber
	
    
			
	
    Gets or sets the width of the crosshairs lines. The 'enableCrosshairs' property should be 'true' 
    
	
    Default value
    1
    

    
				
    Example about crosshairsLineWidth
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	crosshairsLineWidth: 2,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	dataSource[]
	
    
			
	
    Sets the chart's data source. 
    

    

    
				
    Example about dataSource
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	descriptionstring
	
    
			
	
    Sets the description text of the chart. 
    
	
    Default value
    "Description"
    

    
				
    
	
    
	disabledboolean
	
    
			
	
    Enables or disables the chart. 
    
	
    Default value
    false
    

    
				
    Example about disabled
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	disabled: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	drawfunction | null
	
    
			
	
    Determines the drawing function of smartChart. When the property is set, you can override the smartChart's drawing. 
    

    

    
				
    Example about draw
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	draw: draw: function (renderer, rect) {
                renderer.path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z', { fill: '#564D90', stroke: '#C14B91' });
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	drawBeforefunction | null
	
    
			
	
    Function for custom drawing before the caption and other chart elements. 
    

    

    
				
    Example about drawBefore
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	drawBefore: drawBefore: function (renderer, rect) {
                renderer.path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z', { fill: '#564D90', stroke: '#C14B91' });
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	enableAxisTextAnimationboolean
	
    
			
	
    Determines if the animation of the axes text is enabled. 
    
	
    Default value
    false
    

    
				
    Example about enableAxisTextAnimation
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	enableAxisTextAnimation: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	enableCrosshairsboolean
	
    
			
	
    Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point. 
    
	
    Default value
    false
    

    
				
    Example about enableCrosshairs
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	enableCrosshairs: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	greyScaleboolean
	
    
			
	
    Determines whether to display the chart using greyscale colors. 
    
	
    Default value
    false
    

    
				
    Example about greyScale
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	greyScale: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	legendLayoutobject | null
	
    
			
	
    Sets the legend's layout. 
    

    

    
				
    Example about legendLayout
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	legendLayout: { flow: 'vertical', width: 50, height: 200, left: 600, top: 0 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	localestring
	
    
			
	
    Sets or gets the locale. Used in conjunction with the property messages. 
    
	
    Default value
    "en"
    

    
				
    Example about locale
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	locale: 'es',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
					
    
					
					localizationobject
					
    
							
	
    Localization object containing culture-specific properties required for formatting currencies, numbers and dates. 
    

    Properties
    	
    decimalSeparator
    	
    patterns
    	
    thousandsSeparator
    
	
    
	decimalSeparatorstring
	
    
			
	
    A symbol used to mark the border between the integer and fractional parts of a number. 
    
	
    Default value
    "."
    

    


							
    Get the decimalSeparator property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.localization.decimalSeparator;
    


    
	
    
	patternsobject | null
	
    
			
	
    An object containing datetime formatting patterns. 
    

    

    


							
    Get the patterns property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let patterns = chart.localization.patterns;
    


    
	
    
	thousandsSeparatorstring
	
    
			
	
    A symbol used to mark the border between thousands, millions, billions, etc. 
    
	
    Default value
    ""
    

    


							
    Get the thousandsSeparator property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.localization.thousandsSeparator;
    


    

    
				
    Example about localization
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	localization: { decimalSeparator: ',', thousandsSeparator: ' ' },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	messagesobject
	
    
			
	
    Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. 
    
	
    Default value



    

    
				
    Example about messages
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	messages: {
                'es': {
                    'invalidRadiusDataField': 'smart-chart: Valor de radiusDataField no valido en [{{index}}]',
                    'invalidSeries': 'smart-chart: Propiedad no valida: cada grupo de series debe tener una propiedad 'series' que debe ser una Array valida.',
                    'invalidSeriesGroups': 'smart-chart: Propiedad no valida: la propiedad 'seriesGroups' es obligatoria y debe ser una Array valida.',
                    'invalidType': 'smart-chart: Tipo de serie no valido "{{type}}".',
                    'missingAxis': 'smart-chart: seriesGroup[{{index}}] le falta a la definicion de {{axis}}.',
                    'missingReference': 'smart-chart: Falta la referencia a {{files}}.',
                    'missingType': 'smart-chart: Propiedad no valida: cada grupo de series debe tener una propiedad 'type' valida.'
                }
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
					
    
					
					paddingobject
					
    
							
	
    Sets the left, top, right and bottom padding of the Chart. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding of the Chart. 
    
	
    Default value
    5
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding of the Chart. 
    
	
    Default value
    5
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding of the Chart. 
    
	
    Default value
    5
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding of the Chart. 
    
	
    Default value
    5
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.padding.top;
    


    

    
				
    Example about padding
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	padding: { left: 10, top: 10, right: 10, bottom: 10 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	renderEngine"" | "SVG" | "HTML5"
	
    
			
	
    Determines the rendering engine used to display the chart. When the property is set to an empty string, smartChart will automatically select an optimal rendering engine depending on the browser capabilities. 
    
	
    Default value
    ""
    

    
				
    Example about renderEngine
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	renderEngine: 'HTML5',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	rightToLeftboolean
	
    
			
	
    Sets or gets a value indicating whether the Chart's layout is mirrored. 
    
	
    Default value
    false
    

    
				
    Example about rightToLeft
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	rightToLeft: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
				
    
				
				seriesGroups[]
				
    
						
	
    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
    	
    annotations
    	
    bands
    	
    columnsGapPercent
    	
    columnsMaxWidth
    	
    columnsMinWidth
    	
    columnsBottomWidthPercent
    	
    columnsTopWidthPercent
    	
    draw
    	
    dataSource
    	
    drawBefore
    	
    enableSelection
    	
    enableSeriesToggle
    	
    endAngle
    	
    formatFunction
    	
    formatSettings
    	
    linesUnselectMode
    	
    offsetX
    	
    offsetY
    	
    orientation
    	
    summary
    	
    polar
    	
    radius
    	
    series
    	
    seriesGapPercent
    	
    skipOverlappingPoints
    	
    showLabels
    	
    spider
    	
    startAngle
    	
    type
    	
    toolTipFormatSettings
    	
    toolTipFormatFunction
    	
    useGradientColors
    	
    valueAxis
    	
    xAxis
    
				
    
				
				annotations[]
				
    
						
	
    An array of chart annotation objects. 
    

    Properties
    	
    fillColor
    	
    height
    	
    lineColor
    	
    offset
    	
    path
    	
    radius
    	
    text
    	
    type
    	
    width
    	
    xValue
    	
    xValue2
    	
    yValue
    	
    yValue2
    
	
    
	fillColorstring | null
	
    
			
	
    Fill/background color of the annotation. 
    

    

    


							
    Get the fillColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColor = chart.seriesGroups[0].annotations[0].fillColor;
    


    
	
    
	heightnumber
	
    
			
	
    Height of the annotation. 
    

    

    


							
    Get the height property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let height = chart.seriesGroups[0].annotations[0].height;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Line color of the annotation. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].annotations[0].lineColor;
    


    
					
    
					
					offsetobject
					
    
							
	
    Custom offset of the annotation relative to xValue & yValue. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber | null
	
    
			
	
    Horizontal offset. 
    

    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].annotations[0].offset.x;
    


    
	
    
	ynumber | null
	
    
			
	
    Vertical offset. 
    

    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].annotations[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].annotations[0].offset;
    


    
	
    
	pathstring | null
	
    
			
	
    Line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'. 
    

    

    


							
    Get the path property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let path = chart.seriesGroups[0].annotations[0].path;
    


    
	
    
	radiusnumber
	
    
			
	
    Radius of the annotation in case its type is 'circle'. 
    

    

    


							
    Get the radius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let radius = chart.seriesGroups[0].annotations[0].radius;
    


    
					
    
					
					textobject
					
    
							
	
    Object describing the text of the annotation. 
    

    Properties
    	
    angle
    	
    class
    	
    fillColor
    	
    horizontalAlignment
    	
    lineColor
    	
    offset
    	
    rotationPoint
    	
    value
    	
    verticalAlignment
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].annotations[0].text.angle;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the annotation. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].annotations[0].text.class;
    


    
	
    
	fillColorstring | null
	
    
			
	
    Inner text color (fill). 
    

    

    


							
    Get the fillColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColor = chart.seriesGroups[0].annotations[0].text.fillColor;
    


    
	
    
	horizontalAlignment"center" | "left" | "right"
	
    
			
	
    Horizontal text alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].annotations[0].text.horizontalAlignment;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Outer text color (stroke). 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].annotations[0].text.lineColor;
    


    
					
    
					
					offsetobject
					
    
							
	
    Offset of the annotation text relative to the base annotation offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    

    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].annotations[0].text.offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    

    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].annotations[0].text.offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].annotations[0].text.offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "centermiddle"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].annotations[0].text.rotationPoint;
    


    
	
    
	valuestring | null
	
    
			
	
    Text of the annotation. 
    

    

    


							
    Get the value property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let value = chart.seriesGroups[0].annotations[0].text.value;
    


    
	
    
	verticalAlignment"center" | "top" | "bottom"
	
    
			
	
    Vertical text alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].annotations[0].text.verticalAlignment;
    


    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.seriesGroups[0].annotations[0].text;
    


    
	
    
	type"text" | "rect" | "circle" | "line" | "path" | "null"
	
    
			
	
    Shape type of the annotation. 
    

    

    


							
    Get the type property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let type = chart.seriesGroups[0].annotations[0].type;
    


    
	
    
	widthnumber
	
    
			
	
    Width of the annotation. 
    

    

    


							
    Get the width property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let width = chart.seriesGroups[0].annotations[0].width;
    


    
	
    
	xValuenumber
	
    
			
	
    Value to determine the horizontal offset of the annotation. 
    

    

    


							
    Get the xValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let xValue = chart.seriesGroups[0].annotations[0].xValue;
    


    
	
    
	xValue2number
	
    
			
	
    Optional 2nd value to determine the horizontal offset of the annotation bottom-right point. 
    

    

    


							
    Get the xValue2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let xValue2 = chart.seriesGroups[0].annotations[0].xValue2;
    


    
	
    
	yValuenumber
	
    
			
	
    Value to determine the vertical offset of the annotation. 
    

    

    


							
    Get the yValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let yValue = chart.seriesGroups[0].annotations[0].yValue;
    


    
	
    
	yValue2number
	
    
			
	
    Optional 2nd value to determine the vertical offset of the annotation's bottom-right point. 
    

    

    


							
    Get the yValue2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let yValue2 = chart.seriesGroups[0].annotations[0].yValue2;
    


    

    


							
    Get the annotations property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let annotations = chart.seriesGroups[0].annotations;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | number | null
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.seriesGroups[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.seriesGroups[0].bands;
    


    
	
    
	columnsGapPercentnumber
	
    
			
	
    Percentage gap between columns within the same serie. 
    
	
    Default value
    25
    

    


							
    Get the columnsGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsGapPercent = chart.seriesGroups[0].columnsGapPercent;
    


    
	
    
	columnsMaxWidthnumber | null
	
    
			
	
    Maximum width of columns in column series. 
    

    

    


							
    Get the columnsMaxWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsMaxWidth = chart.seriesGroups[0].columnsMaxWidth;
    


    
	
    
	columnsMinWidthnumber
	
    
			
	
    Minimum width of columns in column series. 
    
	
    Default value
    1
    

    


							
    Get the columnsMinWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsMinWidth = chart.seriesGroups[0].columnsMinWidth;
    


    
	
    
	columnsBottomWidthPercentnumber
	
    
			
	
    Columns bottom width (as percentage of the total width). 
    
	
    Default value
    100
    

    


							
    Get the columnsBottomWidthPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsBottomWidthPercent = chart.seriesGroups[0].columnsBottomWidthPercent;
    


    
	
    
	columnsTopWidthPercentnumber
	
    
			
	
    Columns top width (as percentage of the total width). 
    
	
    Default value
    100
    

    


							
    Get the columnsTopWidthPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsTopWidthPercent = chart.seriesGroups[0].columnsTopWidthPercent;
    


    
	
    
	drawfunction | null
	
    
			
	
    Determines the drawing function of the series group. When the property is set, you can draw after the series group has been plotted. 
    

    

    


							
    Get the draw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let draw = chart.seriesGroups[0].draw;
    


    
	
    
	dataSourceany
	
    
			
	
    Determines the data source of the serie 
    

    

    


							
    Get the dataSource property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataSource = chart.seriesGroups[0].dataSource;
    


    
	
    
	drawBeforefunction | null
	
    
			
	
    Function for custom drawing before the series group. 
    

    

    


							
    Get the drawBefore property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let drawBefore = chart.seriesGroups[0].drawBefore;
    


    
	
    
	enableSelectionboolean
	
    
			
	
    Determines whether series are selectable. 
    
	
    Default value
    true
    

    


							
    Get the enableSelection property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let enableSelection = chart.seriesGroups[0].enableSelection;
    


    
	
    
	enableSeriesToggleboolean
	
    
			
	
    Determines whether to toggle series visibility after click on a legend's box. 
    
	
    Default value
    true
    

    


							
    Get the enableSeriesToggle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let enableSeriesToggle = chart.seriesGroups[0].enableSeriesToggle;
    


    
	
    
	endAnglenumber
	
    
			
	
    The end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only. 
    
	
    Default value
    360
    

    


							
    Get the endAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let endAngle = chart.seriesGroups[0].endAngle;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format series labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of series labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].formatSettings;
    


    
	
    
	linesUnselectMode"click" | "default"
	
    
			
	
    Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart. 
    
	
    Default value
    "default"
    

    


							
    Get the linesUnselectMode property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let linesUnselectMode = chart.seriesGroups[0].linesUnselectMode;
    


    
	
    
	offsetXnumber
	
    
			
	
    Horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only. 
    

    

    


							
    Get the offsetX property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offsetX = chart.seriesGroups[0].offsetX;
    


    
	
    
	offsetYnumber
	
    
			
	
    Vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only. 
    

    

    


							
    Get the offsetY property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offsetY = chart.seriesGroups[0].offsetY;
    


    
	
    
	orientation"vertical" | "horizontal"
	
    
			
	
    Specifies the orientation of the series group. 
    
	
    Default value
    "vertical"
    

    


							
    Get the orientation property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let orientation = chart.seriesGroups[0].orientation;
    


    
	
    
	summarystring
	
    
			
	
    Specifies the summary of the series group. 
    
	
    Default value
    ""
    

    


							
    Get the summary property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let summary = chart.seriesGroups[0].summary;
    


    
	
    
	polarboolean
	
    
			
	
    When polar is set to true, the chart will render in polar coordinates. 
    
	
    Default value
    false
    

    


							
    Get the polar property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let polar = chart.seriesGroups[0].polar;
    


    
	
    
	radiusnumber
	
    
			
	
    The radius of the polar coordinate system. Applicable to polar and spider charts only. 
    

    

    


							
    Get the radius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let radius = chart.seriesGroups[0].radius;
    


    
				
    
				
				series[]
				
    
						
	
    An array of chart series. 
    

    Properties
    	
    centerOffset
    	
    colorFunction
    	
    colorScheme
    	
    dataField
    	
    dataFieldClose
    	
    dataFieldHigh
    	
    dataFieldLow
    	
    dataFieldOpen
    	
    dataFieldFrom
    	
    dataFieldTo
    	
    radiusDataField
    	
    displayText
    	
    displayTextClose
    	
    displayTextHigh
    	
    displayTextLow
    	
    displayTextOpen
    	
    emptyPointsDisplay
    	
    enableSelection
    	
    enableSeriesToggle
    	
    labelRadius
    	
    formatFunction
    	
    formatSettings
    	
    summary
    	
    endAngle
    	
    fillColor
    	
    fillColorAlt
    	
    fillColorAltSelected
    	
    fillColorSelected
    	
    fillColorSymbol
    	
    fillColorSymbolSelected
    	
    greyScale
    	
    hiddenPointsDisplay
    	
    initialAngle
    	
    innerRadius
    	
    labels
    	
    angle
    	
    autoRotate
    	
    backgroundColor
    	
    backgroundOpacity
    	
    borderColor
    	
    borderOpacity
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    linesAngles
    	
    linesEnabled
    	
    offset
    	
    padding
    	
    radius
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	centerOffsetnumber
	
    
			
	
    Offset from the center point in a pie/donut series. 
    
	
    Default value
    0
    

    


							
    Get the centerOffset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let centerOffset = chart.seriesGroups[0].series[0].centerOffset;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let colorFunction = chart.seriesGroups[0].series[0].colorFunction;
    


    
	
    
	colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"
	
    
			
	
    Color palette to use when rendering the serie. 
    
	
    Default value
    scheme01
    

    


							
    Get the colorScheme property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let colorScheme = chart.seriesGroups[0].series[0].colorScheme;
    


    
	
    
	dataFieldstring
	
    
			
	
    Name of the field in the data source. 
    
	
    Default value
    "null"
    

    


							
    Get the dataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataField = chart.seriesGroups[0].series[0].dataField;
    


    
	
    
	dataFieldClosestring
	
    
			
	
    Data field used in candlestcik and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the dataFieldClose property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataFieldClose = chart.seriesGroups[0].series[0].dataFieldClose;
    


    
	
    
	dataFieldHighstring
	
    
			
	
    Data field used in candlestcik and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the dataFieldHigh property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataFieldHigh = chart.seriesGroups[0].series[0].dataFieldHigh;
    


    
	
    
	dataFieldLowstring
	
    
			
	
    Data field used in candlestcik and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the dataFieldLow property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataFieldLow = chart.seriesGroups[0].series[0].dataFieldLow;
    


    
	
    
	dataFieldOpenstring
	
    
			
	
    Data field used in candlestcik and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the dataFieldOpen property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataFieldOpen = chart.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 chart = document.querySelector('smart-chart');
    
							
     let dataFieldFrom = chart.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 chart = document.querySelector('smart-chart');
    
							
     let dataFieldTo = chart.seriesGroups[0].series[0].dataFieldTo;
    


    
	
    
	radiusDataFieldstring
	
    
			
	
    Data field used in bubble series. 
    
	
    Default value
    "null"
    

    


							
    Get the radiusDataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let radiusDataField = chart.seriesGroups[0].series[0].radiusDataField;
    


    
	
    
	displayTextstring
	
    
			
	
    Name to display for this serie. 
    
	
    Default value
    "null"
    

    


							
    Get the displayText property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayText = chart.seriesGroups[0].series[0].displayText;
    


    
	
    
	displayTextClosestring
	
    
			
	
    Name to display for candlestick and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the displayTextClose property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayTextClose = chart.seriesGroups[0].series[0].displayTextClose;
    


    
	
    
	displayTextHighstring
	
    
			
	
    Name to display for candlestick and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the displayTextHigh property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayTextHigh = chart.seriesGroups[0].series[0].displayTextHigh;
    


    
	
    
	displayTextLowstring
	
    
			
	
    Name to display for candlestick and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the displayTextLow property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayTextLow = chart.seriesGroups[0].series[0].displayTextLow;
    


    
	
    
	displayTextOpenstring
	
    
			
	
    Name to display for candlestick and ohlc series. 
    
	
    Default value
    "null"
    

    


							
    Get the displayTextOpen property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayTextOpen = chart.seriesGroups[0].series[0].displayTextOpen;
    


    
	
    
	emptyPointsDisplay"connect" | "skip" | "zero"
	
    
			
	
    Determines how to display value gaps in line series. 
    
	
    Default value
    "skip"
    

    


							
    Get the emptyPointsDisplay property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let emptyPointsDisplay = chart.seriesGroups[0].series[0].emptyPointsDisplay;
    


    
	
    
	enableSelectionboolean
	
    
			
	
    Determines whether the serie is selectable. 
    
	
    Default value
    true
    

    


							
    Get the enableSelection property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let enableSelection = chart.seriesGroups[0].series[0].enableSelection;
    


    
	
    
	enableSeriesToggleboolean
	
    
			
	
    Determines whether to toggle the series visibility after click on a legend's box. 
    
	
    Default value
    true
    

    


							
    Get the enableSeriesToggle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let enableSeriesToggle = chart.seriesGroups[0].series[0].enableSeriesToggle;
    


    
	
    
	labelRadiusnumber
	
    
			
	
    Determines the labels rotation radius when the Chart is 'pie' or 'donut'. 
    
	
    Default value
    0
    

    


							
    Get the labelRadius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labelRadius = chart.seriesGroups[0].series[0].labelRadius;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].series[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].series[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].series[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].series[0].formatSettings;
    


    
	
    
	summarystring
	
    
			
	
    Specifies the summary of the series group. 
    
	
    Default value
    ""
    

    


							
    Get the summary property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let summary = chart.seriesGroups[0].series[0].summary;
    


    
	
    
	endAnglenumber
	
    
			
	
    Maximum angle in a pie, donut, polar and spider series. 
    
	
    Default value
    360
    

    


							
    Get the endAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let endAngle = chart.seriesGroups[0].series[0].endAngle;
    


    
	
    
	fillColorstring | null
	
    
			
	
    Fill color for the serie. 
    

    

    


							
    Get the fillColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColor = chart.seriesGroups[0].series[0].fillColor;
    


    
	
    
	fillColorAltstring | null
	
    
			
	
    Alternating fill color for the serie. Applicable to OHLC series only. 
    

    

    


							
    Get the fillColorAlt property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColorAlt = chart.seriesGroups[0].series[0].fillColorAlt;
    


    
	
    
	fillColorAltSelectedstring | null
	
    
			
	
    Alternating fill color for the serie when selected. Applicable to OHLC series only. 
    

    

    


							
    Get the fillColorAltSelected property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColorAltSelected = chart.seriesGroups[0].series[0].fillColorAltSelected;
    


    
	
    
	fillColorSelectedstring | null
	
    
			
	
    Fill color for the serie when selected. 
    

    

    


							
    Get the fillColorSelected property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColorSelected = chart.seriesGroups[0].series[0].fillColorSelected;
    


    
	
    
	fillColorSymbolstring | null
	
    
			
	
    Fill color for the marker symbols in the serie. 
    

    

    


							
    Get the fillColorSymbol property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColorSymbol = chart.seriesGroups[0].series[0].fillColorSymbol;
    


    
	
    
	fillColorSymbolSelectedstring | null
	
    
			
	
    Fill color for the the marker symbols in serie when selected. 
    

    

    


							
    Get the fillColorSymbolSelected property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let fillColorSymbolSelected = chart.seriesGroups[0].series[0].fillColorSymbolSelected;
    


    
	
    
	greyScaleboolean | null
	
    
			
	
    Determines whether to display the serie in grey scale. 
    
	
    Default value
    false
    

    


							
    Get the greyScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let greyScale = chart.seriesGroups[0].series[0].greyScale;
    


    
	
    
	hiddenPointsDisplayboolean
	
    
			
	
    Determines whether to hide slices of toggled points in pie and donut series. 
    
	
    Default value
    false
    

    


							
    Get the hiddenPointsDisplay property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let hiddenPointsDisplay = chart.seriesGroups[0].series[0].hiddenPointsDisplay;
    


    
	
    
	initialAnglenumber
	
    
			
	
    Initial angle in pie and donut series. 
    
	
    Default value
    0
    

    


							
    Get the initialAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let initialAngle = chart.seriesGroups[0].series[0].initialAngle;
    


    
	
    
	innerRadiusnumber
	
    
			
	
    Inner radius of donut series in pixels or percents. 
    
	
    Default value
    0
    

    


							
    Get the innerRadius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let innerRadius = chart.seriesGroups[0].series[0].innerRadius;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    
	
    Default value
    null
    Properties
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].series[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.seriesGroups[0].series[0].autoRotate;
    


    
	
    
	backgroundColorstring | null
	
    
			
	
    Labels background color. 
    

    

    


							
    Get the backgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundColor = chart.seriesGroups[0].series[0].backgroundColor;
    


    
	
    
	backgroundOpacitynumber | null
	
    
			
	
    Labels background opacity. 
    
	
    Default value
    1
    

    


							
    Get the backgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundOpacity = chart.seriesGroups[0].series[0].backgroundOpacity;
    


    
	
    
	borderColorstring | null
	
    
			
	
    Labels border line color. 
    

    

    


							
    Get the borderColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderColor = chart.seriesGroups[0].series[0].borderColor;
    


    
	
    
	borderOpacitynumber | null
	
    
			
	
    Labels border line opacity. 
    
	
    Default value
    1
    

    


							
    Get the borderOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderOpacity = chart.seriesGroups[0].series[0].borderOpacity;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].series[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].series[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].series[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].series[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].series[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].series[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].series[0].horizontalAlignment;
    


    
	
    
	linesAnglesboolean
	
    
			
	
    Determines whether to use direct lines for the labels in pie/donut series. 
    
	
    Default value
    true
    

    


							
    Get the linesAngles property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let linesAngles = chart.seriesGroups[0].series[0].linesAngles;
    


    
	
    
	linesEnabledboolean
	
    
			
	
    Determines whether to use lines for the labels in pie/donut series. 
    
	
    Default value
    true
    

    


							
    Get the linesEnabled property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let linesEnabled = chart.seriesGroups[0].series[0].linesEnabled;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].series[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].series[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].series[0].offset;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the labels. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].series[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].series[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].series[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].series[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.seriesGroups[0].series[0].padding;
    


    
	
    
	radiusnumber | null
	
    
			
	
    Radius of the labels in pie/donut series. 
    

    

    


							
    Get the radius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let radius = chart.seriesGroups[0].series[0].radius;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].series[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].series[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].series[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].series[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].series[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.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 chart = document.querySelector('smart-chart');
    
							
     let legendFillColor = chart.seriesGroups[0].series[0].labels[0].legendFillColor;
    


    
	
    
	legendFormatFunctionfunction | null
	
    
			
	
    Legend data formatting function for the values in the serie. 
    

    

    


							
    Get the legendFormatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let legendFormatFunction = chart.seriesGroups[0].series[0].labels[0].legendFormatFunction;
    


    
					
    
					
					legendFormatSettingsobject
					
    
							
	
    Legend data formatting settings for the values in the serie. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].thousandsSeparator;
    


    

    


							
    Get the legendFormatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let legendFormatSettings = chart.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 chart = document.querySelector('smart-chart');
    
							
     let legendLineColor = chart.seriesGroups[0].series[0].labels[0].legendLineColor;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Line color for the serie. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].series[0].labels[0].lineColor;
    


    
	
    
	lineColorSelectedstring | null
	
    
			
	
    Line color for the serie when selected. 
    

    

    


							
    Get the lineColorSelected property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColorSelected = chart.seriesGroups[0].series[0].labels[0].lineColorSelected;
    


    
	
    
	lineColorSymbolstring | null
	
    
			
	
    Line color for the marker symbols in serie. 
    

    

    


							
    Get the lineColorSymbol property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColorSymbol = chart.seriesGroups[0].series[0].labels[0].lineColorSymbol;
    


    
	
    
	lineColorSymbolSelectedstring | null
	
    
			
	
    Line color for the marker symbols in the serie when selected. 
    

    

    


							
    Get the lineColorSymbolSelected property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColorSymbolSelected = chart.seriesGroups[0].series[0].labels[0].lineColorSymbolSelected;
    


    
	
    
	lineDashStylestring | null
	
    
			
	
    A string sequence of numbers represening line and space lengths, e.g. '2,2'. 
    

    

    


							
    Get the lineDashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineDashStyle = chart.seriesGroups[0].series[0].labels[0].lineDashStyle;
    


    
	
    
	linesUnselectMode"click" | "default"
	
    
			
	
    Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart. 
    
	
    Default value
    "default"
    

    


							
    Get the linesUnselectMode property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let linesUnselectMode = chart.seriesGroups[0].series[0].labels[0].linesUnselectMode;
    


    
	
    
	lineWidthstring | null | number
	
    
			
	
    Determines the line tickness of the items in this serie. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.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 chart = document.querySelector('smart-chart');
    
							
     let lineWidthSelected = chart.seriesGroups[0].series[0].labels[0].lineWidthSelected;
    


    
	
    
	minRadiusstring | null | number
	
    
			
	
    Min radius of bubble series in pixels or percents. 
    

    

    


							
    Get the minRadius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minRadius = chart.seriesGroups[0].series[0].labels[0].minRadius;
    


    
	
    
	maxRadiusstring | null | number
	
    
			
	
    Max radius of bubble series in pixels or percents. 
    

    

    


							
    Get the maxRadius property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxRadius = chart.seriesGroups[0].series[0].labels[0].maxRadius;
    


    
	
    
	opacitynumber
	
    
			
	
    Determines the opacity of the items in this serie. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.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 chart = document.querySelector('smart-chart');
    
							
     let radius = chart.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 chart = document.querySelector('smart-chart');
    
							
     let selectedRadiusChange = chart.seriesGroups[0].series[0].labels[0].selectedRadiusChange;
    


    
	
    
	startAnglenumber
	
    
			
	
    Minimum angle in a pie, donut, polar and spider series. 
    
	
    Default value
    0
    

    


							
    Get the startAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let startAngle = chart.seriesGroups[0].series[0].labels[0].startAngle;
    


    
	
    
	symbolSizenumber
	
    
			
	
    Determines the size of the symbol element. 
    

    

    


							
    Get the symbolSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let symbolSize = chart.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 chart = document.querySelector('smart-chart');
    
							
     let symbolSizeSelected = chart.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 chart = document.querySelector('smart-chart');
    
							
     let symbolType = chart.seriesGroups[0].series[0].labels[0].symbolType;
    


    
	
    
	toolTipBackgroundstring | null
	
    
			
	
    Determines the tooltip's background. 
    

    

    


							
    Get the toolTipBackground property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipBackground = chart.seriesGroups[0].series[0].labels[0].toolTipBackground;
    


    
	
    
	toolTipClassstring | null
	
    
			
	
    Determines the tooltip's CSS class name. 
    

    

    


							
    Get the toolTipClass property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipClass = chart.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 chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatFunction = chart.seriesGroups[0].series[0].labels[0].toolTipFormatFunction;
    


    
					
    
					
					toolTipFormatSettingsobject
					
    
							
	
    Tooltip data formatting settings for the values in the serie. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].thousandsSeparator;
    


    

    


							
    Get the toolTipFormatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatSettings = chart.seriesGroups[0].series[0].labels[0].toolTipFormatSettings;
    


    
	
    
	toolTipLineColorstring | null
	
    
			
	
    Determines the tooltip's border lines color. 
    

    

    


							
    Get the toolTipLineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipLineColor = chart.seriesGroups[0].series[0].labels[0].toolTipLineColor;
    


    
	
    
	useGradientColorsboolean
	
    
			
	
    Determines whether to use color gradients. 
    
	
    Default value
    false
    

    


							
    Get the useGradientColors property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let useGradientColors = chart.seriesGroups[0].series[0].labels[0].useGradientColors;
    


    

    


							
    Get the series property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let series = chart.seriesGroups[0].series;
    


    
	
    
	seriesGapPercentnumber
	
    
			
	
    Percentage gap between columns belonging to different series. 
    
	
    Default value
    10
    

    


							
    Get the seriesGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let seriesGapPercent = chart.seriesGroups[0].seriesGapPercent;
    


    
	
    
	skipOverlappingPointsboolean
	
    
			
	
    Determines whether to display overlapping data points in column, ohlc and candlestick series. 
    
	
    Default value
    true
    

    


							
    Get the skipOverlappingPoints property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let skipOverlappingPoints = chart.seriesGroups[0].skipOverlappingPoints;
    


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

    


							
    Get the showLabels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let showLabels = chart.seriesGroups[0].showLabels;
    


    
	
    
	spiderboolean
	
    
			
	
    When spider is set to true, the chart will render in polar coordinates. 
    
	
    Default value
    false
    

    


							
    Get the spider property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let spider = chart.seriesGroups[0].spider;
    


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

    


							
    Get the startAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let startAngle = chart.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 chart = document.querySelector('smart-chart');
    
							
     let type = chart.seriesGroups[0].type;
    


    
					
    
					
					toolTipFormatSettingsobject
					
    
							
	
    Object describing the format settings of series tooltips. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].toolTipFormatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].toolTipFormatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].toolTipFormatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].toolTipFormatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].toolTipFormatSettings[0].thousandsSeparator;
    


    

    


							
    Get the toolTipFormatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatSettings = chart.seriesGroups[0].toolTipFormatSettings;
    


    
	
    
	toolTipFormatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Sets the tooltip format function. The function is used to format the tooltips of the Chart serie 
    

    

    


							
    Get the toolTipFormatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatFunction = chart.seriesGroups[0].toolTipFormatFunction;
    


    
	
    
	useGradientColorsboolean
	
    
			
	
    Determines whether to use color gradients. 
    
	
    Default value
    false
    

    


							
    Get the useGradientColors property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let useGradientColors = chart.seriesGroups[0].useGradientColors;
    


    
					
    
					
					valueAxisobject
					
    
							
	
    Object describing the valueAxis for this group. smartChart allows you to use a common valueAxis and/or multiple value axes per serie group. 
    

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baselineValue
    	
    customDraw
    	
    description
    	
    displayValueAxis
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    textRotationAngle
    	
    type
    	
    textRotationPoint
    	
    tickMarks
    	
    title
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.seriesGroups[0].valueAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the axis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.seriesGroups[0].valueAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].valueAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].valueAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].valueAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null | number
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].valueAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].valueAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].valueAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.seriesGroups[0].valueAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.seriesGroups[0].valueAxis[0].bands;
    


    
	
    
	baselineValueany
	
    
			
	
    Sets the baseline value for the axis. 
    
	
    Default value
    0
    

    


							
    Get the baselineValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baselineValue = chart.seriesGroups[0].valueAxis[0].baselineValue;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.seriesGroups[0].valueAxis[0].customDraw;
    


    
	
    
	descriptionstring
	
    
			
	
    Sets the description of the value axis. 
    
	
    Default value
    ""
    

    


							
    Get the description property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let description = chart.seriesGroups[0].valueAxis[0].description;
    


    
	
    
	displayValueAxisboolean
	
    
			
	
    Specifies whether the values axis is displayed. 
    
	
    Default value
    true
    

    


							
    Get the displayValueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayValueAxis = chart.seriesGroups[0].valueAxis[0].displayValueAxis;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.seriesGroups[0].valueAxis[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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].valueAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].valueAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].valueAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].valueAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].valueAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].valueAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].valueAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].valueAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].valueAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthstring | number | null
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].valueAxis[0].gridLines[0].lineWidth;
    


    
	
    
	sizestring | number | null
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.seriesGroups[0].valueAxis[0].gridLines[0].size;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].valueAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].valueAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.seriesGroups[0].valueAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].valueAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.seriesGroups[0].valueAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].valueAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].valueAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].valueAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].valueAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].valueAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].valueAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].valueAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].valueAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].valueAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].valueAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].valueAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].valueAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.seriesGroups[0].valueAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].valueAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].valueAxis[0].line.dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].valueAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.seriesGroups[0].valueAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.seriesGroups[0].valueAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.seriesGroups[0].valueAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].valueAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].valueAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].valueAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].valueAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].valueAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].valueAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.seriesGroups[0].valueAxis[0].padding;
    


    
	
    
	position"left" | "right" | "top" | "bottom"
	
    
			
	
    Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available. 
    
	
    Default value
    "left"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.seriesGroups[0].valueAxis[0].position;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.seriesGroups[0].valueAxis[0].textRotationAngle;
    


    
	
    
	typestring
	
    
			
	
    Value Axis Type 
    
	
    Default value
    ""
    

    


							
    Get the type property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let type = chart.seriesGroups[0].valueAxis[0].type;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.seriesGroups[0].valueAxis[0].textRotationPoint;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].valueAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].valueAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].valueAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].valueAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.seriesGroups[0].valueAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].valueAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].valueAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.seriesGroups[0].valueAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the valueAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].valueAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].valueAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.seriesGroups[0].valueAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].valueAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.seriesGroups[0].valueAxis[0].title;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].valueAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.seriesGroups[0].valueAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the valueAxis. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].valueAxis[0].visible;
    


    

    


							
    Get the valueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valueAxis = chart.seriesGroups[0].valueAxis;
    


    
					
    
					
					xAxisobject
					
    
							
	
    Object describing the xAxis for this group. 
    

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baseUnit
    	
    customDraw
    	
    dataField
    	
    dateFormat
    	
    displayText
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    rangeSelector
    	
    text
    	
    textRotationAngle
    	
    textRotationPoint
    	
    tickMarks
    	
    title
    	
    toolTipFormatFunction
    	
    toolTipFormatSettings
    	
    type
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.seriesGroups[0].xAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.seriesGroups[0].xAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.seriesGroups[0].xAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the xAxis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.seriesGroups[0].xAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].xAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null | number
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].xAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].xAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.seriesGroups[0].xAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.seriesGroups[0].xAxis[0].bands;
    


    
	
    
	baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
	
    
			
	
    The base unit when used with 'date' axis. 
    

    

    


							
    Get the baseUnit property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baseUnit = chart.seriesGroups[0].xAxis[0].baseUnit;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.seriesGroups[0].xAxis[0].customDraw;
    


    
	
    
	dataFieldstring
	
    
			
	
    Points to a data field in the data source. 
    
	
    Default value
    ""
    

    


							
    Get the dataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataField = chart.seriesGroups[0].xAxis[0].dataField;
    


    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].dateFormat;
    


    
	
    
	displayTextstring | null
	
    
			
	
    Optional custom xAxis display text. 
    

    

    


							
    Get the displayText property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayText = chart.seriesGroups[0].xAxis[0].displayText;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthstring | number | null
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.seriesGroups[0].xAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].xAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.seriesGroups[0].xAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].xAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].xAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].xAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].xAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].xAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].xAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].xAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].xAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].xAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.seriesGroups[0].xAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].line.dashStyle;
    


    
	
    
	lineWidthstring | number | null
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.seriesGroups[0].xAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.seriesGroups[0].xAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.seriesGroups[0].xAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].xAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].xAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal xAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].xAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical xAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].xAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical xAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].xAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal xAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].xAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.seriesGroups[0].xAxis[0].padding;
    


    
	
    
	position"bottom" | "top" | "left" | "right"
	
    
			
	
    Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available. 
    
	
    Default value
    "bottom"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.seriesGroups[0].xAxis[0].position;
    


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

    Properties
    	
    backgroundColor
    	
    backgroundImage
    	
    baseUnit
    	
    borderLineColor
    	
    borderLineWidth
    	
    caption
    	
    colorScheme
    	
    columnSeriesOverlap
    	
    columnsGapPercent
    	
    dataField
    	
    description
    	
    greyScale
    	
    gridLines
    	
    formatFunction
    	
    formatSettings
    	
    labels
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    renderTo
    	
    rightToLeft
    	
    seriesGapPercent
    	
    seriesGroups
    	
    serieType
    	
    showBorderLine
    	
    size
    	
    skipOverlappingPoints
    	
    titlePadding
    	
    unitInterval
    	
    valueAxis
    	
    visible
    
	
    
	backgroundColorstring | null
	
    
			
	
    Sets the range selector chart's background color. 
    

    

    


							
    Get the backgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundColor = chart.seriesGroups[0].xAxis[0].rangeSelector.backgroundColor;
    


    
	
    
	backgroundImagestring
	
    
			
	
    Sets the range selector chart's background image. 
    
	
    Default value
    ""
    

    


							
    Get the backgroundImage property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundImage = chart.seriesGroups[0].xAxis[0].rangeSelector.backgroundImage;
    


    
	
    
	baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
	
    
			
	
    The base unit when used with 'date' axis. 
    

    

    


							
    Get the baseUnit property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baseUnit = chart.seriesGroups[0].xAxis[0].rangeSelector.baseUnit;
    


    
	
    
	borderLineColorstring | null
	
    
			
	
    Sets the range selector chart's border color. 
    

    

    


							
    Get the borderLineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderLineColor = chart.seriesGroups[0].xAxis[0].rangeSelector.borderLineColor;
    


    
	
    
	borderLineWidthnumber | null
	
    
			
	
    Sets the range selector chart's border line width. 
    

    

    


							
    Get the borderLineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderLineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.borderLineWidth;
    


    
	
    
	captionstring
	
    
			
	
    Sets the caption (title) of the range selector chart. 
    
	
    Default value
    ""
    

    


							
    Get the caption property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let caption = chart.seriesGroups[0].xAxis[0].rangeSelector.caption;
    


    
	
    
	colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"
	
    
			
	
    Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'. 
    
	
    Default value
    scheme01
    

    


							
    Get the colorScheme property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let colorScheme = chart.seriesGroups[0].xAxis[0].rangeSelector.colorScheme;
    


    
	
    
	columnSeriesOverlapboolean
	
    
			
	
    Enables or disables overlapping of the column series. 
    
	
    Default value
    false
    

    


							
    Get the columnSeriesOverlap property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnSeriesOverlap = chart.seriesGroups[0].xAxis[0].rangeSelector.columnSeriesOverlap;
    


    
	
    
	columnsGapPercentnumber
	
    
			
	
    Percentage gap between columns within the same serie. 
    
	
    Default value
    25
    

    


							
    Get the columnsGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsGapPercent = chart.seriesGroups[0].xAxis[0].rangeSelector.columnsGapPercent;
    


    
	
    
	dataFieldstring | null
	
    
			
	
    Points to a data field in the data source. 
    

    

    


							
    Get the dataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataField = chart.seriesGroups[0].xAxis[0].rangeSelector.dataField;
    


    
	
    
	descriptionstring
	
    
			
	
    Sets the description text of the range selector chart. 
    
	
    Default value
    ""
    

    


							
    Get the description property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let description = chart.seriesGroups[0].xAxis[0].rangeSelector.description;
    


    
	
    
	greyScaleboolean | null
	
    
			
	
    Determines whether to display the range selector chart using greyscale colors. 
    
	
    Default value
    false
    

    


							
    Get the greyScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let greyScale = chart.seriesGroups[0].xAxis[0].rangeSelector.greyScale;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the range selector chart's xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.seriesGroups[0].xAxis[0].rangeSelector.gridLines;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the values. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.formatFunction;
    


    
	
    
	formatSettingsany
	
    
			
	
    Chart Format Settings 
    

    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.formatSettings;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.seriesGroups[0].xAxis[0].rangeSelector.labels;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the range selector chart's xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the range selector chart's xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the range selector chart. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].xAxis[0].rangeSelector.padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.seriesGroups[0].xAxis[0].rangeSelector.padding;
    


    
	
    
	position"bottom" | "top" | "left" | "right"
	
    
			
	
    Sets the range selector chart position. 
    
	
    Default value
    left
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.seriesGroups[0].xAxis[0].rangeSelector.position;
    


    
	
    
	renderToHTMLElement | null
	
    
			
	
    An HTML element outside the chart to render the range selector chart to. 
    

    

    


							
    Get the renderTo property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let renderTo = chart.seriesGroups[0].xAxis[0].rangeSelector.renderTo;
    


    
	
    
	rightToLeftboolean | null
	
    
			
	
    Sets or gets a value indicating whether the range selector chart's layout is mirrored. 
    
	
    Default value
    false
    

    


							
    Get the rightToLeft property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rightToLeft = chart.seriesGroups[0].xAxis[0].rangeSelector.rightToLeft;
    


    
	
    
	seriesGapPercentnumber
	
    
			
	
    Percentage gap between columns belonging to different series. 
    
	
    Default value
    10
    

    


							
    Get the seriesGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let seriesGapPercent = chart.seriesGroups[0].xAxis[0].rangeSelector.seriesGapPercent;
    


    
	
    
	seriesGroups[] | null
	
    
			
	
    (Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.
    Please refer to the main seriesGroups property entry for more information and a full subproperty list.
     
    

    

    


							
    Get the seriesGroups property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let seriesGroups = chart.seriesGroups[0].xAxis[0].rangeSelector.seriesGroups;
    


    
	
    
	serieType"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 range selector 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
    area
    

    


							
    Get the serieType property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let serieType = chart.seriesGroups[0].xAxis[0].rangeSelector.serieType;
    


    
	
    
	showBorderLineboolean | null
	
    
			
	
    Determines whether to display the range selector chart's border line. 
    
	
    Default value
    false
    

    


							
    Get the showBorderLine property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let showBorderLine = chart.seriesGroups[0].xAxis[0].rangeSelector.showBorderLine;
    


    
	
    
	sizenumber | null
	
    
			
	
    Sets the size of the range selector chart. 
    

    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.seriesGroups[0].xAxis[0].rangeSelector.size;
    


    
	
    
	skipOverlappingPointsboolean
	
    
			
	
    Determines whether to display overlapping data points in column, ohlc and candlestick series. 
    
	
    Default value
    true
    

    


							
    Get the skipOverlappingPoints property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let skipOverlappingPoints = chart.seriesGroups[0].xAxis[0].rangeSelector.skipOverlappingPoints;
    


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

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    10
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    5
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    5
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    5
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.top;
    


    

    


							
    Get the titlePadding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let titlePadding = chart.seriesGroups[0].xAxis[0].rangeSelector.titlePadding;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.unitInterval;
    


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

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baselineValue
    	
    customDraw
    	
    displayValueAxis
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    textRotationAngle
    	
    textRotationPoint
    	
    type
    	
    tickMarks
    	
    title
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the axis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands;
    


    
	
    
	baselineValueany
	
    
			
	
    Sets the baseline value for the axis. 
    
	
    Default value
    0
    

    


							
    Get the baselineValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baselineValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].baselineValue;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].customDraw;
    


    
	
    
	displayValueAxisboolean
	
    
			
	
    Specifies whether the values axis is displayed. 
    
	
    Default value
    true
    

    


							
    Get the displayValueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayValueAxis = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding;
    


    
	
    
	position"left" | "right" | "top" | "bottom"
	
    
			
	
    Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available. 
    
	
    Default value
    "left"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].position;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;
    


    
	
    
	typestring
	
    
			
	
    Value Axis Type 
    
	
    Default value
    ""
    

    


							
    Get the type property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let type = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].type;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the valueAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the valueAxis. 
    
	
    Default value
    false
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].visible;
    


    

    


							
    Get the valueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valueAxis = chart.seriesGroups[0].xAxis[0].rangeSelector.valueAxis;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the range selector. 
    
	
    Default value
    false
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].rangeSelector.visible;
    


    

    


							
    Get the rangeSelector property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rangeSelector = chart.seriesGroups[0].xAxis[0].rangeSelector;
    


    
	
    
	textstring
	
    
			
	
    xAxis's text value. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.seriesGroups[0].xAxis[0].text;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.seriesGroups[0].xAxis[0].textRotationAngle;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.seriesGroups[0].xAxis[0].textRotationPoint;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.seriesGroups[0].xAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.seriesGroups[0].xAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.seriesGroups[0].xAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.seriesGroups[0].xAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.seriesGroups[0].xAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.seriesGroups[0].xAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.seriesGroups[0].xAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the xAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.seriesGroups[0].xAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.seriesGroups[0].xAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.seriesGroups[0].xAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.seriesGroups[0].xAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.seriesGroups[0].xAxis[0].title;
    


    
	
    
	toolTipFormatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Custom function to format xAxis values in tooltips. 
    

    

    


							
    Get the toolTipFormatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatFunction = chart.seriesGroups[0].xAxis[0].toolTipFormatFunction;
    


    
					
    
					
					toolTipFormatSettingsobject
					
    
							
	
    Settings used to format xAxis values in tooltips. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.seriesGroups[0].xAxis[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.seriesGroups[0].xAxis[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].thousandsSeparator;
    


    

    


							
    Get the toolTipFormatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatSettings = chart.seriesGroups[0].xAxis[0].toolTipFormatSettings;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let type = chart.seriesGroups[0].xAxis[0].type;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.seriesGroups[0].xAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.seriesGroups[0].xAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the xAxis. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.seriesGroups[0].xAxis[0].visible;
    


    

    


							
    Get the xAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let xAxis = chart.seriesGroups[0].xAxis;
    


    

    
				
    
	
    
	showBorderLineboolean
	
    
			
	
    Determines whether to display the chart's border line. 
    
	
    Default value
    true
    

    
				
    Example about showBorderLine
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showBorderLine: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	showLegendboolean
	
    
			
	
    Determines whether to show or hide the chart series legend. 
    
	
    Default value
    true
    

    
				
    Example about showLegend
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showLegend: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	showToolTipsboolean
	
    
			
	
    Enables or disables the chart tooltips. 
    
	
    Default value
    true
    

    
				
    Example about showToolTips
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showToolTips: false,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	showToolTipsOnAllSeriesboolean
	
    
			
	
    Determines whether to show a composite tooltip containing information for all series. 
    
	
    Default value
    false
    

    
				
    Example about showToolTipsOnAllSeries
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	showToolTipsOnAllSeries: true,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	themestring
	
    
			
	
    Determines the set of default background, line, text and band colors that will be used in the Chart. 
    
	
    Default value
    "light"
    

    
				
    Example about theme
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	theme: 'dark',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

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

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    10
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.titlePadding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    5
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.titlePadding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    5
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.titlePadding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    5
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.titlePadding.top;
    


    

    
				
    Example about titlePadding
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	titlePadding: { top: 20, bottom: 50 },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	toolTipBackgroundstring | null
	
    
			
	
    Tooltip background color. 
    

    

    
				
    Example about toolTipBackground
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipBackground: '#C0C0C0',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	toolTipFormatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    User defined tooltip text formatting callback function. 
    

    

    
				
    Example about toolTipFormatFunction
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipFormatFunction: toolTipFormatFunction: function (value, itemIndex, serie, group, xAxisValue, xAxis) {
                return 'Highlighted value' + value;
            },
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	toolTipHideDelaynumber
	
    
			
	
    Determines the tooltip hide delay in milliseconds. 
    
	
    Default value
    4000
    

    
				
    Example about toolTipHideDelay
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipHideDelay: 10000,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	toolTipLineColorstring | null
	
    
			
	
    Tooltip line color. 
    

    

    
				
    Example about toolTipLineColor
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipLineColor: '#B200FF',
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

    
	
    
	toolTipShowDelaynumber
	
    
			
	
    Determines the tooltip show delay in milliseconds. Values may range from 0 to 10000 [ms]. 
    
	
    Default value
    300
    

    
				
    Example about toolTipShowDelay
    
const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	toolTipShowDelay: 1000,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

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

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baselineValue
    	
    customDraw
    	
    description
    	
    displayValueAxis
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    type
    	
    textRotationAngle
    	
    textRotationPoint
    	
    tickMarks
    	
    title
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.valueAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.valueAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.valueAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the axis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.valueAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.valueAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.valueAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.valueAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.valueAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.valueAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.valueAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.valueAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.valueAxis[0].bands;
    


    
	
    
	baselineValueany
	
    
			
	
    Sets the baseline value for the axis. 
    
	
    Default value
    0
    

    


							
    Get the baselineValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baselineValue = chart.valueAxis[0].baselineValue;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.valueAxis[0].customDraw;
    


    
	
    
	descriptionstring
	
    
			
	
    Sets the description of the value axis. 
    
	
    Default value
    ""
    

    


							
    Get the description property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let description = chart.valueAxis[0].description;
    


    
	
    
	displayValueAxisboolean
	
    
			
	
    Specifies whether the values axis is displayed. 
    
	
    Default value
    true
    

    


							
    Get the displayValueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayValueAxis = chart.valueAxis[0].displayValueAxis;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.valueAxis[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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.valueAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.valueAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.valueAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.valueAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.valueAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.valueAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.valueAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.valueAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.valueAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.valueAxis[0].gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.valueAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.valueAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.valueAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.valueAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.valueAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.valueAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.valueAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.valueAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.valueAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.valueAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.valueAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.valueAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.valueAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.valueAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.valueAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.valueAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.valueAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.valueAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.valueAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.valueAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.valueAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.valueAxis[0].line.dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.valueAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.valueAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.valueAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.valueAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.valueAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.valueAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.valueAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.valueAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.valueAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.valueAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.valueAxis[0].padding;
    


    
	
    
	position"left" | "right" | "top" | "bottom"
	
    
			
	
    Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available. 
    
	
    Default value
    "left"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.valueAxis[0].position;
    


    
	
    
	typestring
	
    
			
	
    Value Axis Type 
    
	
    Default value
    ""
    

    


							
    Get the type property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let type = chart.valueAxis[0].type;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.valueAxis[0].textRotationAngle;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.valueAxis[0].textRotationPoint;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.valueAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.valueAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.valueAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.valueAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.valueAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.valueAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.valueAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.valueAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the valueAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.valueAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.valueAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.valueAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.valueAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.valueAxis[0].title;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.valueAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.valueAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the valueAxis. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.valueAxis[0].visible;
    


    

    
				
    
					
    
					
					xAxisobject
					
    
							
	
    Sets the Chart's xAxis. 
    

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baseUnit
    	
    customDraw
    	
    dataField
    	
    dateFormat
    	
    displayText
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    rangeSelector
    	
    text
    	
    textRotationAngle
    	
    textRotationPoint
    	
    tickMarks
    	
    title
    	
    toolTipFormatFunction
    	
    toolTipFormatSettings
    	
    type
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.xAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.xAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.xAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the xAxis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.xAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.xAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.xAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.xAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.xAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.xAxis[0].bands;
    


    
	
    
	baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
	
    
			
	
    The base unit when used with 'date' axis. 
    

    

    


							
    Get the baseUnit property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baseUnit = chart.xAxis[0].baseUnit;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.xAxis[0].customDraw;
    


    
	
    
	dataFieldstring
	
    
			
	
    Points to a data field in the data source. 
    
	
    Default value
    ""
    

    


							
    Get the dataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataField = chart.xAxis[0].dataField;
    


    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].dateFormat;
    


    
	
    
	displayTextstring | null
	
    
			
	
    Optional custom xAxis display text. 
    

    

    


							
    Get the displayText property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayText = chart.xAxis[0].displayText;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.xAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.xAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.xAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.xAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.xAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.xAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.xAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.xAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.xAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.xAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.xAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.xAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.xAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.xAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].line.dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.xAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.xAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.xAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.xAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.xAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal xAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.xAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical xAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.xAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical xAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.xAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal xAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.xAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.xAxis[0].padding;
    


    
	
    
	position"bottom" | "top" | "left" | "right"
	
    
			
	
    Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available. 
    
	
    Default value
    "bottom"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.xAxis[0].position;
    


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

    Properties
    	
    backgroundColor
    	
    backgroundImage
    	
    baseUnit
    	
    borderLineColor
    	
    borderLineWidth
    	
    caption
    	
    colorScheme
    	
    columnSeriesOverlap
    	
    columnsGapPercent
    	
    dataField
    	
    description
    	
    greyScale
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    renderTo
    	
    rightToLeft
    	
    seriesGapPercent
    	
    seriesGroups
    	
    serieType
    	
    showBorderLine
    	
    size
    	
    skipOverlappingPoints
    	
    titlePadding
    	
    unitInterval
    	
    valueAxis
    	
    visible
    
	
    
	backgroundColorstring | null
	
    
			
	
    Sets the range selector chart's background color. 
    

    

    


							
    Get the backgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundColor = chart.xAxis[0].rangeSelector.backgroundColor;
    


    
	
    
	backgroundImagestring
	
    
			
	
    Sets the range selector chart's background image. 
    
	
    Default value
    ""
    

    


							
    Get the backgroundImage property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let backgroundImage = chart.xAxis[0].rangeSelector.backgroundImage;
    


    
	
    
	baseUnitnull | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
	
    
			
	
    The base unit when used with 'date' axis. 
    

    

    


							
    Get the baseUnit property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baseUnit = chart.xAxis[0].rangeSelector.baseUnit;
    


    
	
    
	borderLineColorstring | null
	
    
			
	
    Sets the range selector chart's border color. 
    

    

    


							
    Get the borderLineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderLineColor = chart.xAxis[0].rangeSelector.borderLineColor;
    


    
	
    
	borderLineWidthnumber | null
	
    
			
	
    Sets the range selector chart's border line width. 
    

    

    


							
    Get the borderLineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let borderLineWidth = chart.xAxis[0].rangeSelector.borderLineWidth;
    


    
	
    
	captionstring
	
    
			
	
    Sets the caption (title) of the range selector chart. 
    
	
    Default value
    ""
    

    


							
    Get the caption property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let caption = chart.xAxis[0].rangeSelector.caption;
    


    
	
    
	colorScheme"scheme01" | "scheme02" | "scheme03" | "scheme04" | "scheme05" | "scheme06" | "scheme07" | "scheme08" | "scheme09" | "scheme10" | "scheme11" | "scheme12" | "scheme13" | "scheme14" | "scheme15" | "scheme16" | "scheme17" | "scheme18" | "scheme19" | "scheme20" | "scheme21" | "scheme22" | "scheme23" | "scheme24" | "scheme25" | "scheme26" | "scheme27" | "scheme28" | "scheme29" | "scheme30" | "scheme31" | "scheme32" | "custom"
	
    
			
	
    Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'. 
    
	
    Default value
    scheme01
    

    


							
    Get the colorScheme property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let colorScheme = chart.xAxis[0].rangeSelector.colorScheme;
    


    
	
    
	columnSeriesOverlapboolean
	
    
			
	
    Enables or disables overlapping of the column series. 
    
	
    Default value
    false
    

    


							
    Get the columnSeriesOverlap property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnSeriesOverlap = chart.xAxis[0].rangeSelector.columnSeriesOverlap;
    


    
	
    
	columnsGapPercentnumber
	
    
			
	
    Percentage gap between columns within the same serie. 
    
	
    Default value
    25
    

    


							
    Get the columnsGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let columnsGapPercent = chart.xAxis[0].rangeSelector.columnsGapPercent;
    


    
	
    
	dataFieldstring | null
	
    
			
	
    Points to a data field in the data source. 
    

    

    


							
    Get the dataField property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dataField = chart.xAxis[0].rangeSelector.dataField;
    


    
	
    
	descriptionstring
	
    
			
	
    Sets the description text of the range selector chart. 
    
	
    Default value
    ""
    

    


							
    Get the description property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let description = chart.xAxis[0].rangeSelector.description;
    


    
	
    
	greyScaleboolean | null
	
    
			
	
    Determines whether to display the range selector chart using greyscale colors. 
    
	
    Default value
    false
    

    


							
    Get the greyScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let greyScale = chart.xAxis[0].rangeSelector.greyScale;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the values. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].rangeSelector.formatFunction;
    


    
	
    
	formatSettingsany
	
    
			
	
    Chart Format Settings 
    

    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].rangeSelector.formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the range selector chart's xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].rangeSelector.gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].rangeSelector.gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].rangeSelector.gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].rangeSelector.gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].rangeSelector.gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.xAxis[0].rangeSelector.gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.xAxis[0].rangeSelector.labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.xAxis[0].rangeSelector.labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.xAxis[0].rangeSelector.labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].rangeSelector.labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].rangeSelector.labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.xAxis[0].rangeSelector.labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.xAxis[0].rangeSelector.labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].rangeSelector.labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.xAxis[0].rangeSelector.labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.xAxis[0].rangeSelector.labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.xAxis[0].rangeSelector.labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.xAxis[0].rangeSelector.labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.xAxis[0].rangeSelector.labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].rangeSelector.labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.xAxis[0].rangeSelector.labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.xAxis[0].rangeSelector.labels;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the range selector chart's xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.xAxis[0].rangeSelector.maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the range selector chart's xAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.xAxis[0].rangeSelector.minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the range selector chart. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.xAxis[0].rangeSelector.padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.xAxis[0].rangeSelector.padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.xAxis[0].rangeSelector.padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.xAxis[0].rangeSelector.padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.xAxis[0].rangeSelector.padding;
    


    
	
    
	position"bottom" | "top" | "left" | "right"
	
    
			
	
    Sets the range selector chart position. 
    
	
    Default value
    left
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.xAxis[0].rangeSelector.position;
    


    
	
    
	renderToHTMLElement | null
	
    
			
	
    An HTML element outside the chart to render the range selector chart to. 
    

    

    


							
    Get the renderTo property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let renderTo = chart.xAxis[0].rangeSelector.renderTo;
    


    
	
    
	rightToLeftboolean | null
	
    
			
	
    Sets or gets a value indicating whether the range selector chart's layout is mirrored. 
    
	
    Default value
    false
    

    


							
    Get the rightToLeft property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rightToLeft = chart.xAxis[0].rangeSelector.rightToLeft;
    


    
	
    
	seriesGapPercentnumber
	
    
			
	
    Percentage gap between columns belonging to different series. 
    
	
    Default value
    10
    

    


							
    Get the seriesGapPercent property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let seriesGapPercent = chart.xAxis[0].rangeSelector.seriesGapPercent;
    


    
	
    
	seriesGroups[] | null
	
    
			
	
    (Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.
    Please refer to the main seriesGroups property entry for more information and a full subproperty list.
     
    

    

    


							
    Get the seriesGroups property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let seriesGroups = chart.xAxis[0].rangeSelector.seriesGroups;
    


    
	
    
	serieType"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 range selector 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
    area
    

    


							
    Get the serieType property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let serieType = chart.xAxis[0].rangeSelector.serieType;
    


    
	
    
	showBorderLineboolean | null
	
    
			
	
    Determines whether to display the range selector chart's border line. 
    
	
    Default value
    true
    

    


							
    Get the showBorderLine property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let showBorderLine = chart.xAxis[0].rangeSelector.showBorderLine;
    


    
	
    
	sizenumber | null
	
    
			
	
    Sets the size of the range selector chart. 
    

    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.xAxis[0].rangeSelector.size;
    


    
	
    
	skipOverlappingPointsboolean
	
    
			
	
    Determines whether to display overlapping data points in column, ohlc and candlestick series. 
    
	
    Default value
    true
    

    


							
    Get the skipOverlappingPoints property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let skipOverlappingPoints = chart.xAxis[0].rangeSelector.skipOverlappingPoints;
    


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

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. 
    
	
    Default value
    10
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.xAxis[0].rangeSelector.titlePadding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. 
    
	
    Default value
    5
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.xAxis[0].rangeSelector.titlePadding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. 
    
	
    Default value
    5
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.xAxis[0].rangeSelector.titlePadding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. 
    
	
    Default value
    5
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.xAxis[0].rangeSelector.titlePadding.top;
    


    

    


							
    Get the titlePadding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let titlePadding = chart.xAxis[0].rangeSelector.titlePadding;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.unitInterval;
    


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

    Properties
    	
    alternatingBackgroundColor
    	
    alternatingBackgroundColor2
    	
    alternatingBackgroundOpacity
    	
    axisSize
    	
    bands
    	
    baselineValue
    	
    customDraw
    	
    displayValueAxis
    	
    flip
    	
    formatFunction
    	
    formatSettings
    	
    gridLines
    	
    labels
    	
    line
    	
    logarithmicScale
    	
    logarithmicScaleBase
    	
    maxValue
    	
    minValue
    	
    padding
    	
    position
    	
    type
    	
    textRotationAngle
    	
    textRotationPoint
    	
    tickMarks
    	
    title
    	
    unitInterval
    	
    valuesOnTicks
    	
    visible
    
	
    
	alternatingBackgroundColorstring
	
    
			
	
    Alternating background color between grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;
    


    
	
    
	alternatingBackgroundColor2string
	
    
			
	
    Second alternating background color. 
    
	
    Default value
    ""
    

    


							
    Get the alternatingBackgroundColor2 property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundColor2 = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;
    


    
	
    
	alternatingBackgroundOpacitynumber
	
    
			
	
    Opacity of the alternating background. 
    
	
    Default value
    1
    

    


							
    Get the alternatingBackgroundOpacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let alternatingBackgroundOpacity = chart.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;
    


    
	
    
	axisSizenumber | string | null
	
    
			
	
    Sets the size of the axis. 
    

    

    


							
    Get the axisSize property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let axisSize = chart.xAxis[0].rangeSelector.valueAxis[0].axisSize;
    


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

    Properties
    	
    color
    	
    dashStyle
    	
    lineColor
    	
    lineWidth
    	
    maxValue
    	
    minValue
    	
    opacity
    
	
    
	colorstring | null
	
    
			
	
    Color used to fill the area between the minValue and the maxValue. 
    

    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].color;
    


    
	
    
	dashStylestring | null
	
    
			
	
    Dash style of the band lines. The style is a series of numbers indicating line length followed by space length. 
    

    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;
    


    
	
    
	lineColorstring | null
	
    
			
	
    Band line color. 
    

    

    


							
    Get the lineColor property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineColor = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;
    


    
	
    
	lineWidthstring | null
	
    
			
	
    Band line width. 
    

    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;
    


    
	
    
	maxValueany
	
    
			
	
    End value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Start value of the color band. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;
    


    
	
    
	opacitynumber
	
    
			
	
    Fraction indicating the fill opacity. 
    
	
    Default value
    1
    

    


							
    Get the opacity property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let opacity = chart.xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;
    


    

    


							
    Get the bands property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bands = chart.xAxis[0].rangeSelector.valueAxis[0].bands;
    


    
	
    
	baselineValueany
	
    
			
	
    Sets the baseline value for the axis. 
    
	
    Default value
    0
    

    


							
    Get the baselineValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let baselineValue = chart.xAxis[0].rangeSelector.valueAxis[0].baselineValue;
    


    
	
    
	customDrawboolean
	
    
			
	
    boolean determining whether to draw the axis or the user will use APIs to draw it. 
    
	
    Default value
    false
    

    


							
    Get the customDraw property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let customDraw = chart.xAxis[0].rangeSelector.valueAxis[0].customDraw;
    


    
	
    
	displayValueAxisboolean
	
    
			
	
    Specifies whether the values axis is displayed. 
    
	
    Default value
    true
    

    


							
    Get the displayValueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let displayValueAxis = chart.xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;
    


    
	
    
	flipboolean
	
    
			
	
    Specifies whether the values are displayed in reverse order. 
    
	
    Default value
    false
    

    


							
    Get the flip property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let flip = chart.xAxis[0].rangeSelector.valueAxis[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 chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].rangeSelector.valueAxis[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Settings used to format the displayed values along the axis. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.xAxis[0].rangeSelector.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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].rangeSelector.valueAxis[0].formatSettings;
    


    
					
    
					
					gridLinesobject
					
    
							
	
    Object describing the grid lines properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the grid lines. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Grid lines dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the grid lines. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the grid lines. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;
    


    

    


							
    Get the gridLines property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let gridLines = chart.xAxis[0].rangeSelector.valueAxis[0].gridLines;
    


    
					
    
					
					labelsobject
					
    
							
	
    Object describing the labels properties of the axis. 
    

    Properties
    	
    angle
    	
    autoRotate
    	
    class
    	
    custom
    	
    formatFunction
    	
    formatSettings
    	
    horizontalAlignment
    	
    offset
    	
    rotationPoint
    	
    step
    	
    unitInterval
    	
    verticalAlignment
    	
    visible
    
	
    
	anglenumber
	
    
			
	
    Text rotation angle. 
    
	
    Default value
    0
    

    


							
    Get the angle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let angle = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;
    


    
	
    
	autoRotateboolean
	
    
			
	
    boolean determining if auto rotation is enabled. Applicable to polar and spider charts only. 
    
	
    Default value
    false
    

    


							
    Get the autoRotate property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let autoRotate = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;
    


    
	
    
	classstring | null
	
    
			
	
    CSS class of the labels. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].class;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;
    


    
	
    
	formatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Callback function used to format the labels. 
    

    

    


							
    Get the formatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatFunction = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;
    


    
					
    
					
					formatSettingsobject
					
    
							
	
    Object describing the format settings of the labels. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.xAxis[0].rangeSelector.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.xAxis[0].rangeSelector.valueAxis[0].labels[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
    


    

    


							
    Get the formatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let formatSettings = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;
    


    
					
    
					
					offsetobject
					
    
							
	
    Labels offset. 
    

    Properties
    	
    x
    	
    y
    
	
    
	xnumber
	
    
			
	
    Horizontal offset. 
    
	
    Default value
    0
    

    


							
    Get the x property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let x = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;
    


    
	
    
	ynumber
	
    
			
	
    Vertical offset. 
    
	
    Default value
    0
    

    


							
    Get the y property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let y = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;
    


    

    


							
    Get the offset property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let offset = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;
    


    
	
    
	rotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the rotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rotationPoint = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;
    


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

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between the labels. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical labels alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;
    


    

    


							
    Get the labels property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let labels = chart.xAxis[0].rangeSelector.valueAxis[0].labels;
    


    
					
    
					
					lineobject
					
    
							
	
    Object describing the line properties of the axis. 
    

    Properties
    	
    color
    	
    dashStyle
    	
    lineWidth
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of axis line. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].rangeSelector.valueAxis[0].line.color;
    


    
	
    
	dashStylestring
	
    
			
	
    Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width. The default is inherited from gridLines.lineWidth. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the axis line. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].line.visible;
    


    

    


							
    Get the line property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let line = chart.xAxis[0].rangeSelector.valueAxis[0].line;
    


    
	
    
	logarithmicScaleboolean
	
    
			
	
    Determines whether to use logarithmic scale. 
    
	
    Default value
    false
    

    


							
    Get the logarithmicScale property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScale = chart.xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;
    


    
	
    
	logarithmicScaleBasenumber
	
    
			
	
    Base for logarithmic scale. 
    
	
    Default value
    10
    

    


							
    Get the logarithmicScaleBase property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let logarithmicScaleBase = chart.xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;
    


    
	
    
	maxValueany
	
    
			
	
    Sets the maximum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the maxValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let maxValue = chart.xAxis[0].rangeSelector.valueAxis[0].maxValue;
    


    
	
    
	minValueany
	
    
			
	
    Sets the minimum value of the valueAxis. 
    
	
    Default value
    NaN
    

    


							
    Get the minValue property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let minValue = chart.xAxis[0].rangeSelector.valueAxis[0].minValue;
    


    
					
    
					
					paddingobject
					
    
							
	
    Object describing the padding of the axis. 
    

    Properties
    	
    bottom
    	
    left
    	
    right
    	
    top
    
	
    
	bottomnumber
	
    
			
	
    Bottom padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the bottom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let bottom = chart.xAxis[0].rangeSelector.valueAxis[0].padding.bottom;
    


    
	
    
	leftnumber
	
    
			
	
    Left padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the left property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let left = chart.xAxis[0].rangeSelector.valueAxis[0].padding.left;
    


    
	
    
	rightnumber
	
    
			
	
    Right padding. Available for vertical valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the right property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let right = chart.xAxis[0].rangeSelector.valueAxis[0].padding.right;
    


    
	
    
	topnumber
	
    
			
	
    Top padding. Available for horizontal valueAxis. 
    
	
    Default value
    0
    

    


							
    Get the top property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let top = chart.xAxis[0].rangeSelector.valueAxis[0].padding.top;
    


    

    


							
    Get the padding property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let padding = chart.xAxis[0].rangeSelector.valueAxis[0].padding;
    


    
	
    
	position"left" | "right" | "top" | "bottom"
	
    
			
	
    Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available. 
    
	
    Default value
    "left"
    

    


							
    Get the position property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let position = chart.xAxis[0].rangeSelector.valueAxis[0].position;
    


    
	
    
	typestring
	
    
			
	
    Value Axis Type 
    
	
    Default value
    ""
    

    


							
    Get the type property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let type = chart.xAxis[0].rangeSelector.valueAxis[0].type;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the valueAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.xAxis[0].rangeSelector.valueAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the valueAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.xAxis[0].rangeSelector.valueAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.xAxis[0].rangeSelector.valueAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.xAxis[0].rangeSelector.valueAxis[0].title;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].rangeSelector.valueAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the valueAxis. 
    
	
    Default value
    false
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.valueAxis[0].visible;
    


    

    


							
    Get the valueAxis property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valueAxis = chart.xAxis[0].rangeSelector.valueAxis;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the range selector. 
    
	
    Default value
    false
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].rangeSelector.visible;
    


    

    


							
    Get the rangeSelector property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let rangeSelector = chart.xAxis[0].rangeSelector;
    


    
	
    
	textstring
	
    
			
	
    xAxis's text value. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.xAxis[0].text;
    


    
	
    
	textRotationAnglenumber | null
	
    
			
	
    Text rotation angle. 
    

    

    


							
    Get the textRotationAngle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationAngle = chart.xAxis[0].textRotationAngle;
    


    
	
    
	textRotationPoint"auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
	
    
			
	
    Position to rotate the text around. 
    
	
    Default value
    "auto"
    

    


							
    Get the textRotationPoint property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let textRotationPoint = chart.xAxis[0].textRotationPoint;
    


    
					
    
					
					tickMarksobject
					
    
							
	
    Object describing the tick marks properties of the xAxis. 
    

    Properties
    	
    color
    	
    custom
    	
    dashStyle
    	
    lineWidth
    	
    size
    	
    step
    	
    unitInterval
    	
    visible
    
	
    
	colorstring
	
    
			
	
    Color of the tick marks. 
    
	
    Default value
    ""
    

    


							
    Get the color property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let color = chart.xAxis[0].tickMarks[0].color;
    


    
	
    
	custom[] | null
	
    
			
	
    An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'. 
    

    

    


							
    Get the custom property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let custom = chart.xAxis[0].tickMarks[0].custom;
    


    
	
    
	dashStylestring
	
    
			
	
    Tick marks dash style, e.g. '2,2'. 
    
	
    Default value
    ""
    

    


							
    Get the dashStyle property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dashStyle = chart.xAxis[0].tickMarks[0].dashStyle;
    


    
	
    
	lineWidthnumber
	
    
			
	
    Line width (in pixels) of the tick marks. 
    
	
    Default value
    1
    

    


							
    Get the lineWidth property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let lineWidth = chart.xAxis[0].tickMarks[0].lineWidth;
    


    
	
    
	sizenumber
	
    
			
	
    Size (in pixels) of the tick marks. 
    
	
    Default value
    4
    

    


							
    Get the size property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let size = chart.xAxis[0].tickMarks[0].size;
    


    
	
    
	stepnumber | null
	
    
			
	
    Interval steps between tick mark placements (multiples of the axis unit interval). 
    

    

    


							
    Get the step property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let step = chart.xAxis[0].tickMarks[0].step;
    


    
	
    
	unitIntervalnumber
	
    
			
	
    Sets the interval between tick marks. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].tickMarks[0].unitInterval;
    


    
	
    
	visibleboolean | string
	
    
			
	
    Possible values: true, false, 'custom'.
    Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].tickMarks[0].visible;
    


    

    


							
    Get the tickMarks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let tickMarks = chart.xAxis[0].tickMarks;
    


    
					
    
					
					titleobject
					
    
							
	
    Object describing the title of the xAxis. 
    

    Properties
    	
    class
    	
    horizontalAlignment
    	
    text
    	
    verticalAlignment
    	
    visible
    
	
    
	classstring | null
	
    
			
	
    CSS class of the title text. 
    

    

    


							
    Get the class property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let class = chart.xAxis[0].title.class;
    


    
	
    
	horizontalAlignment"left" | "center" | "right"
	
    
			
	
    Horizontal alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the horizontalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let horizontalAlignment = chart.xAxis[0].title.horizontalAlignment;
    


    
	
    
	textstring
	
    
			
	
    Text of the title. 
    
	
    Default value
    ""
    

    


							
    Get the text property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let text = chart.xAxis[0].title.text;
    


    
	
    
	verticalAlignment"top" | "center" | "bottom"
	
    
			
	
    Vertical alignment. 
    
	
    Default value
    "center"
    

    


							
    Get the verticalAlignment property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let verticalAlignment = chart.xAxis[0].title.verticalAlignment;
    


    
	
    
	visibleboolean
	
    
			
	
    boolean determining the visibility of the title. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].title.visible;
    


    

    


							
    Get the title property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let title = chart.xAxis[0].title;
    


    
	
    
	toolTipFormatFunction{(value?: any, index?: number, series?: any): string}
	
    
			
	
    Custom function to format xAxis values in tooltips. 
    

    

    


							
    Get the toolTipFormatFunction property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatFunction = chart.xAxis[0].toolTipFormatFunction;
    


    
					
    
					
					toolTipFormatSettingsobject
					
    
							
	
    Settings used to format xAxis values in tooltips. 
    

    Properties
    	
    dateFormat
    	
    decimalPlaces
    	
    decimalSeparator
    	
    negativeWithBrackets
    	
    prefix
    	
    sufix
    	
    thousandsSeparator
    
	
    
	dateFormatstring | null
	
    
			
	
    Optional date format string. This property is applicable only when displaying Date objects. 
    

    

    


							
    Get the dateFormat property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let dateFormat = chart.xAxis[0].toolTipFormatSettings[0].dateFormat;
    


    
	
    
	decimalPlacesnumber | null
	
    
			
	
    Decimal places of numeric values. 
    

    

    


							
    Get the decimalPlaces property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let decimalPlaces = chart.xAxis[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 chart = document.querySelector('smart-chart');
    
							
     let decimalSeparator = chart.xAxis[0].toolTipFormatSettings[0].decimalSeparator;
    


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

    


							
    Get the negativeWithBrackets property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let negativeWithBrackets = chart.xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;
    


    
	
    
	prefixstring
	
    
			
	
    Text to prepend to the value. 
    
	
    Default value
    ""
    

    


							
    Get the prefix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let prefix = chart.xAxis[0].toolTipFormatSettings[0].prefix;
    


    
	
    
	sufixstring
	
    
			
	
    Text to append to the value 
    
	
    Default value
    ""
    

    


							
    Get the sufix property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let sufix = chart.xAxis[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 chart = document.querySelector('smart-chart');
    
							
     let thousandsSeparator = chart.xAxis[0].toolTipFormatSettings[0].thousandsSeparator;
    


    

    


							
    Get the toolTipFormatSettings property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let toolTipFormatSettings = chart.xAxis[0].toolTipFormatSettings;
    


    
	
    
	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 chart = document.querySelector('smart-chart');
    
							
     let type = chart.xAxis[0].type;
    


    
	
    
	unitIntervalnumber | null
	
    
			
	
    Sets the interval between the units. 
    

    

    


							
    Get the unitInterval property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let unitInterval = chart.xAxis[0].unitInterval;
    


    
	
    
	valuesOnTicksboolean
	
    
			
	
    Specifies whether the axis values will be aligned with the tick marks. 
    
	
    Default value
    true
    

    


							
    Get the valuesOnTicks property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let valuesOnTicks = chart.xAxis[0].valuesOnTicks;
    


    
	
    
	visibleboolean
	
    
			
	
    Shows or hides the xAxis. 
    
	
    Default value
    true
    

    


							
    Get the visible property. 
    
							
     const chart = document.querySelector('smart-chart');
    
							
     let visible = chart.xAxis[0].visible;
    


    

    
				
    Events
    
				
    
					annotationClickCustomEvent
				
    
			
	
    The event is raised when the user clicks on a chart annotation.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onAnnotationClick
      • 


    
	
    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 annotationClick event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationClick', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					annotationMouseenterCustomEvent
				
    
			
	
    The event is raised when the user moves the cursor above a chart annotation.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onAnnotationMouseenter
      • 


    
	
    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 annotationMouseenter event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationMouseenter', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					annotationMouseleaveCustomEvent
				
    
			
	
    The event is raised when the user moves the cursor out of a chart annotation.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onAnnotationMouseleave
      • 


    
	
    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 annotationMouseleave event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('annotationMouseleave', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					clickCustomEvent
				
    
			
	
    The event is raised when the user clicks on series element.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onClick
      • 


    
	
    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 click event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('click', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					mouseoutCustomEvent
				
    
			
	
    The event is raised when the user moves the cursor out of a series element.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onMouseout
      • 


    
	
    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 mouseout event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('mouseout', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					mouseoverCustomEvent
				
    
			
	
    The event is raised when the user moves the cursor above a series element.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onMouseover
      • 


    
	
    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 mouseover event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('mouseover', function (event) {
	// 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
    

    
			
    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 chart = document.querySelector('smart-chart');
chart.addEventListener('rangeSelectionChanged', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					rangeSelectionChangingCustomEvent
				
    
			
	
    The event is raised when the chart's range selector position changes and before the chart starts rendering.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	Yes
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onRangeSelectionChanging
      • 


    
	
    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 rangeSelectionChanging event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('rangeSelectionChanging', function (event) {
	// 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 chart = document.querySelector('smart-chart');
chart.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 chart = document.querySelector('smart-chart');
chart.addEventListener('refreshEnd', function (event) {
	// event handling code goes here.
})

    
				
    
	
    
				
    
					toggleCustomEvent
				
    
			
	
    The event is raised when a serie is toggled by a user click in the chart's legend or through an API call.
    

      

    • Bubbles	Yes
      • 

    • Cancelable	No
      • 

    • Interface	CustomEvent
      • 

    • Event handler property onToggle
      • 


    
	
    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 toggle event.
				
    
				
    
			
					
    const chart = document.querySelector('smart-chart');
chart.addEventListener('toggle', 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 chart = document.querySelector('smart-chart');
chart.addColorScheme("'myScheme'","['#1A6642', '#46C26F', '#F9B956', '#F38443', '#DE513D']");
    


    
	
    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 chart = document.querySelector('smart-chart');
const result = chart.getColorScheme("'myScheme'");
    


    
	
    getItemCoord(	groupIndex: number, 	serieIndex: number, 	itemIndex: number): { x: number, y: number, width?: number, height?: number, center?: number, centerOffset?: number, innerRadius?: number, outerRadius?: number, selectedRadiusChange?: number, fromAngle?: number, toAngle?: number, radius?: number }
    
	
    Gets the rendered coordinates of a data point element.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    serieIndexnumber
    Series index.
    	
    itemIndexnumber
    Item (data point) index.
    	
    Returns{ x: number, y: number, width?: number, height?: number, center?: number, centerOffset?: number, innerRadius?: number, outerRadius?: number, selectedRadiusChange?: number, fromAngle?: number, toAngle?: number, radius?: number }
    
			
    Invoke the getItemCoord method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getItemCoord(0,1,5);
    


    
	
    getItemsCount(	groupIndex: number, 	serieIndex: number): number
    
	
    Gets the number of rendered items in a specific serie.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    serieIndexnumber
    Series index.
    	
    Returnsnumber
    
			
    Invoke the getItemsCount method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getItemsCount(0,1);
    


    
	
    getValueAxisLabels(	groupIndex: number): { offset: { x: number, y: number }, value: any }[]
    
	
    Gets the rendered coordinates and values of the valueAxis labels.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    Returns{ offset: { x: number, y: number }, value: any }[]
    
			
    Invoke the getValueAxisLabels method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisLabels(0);
    


    
	
    getValueAxisRect(	groupIndex: number): DOMRect
    
	
    Gets the rendered rectangle coordinates of the valueAxis of specific serie group.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    ReturnsDOMRect
    
			
    Invoke the getValueAxisRect method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisRect(1);
    


    
	
    getValueAxisValue(	offset: number, 	groupIndex: number): object
    
	
    Gets the valueAxis (vertical axis)'s value.
    	
    Arguments
    	
    offsetnumber
    Vertical offset.
    	
    groupIndexnumber
    Series group index.
    	
    Returnsobject
    
			
    Invoke the getValueAxisValue method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getValueAxisValue(100,0);
    


    
	
    getXAxisLabels(	groupIndex: number): { offset: { x: number, y: number }, value: any }[]
    
	
    Gets the rendered coordinates and values of the xAxis labels.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    Returns{ offset: { x: number, y: number }, value: any }[]
    
			
    Invoke the getXAxisLabels method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getXAxisLabels(0);
    


    
	
    getXAxisRect(	groupIndex: number): DOMRect
    
	
    Gets the rendered rectangle coordinates of the x-Axis of specific serie group.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    ReturnsDOMRect
    
			
    Invoke the getXAxisRect method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getXAxisRect(1);
    


    
	
    getXAxisValue(	offset: number, 	groupIndex: number): object
    
	
    Gets the xAxis (horizontal axis)'s value.
    	
    Arguments
    	
    offsetnumber
    Horizontal offset.
    	
    groupIndexnumber
    Series group index.
    	
    Returnsobject
    
			
    Invoke the getXAxisValue method.
    
			
    const chart = document.querySelector('smart-chart');
const result = chart.getXAxisValue(100,0);
    


    
	
    hideSerie(	groupIndex: number, 	serieIndex: number, 	itemIndex?: number): void
    
	
    Hides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    serieIndexnumber
    Series index.
    	
    itemIndex?number
    Item (data point) index. Applicable to pie and donut series only.
    	
    
			
    Invoke the hideSerie method.
    
			
    const chart = document.querySelector('smart-chart');
chart.hideSerie(0,1,"NaN");
    


    
	
    hideToolTip(	hideDelay?: number): void
    
	
    Hides the current tooltip if visible.
    	
    Arguments
    	
    hideDelay?number
    Hide delay.
    	
    
			
    Invoke the hideToolTip method.
    
			
    const chart = document.querySelector('smart-chart');
chart.hideToolTip(1000);
    


    
	
    print(): void
    
	
    Prints the chart.
    	
    
			
    Invoke the print method.
    
			
    const chart = document.querySelector('smart-chart');
chart.print();
    


    
	
    refresh(): void
    
	
    Refreshes the content of the chart element after a property or data update.
    	
    
			
    Invoke the refresh method.
    
			
    const chart = document.querySelector('smart-chart');
chart.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 chart = document.querySelector('smart-chart');
chart.removeColorScheme("'myScheme'");
    


    
	
    saveAsJPEG(	fileName?: string): void
    
	
    Exports the chart's content as JPEG image.
    	
    Arguments
    	
    fileName?string
    File name.
    	
    
			
    Invoke the saveAsJPEG method.
    
			
    const chart = document.querySelector('smart-chart');
chart.saveAsJPEG("'myChart.jpeg'");
    


    
	
    saveAsPNG(	fileName?: string): void
    
	
    Exports the chart's content as PNG image.
    	
    Arguments
    	
    fileName?string
    File name.
    	
    
			
    Invoke the saveAsPNG method.
    
			
    const chart = document.querySelector('smart-chart');
chart.saveAsPNG("'myChart.png'");
    


    
	
    saveAsPDF(	fileName?: string, 	pageOrientation?: string): void
    
	
    Exports the chart's content as PDF.
    	
    Arguments
    	
    fileName?string
    File name.
    	
    pageOrientation?string
    PDF page orientation. Possible values: 'portrait' (default), 'landscape'.
    	
    
			
    Invoke the saveAsPDF method.
    
			
    const chart = document.querySelector('smart-chart');
chart.saveAsPDF("'myChart.pdf'","'landscape'");
    


    
	
    showSerie(	groupIndex: number, 	serieIndex: number, 	itemIndex?: number): void
    
	
    Shows a hidden chart serie. The result of calling this function is same as the user checking the legend box of a chart serie.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    serieIndexnumber
    Series index.
    	
    itemIndex?number
    Item (data point) index. Applicable to pie and donut series only.
    	
    
			
    Invoke the showSerie method.
    
			
    const chart = document.querySelector('smart-chart');
chart.showSerie(0,1,"NaN");
    


    
	
    showToolTip(	groupIndex: number, 	serieIndex: number, 	itemIndex: number, 	showDelay?: number, 	hideDelay?: number): void
    
	
    Shows a the tooltip for a particular data point.
    	
    Arguments
    	
    groupIndexnumber
    Series group index.
    	
    serieIndexnumber
    Series index.
    	
    itemIndexnumber
    Item (data point) index.
    	
    showDelay?number
    Show delay.
    	
    hideDelay?number
    Hide delay.
    	
    
			
    Invoke the showToolTip method.
    
			
    const chart = document.querySelector('smart-chart');
chart.showToolTip(0,1,5,1000,5000);
    


    
	
    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 chart = document.querySelector('smart-chart');
chart.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