Chart Typescript API

Interface

Chart

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

Selector

smart-chart

Properties

animationAnimation

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

Default valueadvanced

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 value300

backgroundColorstring | null

Sets the chart's background color.

backgroundImagestring

Sets the chart's background image.

Default value"

borderLineColorstring | null

Sets the chart's border color.

borderLineWidthnumber

Sets the chart's border line width.

Default value1

captionstring

Sets the caption (title) of the chart.

Default value"Caption

clipboolean

Determines whether to clip plotted elements that overflow the axis boundaries.

Default valuetrue

colorSchemeChartColorScheme

Sets the chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.

Default valuescheme01

columnSeriesOverlapboolean

Enables or disables overlapping of the column series.

Default valuefalse

crosshairsColorstring | null

Gets or sets the color of the crosshairs lines.

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.

Default value"2,2

crosshairsLineWidthnumber

Gets or sets the width of the crosshairs lines.

Default value1

dataSourceany

Sets the chart's data source.

descriptionstring

Sets the description text of the chart.

Default value"Description

disabledboolean

Enables or disables the chart.

Default valuefalse

drawany

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

drawBeforeany

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

enableAxisTextAnimationboolean

Determines if the animation of the axes text is enabled.

Default valuefalse

enableCrosshairsboolean

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

Default valuefalse

greyScaleboolean

Determines whether to display the chart using greyscale colors.

Default valuefalse

legendLayoutany

Sets the legend's layout.

localestring

Sets or gets the locale. Used in conjunction with the property messages.

Default value"en

localizationChartLocalization

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

messagesany

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

Default value

paddingPadding

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

legendPositionChartLegendPosition

Sets the legend bar position in the Chart.

renderEngineChartRenderEngine

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

rightToLeftboolean

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

Default valuefalse

seriesGroupsChartSeriesGroup[]

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.

showBorderLineboolean

Determines whether to display the chart's border line.

Default valuetrue

showLegendboolean

Determines whether to show or hide the chart series legend.

Default valuetrue

showToolTipsboolean

Enables or disables the chart tooltips.

Default valuetrue

showToolTipsOnAllSeriesboolean

Determines whether to show a composite tooltip containing information for all series.

Default valuefalse

themeChartTheme

Determines the set of default background, line, text and band colors that will be used in the Chart.

Default valuelight

titlePaddingPadding

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

toolTipBackgroundstring | null

Tooltip background color.

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

User defined tooltip text formatting callback function.

toolTipHideDelaynumber

Determines the tooltip hide delay in milliseconds.

Default value4000

toolTipLineColorstring | null

Tooltip line color.

toolTipShowDelaynumber

Determines the tooltip show delay in milliseconds. Values may range from 0 to 10000 [ms].

Default value300

valueAxisChartValueAxis

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

xAxisChartXAxis

Sets the Chart's xAxis.

onannotationclick((this: Window, ev: Event) => any) | null

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

Arguments

onannotationmouseenter((this: Window, ev: Event) => any) | null

The event is raised when the user moves the cursor above a chart annotation.

Arguments

onannotationmouseleave((this: Window, ev: Event) => any) | null

The event is raised when the user moves the cursor out of a chart annotation.

Arguments

onclick((this: Window, ev: Event) => any) | null

The event is raised when the user clicks on series element.

Arguments

onmouseout((this: Window, ev: Event) => any) | null

The event is raised when the user moves the cursor out of a series element.

Arguments

onmouseover((this: Window, ev: Event) => any) | null

The event is raised when the user moves the cursor above a series element.

Arguments

onrangeselectionchanged((this: Window, ev: Event) => any) | null

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

Arguments

onrangeselectionchanging((this: Window, ev: Event) => any) | null

The event is raised when the chart's range selector position changes and before the chart starts rendering.

Arguments

onrefreshbegin((this: Window, ev: Event) => any) | null

The event is raised when the chart begins rendering.

Arguments

onrefreshend((this: Window, ev: Event) => any) | null

The event is raised when the chart finishes rendering.

Arguments

ontoggle((this: Window, ev: Event) => any) | null

The event is raised when a serie is toggled by a user click in the chart's legend or through an API call.

Arguments

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.

getColorScheme( schemeName: string): any[]

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.

Returnsany[]

getItemCoord( groupIndex: number, serieIndex: number, itemIndex: number): any

Gets the rendered coordinates of a data point element.

Arguments

groupIndexnumber

Series group index.

serieIndexnumber

Series index.

itemIndexnumber

Item (data point) index.

Returnsany

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

getValueAxisLabels( groupIndex: number): any[]

Gets the rendered coordinates and values of the valueAxis labels.

Arguments

groupIndexnumber

Series group index.

Returnsany[]

getValueAxisRect( groupIndex: number): any

Gets the rendered rectangle coordinates of the valueAxis of specific serie group.

Arguments

groupIndexnumber

Series group index.

Returnsany

getValueAxisValue( offset: number, groupIndex: number): any

Gets the valueAxis (vertical axis)'s value.

Arguments

offsetnumber

Vertical offset.

groupIndexnumber

Series group index.

Returnsany

getXAxisLabels( groupIndex: number): any[]

Gets the rendered coordinates and values of the xAxis labels.

Arguments

groupIndexnumber

Series group index.

Returnsany[]

getXAxisRect( groupIndex: number): any

Gets the rendered rectangle coordinates of the x-Axis of specific serie group.

Arguments

groupIndexnumber

Series group index.

Returnsany

getXAxisValue( offset: number, groupIndex: number): any

Gets the xAxis (horizontal axis)'s value.

Arguments

offsetnumber

Horizontal offset.

groupIndexnumber

Series group index.

Returnsany

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.

hideToolTip( hideDelay?: number): void

Hides the current tooltip if visible.

Arguments

hideDelay?number

Hide delay.

print(): void

Prints the chart.

refresh(): void

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

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.

saveAsJPEG( fileName?: string): void

Exports the chart's content as JPEG image.

Arguments

fileName?string

File name.

saveAsPNG( fileName?: string): void

Exports the chart's content as PNG image.

Arguments

fileName?string

File name.

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

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.

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.

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.

ChartLocalization

Properties

decimalSeparatorstring

A symbol used to mark the border between the integer and fractional parts of a number.

Default value".

patternsany

An object containing datetime formatting patterns.

thousandsSeparatorstring

A symbol used to mark the border between thousands, millions, billions, etc.

Default value"

Padding

Properties

bottomnumber

Bottom padding of the Chart.

Default value5

leftnumber

Left padding of the Chart.

Default value5

rightnumber

Right padding of the Chart.

Default value5

topnumber

Top padding of the Chart.

Default value5

ChartLegendPosition

Properties

heightnumber

Height of legend in the Chart.

Default value5

leftnumber

Left legend position in the Chart.

Default value5

widthnumber

Width of legend in the Chart.

Default value5

topnumber

Top legend position in the Chart.

Default value5

ChartSeriesGroup

Properties

annotationsChartAnnotation[]

An array of chart annotation objects.

bandsChartBand[]

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

columnsGapPercentnumber

Percentage gap between columns within the same serie.

Default value25

columnsMaxWidthnumber

Maximum width of columns in column series.

columnsMinWidthnumber

Minimum width of columns in column series.

Default value1

columnsBottomWidthPercentnumber

Columns bottom width (as percentage of the total width).

Default value100

columnsTopWidthPercentnumber

Columns top width (as percentage of the total width).

Default value100

drawany

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

dataSourceany

Determines the data source of the serie

drawBeforeany

Function for custom drawing before the series group.

enableSelectionboolean

Determines whether series are selectable.

Default valuetrue

enableSeriesToggleboolean

Determines whether to toggle series visibility after click on a legend's box.

Default valuetrue

endAnglenumber

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

Default value360

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

Callback function used to format series labels.

formatSettingsChartFormatSettings

Object describing the format settings of series labels.

linesUnselectModeChartUnselectMode

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 valuedefault

offsetXnumber

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

offsetYnumber

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

orientationOrientation

Specifies the orientation of the series group.

Default valuevertical

summarystring

Specifies the summary of the series group.

Default value"

polarboolean

When polar is set to true, the chart will render in polar coordinates.

Default valuefalse

radiusnumber

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

seriesChartSeriesGroupSerie[]

An array of chart series.

seriesGapPercentnumber

Percentage gap between columns belonging to different series.

Default value10

skipOverlappingPointsboolean

Determines whether to display overlapping data points in column, ohlc and candlestick series.

Default valuetrue

showLabelsboolean

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

Default valuetrue

spiderboolean

When spider is set to true, the chart will render in polar coordinates.

Default valuefalse

startAnglenumber

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

Default value0

typeChartType

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

toolTipFormatSettingsChartFormatSettings

Object describing the format settings of series tooltips.

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

useGradientColorsboolean

Determines whether to use color gradients.

Default valuefalse

valueAxisChartValueAxis

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

xAxisChartXAxis

Object describing the xAxis for this group.

ChartAnnotation

Properties

fillColorstring | null

Fill/background color of the annotation.

heightnumber

Height of the annotation.

lineColorstring | null

Line color of the annotation.

offsetOffset

Custom offset of the annotation relative to xValue & yValue.

pathstring | null

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

radiusnumber

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

textChartAnnotationText

Object describing the text of the annotation.

typeChartAnnotationType

Shape type of the annotation.

widthnumber

Width of the annotation.

xValuenumber

Value to determine the horizontal offset of the annotation.

xValue2number

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

yValuenumber

Value to determine the vertical offset of the annotation.

yValue2number

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

Offset

Properties

xnumber | null

Horizontal offset.

ynumber | null

Vertical offset.

ChartAnnotationText

Properties

anglenumber

Text rotation angle.

classstring | null

CSS class of the annotation.

fillColorstring | null

Inner text color (fill).

horizontalAlignmentHorizontalAlignment

Horizontal text alignment.

Default valuecenter

lineColorstring | null

Outer text color (stroke).

offsetOffset

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

rotationPointChartRotationPoint

Position to rotate the text around.

Default valuecentermiddle

valuestring | null

Text of the annotation.

verticalAlignmentVerticalAlignment

Vertical text alignment.

Default valuecenter

ChartBand

Properties

colorstring | null

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

dashStylestring | null

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

lineColorstring | null

Band line color.

lineWidthstring | number | null

Band line width.

maxValueany

End value of the color band.

Default valueNaN

minValueany

Start value of the color band.

Default valueNaN

opacitynumber

Fraction indicating the fill opacity.

Default value1

ChartFormatSettings

Properties

dateFormatstring | null

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

decimalPlacesnumber | null

Decimal places of numeric values.

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.

negativeWithBracketsboolean

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

Default valuefalse

prefixstring

Text to prepend to the value.

Default value"

sufixstring

Text to append to the value

Default value"

thousandsSeparatorstring | null

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

ChartSeriesGroupSerie

Properties

centerOffsetany

Offset from the center point in a pie/donut series.

Default value0

colorFunctionany

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.

colorSchemeChartColorScheme

Color palette to use when rendering the serie.

dataFieldstring

Name of the field in the data source.

Default value"null

dataFieldClosestring

Data field used in candlestcik and ohlc series.

Default value"null

dataFieldHighstring

Data field used in candlestcik and ohlc series.

Default value"null

dataFieldLowstring

Data field used in candlestcik and ohlc series.

Default value"null

dataFieldOpenstring

Data field used in candlestcik and ohlc series.

Default value"null

dataFieldFromstring

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

Default value"null

dataFieldTostring

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

Default value"null

radiusDataFieldstring

Data field used in bubble series.

Default value"null

displayTextstring

Name to display for this serie.

Default value"null

displayTextClosestring

Name to display for candlestick and ohlc series.

Default value"null

displayTextHighstring

Name to display for candlestick and ohlc series.

Default value"null

displayTextLowstring

Name to display for candlestick and ohlc series.

Default value"null

displayTextOpenstring

Name to display for candlestick and ohlc series.

Default value"null

emptyPointsDisplayChartSeriesGroupSerieEmptyPointsDisplay

Determines how to display value gaps in line series.

Default valueskip

enableSelectionboolean

Determines whether the serie is selectable.

Default valuetrue

enableSeriesToggleboolean

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

Default valuetrue

labelRadiusnumber

Determines the labels rotation radius when the Chart is 'pie' or 'donut'.

Default value0

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

Callback function used to format the labels.

formatSettingsChartFormatSettings

Object describing the format settings of the labels.

summarystring

Specifies the summary of the series group.

Default value"

endAnglenumber

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

Default value360

fillColorstring | null

Fill color for the serie.

fillColorAltstring | null

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

fillColorAltSelectedstring | null

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

fillColorSelectedstring | null

Fill color for the serie when selected.

fillColorSymbolstring | null

Fill color for the marker symbols in the serie.

fillColorSymbolSelectedstring | null

Fill color for the the marker symbols in serie when selected.

greyScaleboolean | null

Determines whether to display the serie in grey scale.

hiddenPointsDisplayboolean

Determines whether to hide slices of toggled points in pie and donut series.

Default valuefalse

initialAnglenumber

Initial angle in pie and donut series.

Default value0

innerRadiusany

Inner radius of donut series in pixels or percents.

Default value0

labelsChartLabels

Object describing the labels properties of the axis.

legendFillColorstring | null

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

legendFormatFunctionany

Legend data formatting function for the values in the serie.

legendFormatSettingsChartFormatSettings

Legend data formatting settings for the values in the serie.

legendLineColorstring | null

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

lineColorstring | null

Line color for the serie.

lineColorSelectedstring | null

Line color for the serie when selected.

lineColorSymbolstring | null

Line color for the marker symbols in serie.

lineColorSymbolSelectedstring | null

Line color for the marker symbols in the serie when selected.

lineDashStylestring | null

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

linesUnselectModeChartUnselectMode

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 valuedefault

lineWidthstring | null | number

Determines the line tickness of the items in this serie.

lineWidthSelectedstring | null | number

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

minRadiusany

Min radius of bubble series in pixels or percents.

maxRadiusany

Max radius of bubble series in pixels or percents.

opacitynumber

Determines the opacity of the items in this serie.

Default value1

radiusany

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

selectedRadiusChangeany

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

startAnglenumber

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

Default value0

symbolSizenumber

Determines the size of the symbol element.

symbolSizeSelectednumber

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

symbolTypeChartSymbolType

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 valuenone

toolTipBackgroundstring | null

Determines the tooltip's background.

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

toolTipFormatSettingsChartFormatSettings

Tooltip data formatting settings for the values in the serie.

toolTipLineColorstring | null

Determines the tooltip's border lines color.

useGradientColorsboolean

Determines whether to use color gradients.

Default valuefalse

ChartLabels

Properties

anglenumber

Text rotation angle.

Default value0

autoRotateboolean

boolean determining if auto rotation is enabled.

Default valuefalse

backgroundColorstring | null

Labels background color.

backgroundOpacitynumber | null

Labels background opacity.

Default value1

borderColorstring | null

Labels border line color.

borderOpacitynumber | null

Labels border line opacity.

Default value1

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

formatSettingsChartFormatSettings

Object describing the format settings of the labels.

horizontalAlignmentHorizontalAlignment

Horizontal labels alignment.

Default valuecenter

linesAnglesboolean

Determines whether to use direct lines for the labels in pie/donut series.

Default valuetrue

linesEnabledboolean

Determines whether to use lines for the labels in pie/donut series.

Default valuetrue

offsetOffset

Labels offset.

paddingPadding

Object describing the padding of the labels.

radiusnumber | null

Radius of the labels in pie/donut series.

rotationPointChartRotationPoint

Position to rotate the text around.

Default valueauto

stepnumber | null

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

unitIntervalnumber

Sets the interval between the labels.

verticalAlignmentVerticalAlignment

Vertical labels alignment.

Default valuecenter

visibleany

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 valuetrue

ChartValueAxis

Properties

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value"

alternatingBackgroundColor2string

Second alternating background color.

Default value"

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value1

axisSizeany

Sets the size of the axis.

bandsChartBand[]

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

baselineValueany

Sets the baseline value for the axis.

Default value0

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default valuefalse

descriptionstring

Sets the description of the value axis.

Default value"

displayValueAxisboolean

Specifies whether the values axis is displayed.

Default valuetrue

flipboolean

Specifies whether the values are displayed in reverse order.

Default valuefalse

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

Custom function to format the displayed values along the axis.

formatSettingsChartFormatSettings

Settings used to format the displayed values along the axis.

gridLinesChartLines

Object describing the grid lines properties of the valueAxis.

labelsChartLabels

Object describing the labels properties of the axis.

lineChartLine

Object describing the line properties of the axis.

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default valuefalse

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value10

maxValueany

Sets the maximum value of the valueAxis.

Default valueNaN

minValueany

Sets the minimum value of the valueAxis.

Default valueNaN

paddingPadding

Object describing the padding of the axis.

positionAxisPosition

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 valueleft

textRotationAnglenumber | null

Text rotation angle.

typestring

Value Axis Type

Default value"

textRotationPointChartRotationPoint

Position to rotate the text around.

Default valueauto

tickMarksChartLines

Object describing the tick marks properties of the valueAxis.

titleChartTitle

Object describing the title of the valueAxis.

unitIntervalnumber | null

Sets the interval between the units.

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default valuetrue

visibleboolean

Shows or hides the valueAxis.

Default valuetrue

ChartLines

Properties

colorstring

Color of the grid lines.

Default value"

custom[] | null

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

dashStylestring

Grid lines dash style, e.g. '2,2'.

Default value"

lineWidthstring | number | null

Line width (in pixels) of the grid lines.

Default value1

sizestring | number | null

Size (in pixels) of the tick marks.

Default value4

stepnumber | null

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

unitIntervalnumber

Sets the interval between the grid lines.

visibleany

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 valuetrue

ChartLine

Properties

colorstring

Color of axis line.

Default value"

dashStylestring

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

Default value"

lineWidthnumber

Line width. The default is inherited from gridLines.lineWidth.

Default value1

visibleany

boolean determining the visibility of the axis line.

Default valuetrue

ChartTitle

Properties

classstring | null

CSS class of the title text.

horizontalAlignmentHorizontalAlignment

Horizontal alignment.

Default valuecenter

textstring

Text of the title.

Default value"

verticalAlignmentVerticalAlignment

Vertical alignment.

Default valuecenter

visibleboolean

boolean determining the visibility of the title.

Default valuetrue

ChartXAxis

Properties

alternatingBackgroundColorstring

Alternating background color between grid lines.

Default value"

alternatingBackgroundColor2string

Second alternating background color.

Default value"

alternatingBackgroundOpacitynumber

Opacity of the alternating background.

Default value1

axisSizeany

Sets the size of the xAxis.

bandsChartBand[]

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

baseUnitChartBaseUnit

The base unit when used with 'date' axis.

customDrawboolean

boolean determining whether to draw the axis or the user will use APIs to draw it.

Default valuefalse

dataFieldstring

Points to a data field in the data source.

Default value"

dateFormatstring | null

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

displayTextstring | null

Optional custom xAxis display text.

flipboolean

Specifies whether the values are displayed in reverse order.

Default valuefalse

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

Custom function to format the displayed values along the axis.

formatSettingsChartFormatSettings

Settings used to format the displayed values along the axis.

gridLinesChartLines

Object describing the grid lines properties of the xAxis.

labelsChartLabels

Object describing the labels properties of the axis.

lineChartLine

Object describing the line properties of the axis.

logarithmicScaleboolean

Determines whether to use logarithmic scale.

Default valuefalse

logarithmicScaleBasenumber

Base for logarithmic scale.

Default value10

maxValueany

Sets the maximum value of the xAxis.

Default valueNaN

minValueany

Sets the minimum value of the xAxis.

Default valueNaN

paddingPadding

Object describing the padding of the axis.

positionAxisPosition

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 valuebottom

rangeSelectorChartRangeSelector

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

textstring

xAxis's text value.

Default value"

textRotationAnglenumber | null

Text rotation angle.

textRotationPointChartRotationPoint

Position to rotate the text around.

Default valueauto

tickMarksChartLines

Object describing the tick marks properties of the xAxis.

titleChartTitle

Object describing the title of the xAxis.

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

Custom function to format xAxis values in tooltips.

toolTipFormatSettingsChartFormatSettings

Settings used to format xAxis values in tooltips.

typeChartXAxisType

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 valueauto

unitIntervalnumber | null

Sets the interval between the units.

valuesOnTicksboolean

Specifies whether the axis values will be aligned with the tick marks.

Default valuetrue

visibleboolean

Shows or hides the xAxis.

Default valuetrue

ChartRangeSelector

Properties

backgroundColorstring | null

Sets the range selector chart's background color.

backgroundImagestring

Sets the range selector chart's background image.

Default value"

baseUnitChartBaseUnit

The base unit when used with 'date' axis.

borderLineColorstring | null

Sets the range selector chart's border color.

borderLineWidthnumber | null

Sets the range selector chart's border line width.

captionstring

Sets the caption (title) of the range selector chart.

Default value"

colorSchemeChartColorScheme

Sets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'.

columnSeriesOverlapboolean

Enables or disables overlapping of the column series.

Default valuefalse

columnsGapPercentnumber

Percentage gap between columns within the same serie.

Default value25

dataFieldstring | null

Points to a data field in the data source.

descriptionstring

Sets the description text of the range selector chart.

Default value"

greyScaleboolean | null

Determines whether to display the range selector chart using greyscale colors.

gridLinesChartLines

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

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

Callback function used to format the values.

formatSettingsany

Chart Format Settings

labelsChartLabels

Object describing the labels properties of the axis.

maxValueany

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

Default valueNaN

minValueany

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

Default valueNaN

paddingPadding

Object describing the padding of the range selector chart.

positionAxisPosition

Sets the range selector chart position.

renderToHTMLElement | null

An HTML element outside the chart to render the range selector chart to.

rightToLeftboolean | null

Sets or gets a value indicating whether the range selector chart's layout is mirrored.

seriesGapPercentnumber

Percentage gap between columns belonging to different series.

Default value10

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.

serieTypeChartType

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 valuearea

showBorderLineboolean | null

Determines whether to display the range selector chart's border line.

sizenumber | null

Sets the size of the range selector chart.

skipOverlappingPointsboolean

Determines whether to display overlapping data points in column, ohlc and candlestick series.

Default valuetrue

titlePaddingPadding

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

unitIntervalnumber | null

Sets the interval between the units.

valueAxisChartValueAxis

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

visibleboolean

Shows or hides the range selector.

Default valuefalse

Enums