Chart — Smart UI JavaScript API
On this page + Quick start
Quick start · JavaScript
Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chart - JavaScript Quick Start</title>
<link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
<smart-chart id="demo-chart"></smart-chart>
<script type="module">
import './node_modules/smart-webcomponents/source/modules/smart.chart.js';
const el = document.getElementById('demo-chart');
if (el) {
el.caption = 'Weekly Activity';
el.description = 'Sample chart configuration';
el.dataSource = [{ day: 'Mon', running: 30, cycling: 15 }, { day: 'Tue', running: 22, cycling: 20 }, { day: 'Wed', running: 28, cycling: 18 }];
el.xAxis = { dataField: 'day' };
el.seriesGroups = [{ type: 'column', series: [{ dataField: 'running', displayText: 'Running' }, { dataField: 'cycling', displayText: 'Cycling' }] }];
el.addEventListener('change', (event) => console.log('change:', event.detail || event));
}
</script>
</body>
</html>
For AI tooling
Developer Quick Reference
Component: Chart Framework: JavaScript Selector: smart-chart
API counts: 43 properties, 21 methods, 11 events
Common properties: animation, animationDuration, backgroundColor, backgroundImage, borderLineColor, borderLineWidth
Common methods: addColorScheme(), getColorScheme(), getItemCoord(), getItemsCount(), getValueAxisLabels(), getValueAxisRect()
Common events: annotationClick, annotationMouseenter, annotationMouseleave, click, mouseout, mouseover
Module hint: smart-webcomponents/source/modules/smart.chart.js
Chart is a feature-complete interactive graph library that answers the data visualization needs of any modern web app.
Class
Chart
Chart is a feature-complete interactive graph library that answers the data visualization needs of any modern web app.
Selector
smart-chart
Properties
- decimalSeparator:string - A character used as a decimal separator to clearly distinguish the integer part from the fractional part of a numerical value, such as a period (“.”) in 3.14 or a comma (“,”) in 3,14, depending on locale.
- patterns:object | null - An object that defines various datetime formatting patterns, where each key represents a specific format type (e.g., ISO, short date, long date, time), and each value is the corresponding string pattern used to format or parse datetime values. These patterns can be utilized for consistent date and time representation throughout an application.
- thousandsSeparator:string - A symbol that serves as a separator to group digits in large numbers, distinguishing thousands, millions, billions, and higher orders of magnitude for improved readability (e.g., the comma in "1,000,000" or the space in "1 000 000").
- bottom:number - Specifies the amount of space (padding) added to the bottom edge of the chart, creating distance between the chart content and the lower boundary of the chart area. Adjusting this value can help prevent labels, data points, or other chart elements from overlapping with the bottom of the chart.
- left:number - Specifies the amount of space, in pixels, between the left edge of the chart and its content. This padding can help prevent chart elements from being cut off or overlapping with the chart's border.
- right:number - Specifies the amount of space added to the right side of the chart area, creating padding between the chart content and the chart’s right edge. This helps control the layout and prevents elements from being clipped or overlapping with the chart boundary.
- top:number - Specifies the amount of space (in pixels) added to the top of the chart, creating padding between the chart’s upper edge and its content or border. This helps control the visual separation and overall layout of the chart within its container.
- 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.
- tickMarksColor:string - Color of tick marks.
- 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.
- bottom:number - Specifies the amount of space added to the bottom inside edge of an element, creating padding between the element’s content and its bottom border.
- left:number - Sets the amount of space (padding) on the left side of an element's content, creating extra space between the element's content and its left border. Accepts values in units such as pixels (px), ems (em), percentages (%), etc.
- right:number - Adds padding to the right side of the element. This property increases the space between the element's content and its right border. Specify the padding value using units such as pixels ('px'), ems ('em'), or percentages ('%').
- top:number - Adds padding space to the top edge of the element’s content, creating separation between the element’s content and its upper border. This property helps control the vertical spacing within the element.
- alternatingBackgroundColor:string - Applies alternating background colors to the grid rows or columns, creating a striped pattern that enhances readability by visually distinguishing between adjacent lines. This effect helps users easily track and follow data across the grid.
- alternatingBackgroundColor2:string - Applies the secondary background color used for alternating row styles, typically in tables or lists, to improve visual distinction between adjacent items.
- alternatingBackgroundOpacity:number - Specifies the transparency level of the alternating background, where a value of 1 means fully opaque and 0 means fully transparent. This setting determines how visible the alternating background color appears behind content.
- axisSize:number | string | null - Specifies the length or thickness of the axis, determining how large it appears within the chart or graph. This setting can affect either the axis line itself or the space allocated for the axis, depending on the context.
- bands:[] - Optional color bands that can be displayed in the chart's plot area to highlight specific ranges or intervals along an axis. These bands help emphasize particular areas of interest within the chart for improved data visualization and interpretation. 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 - Defines the starting point or reference value from which the axis measurements are calculated. This baseline determines where the axis grid, tick marks, or data rendering begin, influencing the visual representation of the chart or graph.
- customDraw:boolean - A boolean value that specifies whether the axis should be rendered automatically. If set to true, the axis is drawn by the system; if false, rendering is left to the user, who can draw the axis manually using provided APIs.
- description:string - Defines the text label or title displayed on the value axis of a chart or graph, providing context or explanation for the data values represented along that axis.
- displayValueAxis:boolean - Determines whether the value axis (typically representing numerical data on a chart or graph) is visible on the display. When set to true, the value axis is shown; when set to false, it is hidden from view.
- flip:boolean - Indicates whether the values should be displayed in the opposite order from their original sequence. If set to true, the order of the values will be reversed; if false, the values will be shown in their default (original) order.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A user-defined function that formats the values displayed along the axis, allowing you to customize how axis labels appear (e.g., adding units, formatting numbers, or applying localization).
- formatSettings:object - Settings that define how values are visually formatted and presented along the axis, such as number formatting, decimal precision, units, currency symbols, and custom display patterns. Property object's options:
- dateFormat:string | null - Specifies an optional date format string used to control how Date objects are displayed as text. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. If not provided, a default date formatting will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values.
- decimalSeparator:string | null - A character that separates the integer part from the fractional part in a numeric value (for example, the decimal point in "123.45" or the comma in "123,45", depending on locale). By default, this value is inherited from localization.decimalSeparator, ensuring that number formatting follows the conventions of the user's selected language or region.
- negativeWithBrackets:boolean - A boolean value that determines whether negative numbers should be displayed within parentheses (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to format negative numbers with brackets; set to false to use the standard minus sign.
- prefix:string - Specifies the text that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - Specifies the text string that will be added to the end of the current value. This text is appended after the existing content.
- thousandsSeparator:string | null - Specifies the character or symbol used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). This helps improve number readability by marking the boundaries between thousands, millions, billions, and so on. If not explicitly set, the value defaults to the character defined in localization.thousandsSeparator.
- gridLines:object - An object that defines the properties and styling options for the grid lines displayed along the valueAxis. This includes attributes such as line color, width, dash pattern, visibility, and other customization options that control the appearance and behavior of the value axis grid lines within the chart. Property object's options:
- color:string - Specifies the color used to display the grid lines on the chart or graph. Accepts any valid CSS color value (e.g., hex, RGB, or named colors).
- custom:[] | null - An array specifying the exact positions or values at which grid lines should appear on the grid. This property is only effective when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using automatic or default intervals. Each element in the array represents a coordinate or value where a grid line will be rendered.
- dashStyle:string - Specifies the dash pattern for grid lines. Use a string of comma-separated numbers (e.g., "2,2") to define the lengths of dashes and gaps in pixels. For example, "2,2" creates a pattern of 2-pixel dashes followed by 2-pixel gaps.
- lineWidth:number - Specifies the thickness of the grid lines, measured in pixels. This value determines how wide each grid line appears on the screen.
- step:number | null - Specifies the number of axis unit intervals between consecutive grid lines on the chart. This value determines how frequently grid lines are drawn by setting the step size as a multiple of the base axis unit. For example, a value of 2 will place a grid line every two axis units.
- unitInterval:number - Specifies the spacing between adjacent grid lines by setting the interval distance. This determines how far apart the grid lines are displayed, allowing you to control the density or sparsity of the grid within the layout or chart.
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of grid lines:
true: All default grid lines are displayed.false: No grid lines are displayed.'custom': Only specific grid lines defined in thegridLines.customarray are displayed. Use this option to show grid lines at custom positions or offsets.
- labels:object - Defines the properties and configuration options for the labels displayed along the axis, such as label text, style, formatting, rotation, and positioning. Property object's options:
- angle:number - Specifies the angle, in degrees, at which the text is rotated clockwise from its normal horizontal orientation.
- autoRotate:boolean - Indicates whether automatic rotation is enabled for the chart. This boolean property applies exclusively to polar and spider chart types, controlling whether the chart elements rotate automatically.
- class:string | null - Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the application.
- custom:[] | null - An array specifying the exact values or positions (offsets) at which labels should be displayed on the axis. This property is used only when labels.visible is set to 'custom', allowing you to define a customized set of label locations rather than using default or evenly spaced labels.
- formatFunction:{(value?: any, index?: number, series?: any): string} - Specifies a callback function responsible for customizing the appearance or text of the labels. This function receives the original label value as an argument and should return the formatted label as it should be displayed. Use this to apply custom formatting, localization, or other label transformations.
- formatSettings:object - An object that specifies the configuration options for label formatting, including properties such as font size, color, font style, alignment, and other visual styling attributes. This object allows you to customize the appearance and presentation of labels.
- horizontalAlignment:string - Specifies the horizontal alignment of labels (e.g., left, center, or right) within their container. Determines how label text is positioned along the horizontal axis.
- offset:object - Specifies the amount of space or displacement applied to labels from their default position. This setting allows you to adjust how far the labels are shifted horizontally, vertically, or both—helpful for improving readability and avoiding overlap with other elements.
- rotationPoint:string - Specifies the reference point or coordinates around which the text will be rotated. This determines the center or pivot for the rotation transformation applied to the text.
- step:number | null - Specifies the number of axis unit intervals between each label placement. For example, a value of 1 places a label at every interval, while a value of 2 places a label at every second interval. This controls the spacing of labels along the axis.
- unitInterval:number - Defines the spacing between consecutive labels, specifying the interval at which labels are displayed along the axis or relevant element. This setting determines how frequently labels appear, allowing you to control label density and avoid overlap.
- verticalAlignment:string - Aligns the vertical position of labels relative to their containing element, allowing you to specify whether labels are positioned at the top, center, or bottom within the container.
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of labels. When set to
true, all labels are displayed. When set tofalse, all labels are hidden. If set to'custom', only the specific labels or offsets provided in the custom array will be visible. - line:object - An object that defines the visual and functional properties of the axis line, including attributes such as color, width, style (e.g., solid or dashed), and visibility settings. This object allows you to customize how the axis line appears on a chart or graph. Property object's options:
- color:string - Specifies the color used to render the axis line, allowing customization of the axis appearance. Accepts any valid CSS color value (e.g., hex, RGB, color name).
- dashStyle:string - Specifies the dash pattern for the line as a comma-separated sequence of numbers, such as '2,2', where each number represents the length of dashes and gaps, respectively. By default, this value is inherited from the gridLines.dashStyle setting.
- lineWidth:number - Specifies the width of the line, in pixels, used for drawing. By default, this value is inherited from the gridLines.lineWidth property unless explicitly set here.
- visible:boolean - A boolean value that specifies whether the axis line should be displayed ('true') or hidden ('false') on the chart.
- logarithmicScale:boolean - Specifies whether the scale should be displayed using a logarithmic (log) scale instead of a linear scale. When set to true, data values are plotted according to their logarithmic values, which is useful for visualizing data that spans several orders of magnitude.
- logarithmicScaleBase:number - Specifies the base value used for the logarithmic scale. All data values are plotted according to this base, which defines the intervals and spacing of the scale (e.g., a base of 10 creates intervals of 10, 100, 1000, etc.).
- maxValue:any - Specifies the highest numerical value displayed on the valueAxis. Any data points exceeding this maximum will be capped or not shown on the axis. Use this property to control the upper boundary of the axis range for accurate data representation and visualization.
- minValue:any - Defines the lowest value displayed on the valueAxis, establishing the minimum limit for the axis range. This sets where the axis will start, and any values below this threshold will not be shown.
- padding:object - An object that specifies the padding settings for the axis, defining the amount of spacing (in pixels or other units) added before and after the axis line. This controls the distance between the axis and its surrounding elements, such as labels, ticks, or gridlines. The object typically includes properties for padding at the start and end of the axis. Property object's options:
- bottom:number - Specifies the amount of padding to be applied to the bottom of the horizontal value axis. This property is only applicable when the valueAxis is oriented horizontally. Use it to add space below the axis for better layout or visual clarity.
- left:number - Specifies the amount of space (padding) added to the left side of the value axis when it is oriented vertically. This setting helps control the distance between the value axis and the edge of the chart, improving readability and layout customization. Applicable only when the valueAxis is set to a vertical orientation.
- right:number - Specifies the amount of padding to add to the right side of the chart. This option is applicable only when the valueAxis is oriented vertically, allowing you to create additional space on the right edge of the chart area.
- top:number - Specifies the amount of space added to the top of the horizontal value axis. This padding helps control the distance between the axis and its surrounding elements, allowing for improved layout and visual clarity. Applies exclusively to horizontal valueAxis configurations.
- position:string - Defines the positioning of the axis on the chart. By default, you can set the axis position to either 'left' or 'right' for vertical axes. If the
valueAxisis configured as horizontal, only 'top' or 'bottom' values are valid. This property determines where the axis line and its labels appear relative to the chart area. - type:string - "Specifies the type of axis used to represent the values in a chart (such as linear, logarithmic, or categorical), determining how data points are scaled and displayed along the value axis."
- textRotationAngle:number | null - Specifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.
- textRotationPoint:string - Specifies the reference point or origin around which the text will be rotated. This determines the center of rotation for any transformation applied to the text.
- tickMarks:object - Object that defines the configuration options for the tick marks displayed on the valueAxis, including properties such as tick size, color, thickness, spacing, and visibility. This allows you to customize the appearance and behavior of the valueAxis tick marks to fit your chart’s design requirements. Property object's options:
- color:string - Specifies the color used to display the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex, rgb, or color name).
- custom:[] | null - Specifies an array of custom values or positions at which tick marks will be displayed along the axis. This property is only applicable when tickMarks.visible is set to 'custom'. Each entry in the array represents a specific value or offset where a visible tick mark should appear.
- dashStyle:string - Specifies the dash pattern for tick marks using a comma-separated string. For example, '2,2' creates a repeating pattern of 2 pixels filled and 2 pixels of space. Adjust the values to customize the appearance of dashed tick marks.
- lineWidth:number - Specifies the thickness of the tick marks, in pixels. This value determines how wide each tick mark appears on the axis or scale.
- size:number - Specifies the length of the tick marks in pixels, determining how long each tick mark appears on the axis.
- step:number | null - Specifies the number of axis unit intervals between each tick mark. This determines how frequently tick marks are placed along the axis—set as a multiple of the default unit interval. For example, a value of 2 places tick marks every 2 units, skipping every other interval.
- unitInterval:number - Specifies the distance or value between each consecutive tick mark on the axis, determining how frequently tick marks appear. This controls the spacing of the tick marks for improved readability and precision on the scale.
- visible:boolean | string -
Possible values:
true,false,'custom'.Controls the visibility of tick marks on the component:
true: Shows all default tick marks.false: Hides all tick marks.'custom': Only displays tick marks at the positions specified in the tickMarks.custom array.
- title:object - An object that defines the properties and configuration of the valueAxis title, including attributes such as the displayed text, font style, color, alignment, and additional styling options. Property object's options:
- class:string | null - Specifies the CSS class to be applied to the title text element, allowing for custom styling and formatting through external or internal stylesheets.
- horizontalAlignment:string - Specifies the horizontal alignment of content within its container, such as left, center, right, or justified. Determines how content is positioned along the horizontal (x) axis.
- text:string - The main text content displayed as the title. This typically serves as a concise summary or headline for the section, page, or component.
- verticalAlignment:string - Controls the vertical alignment of content within its containing element, allowing you to position items at the top, center, bottom, or baseline relative to their container.
- visible:boolean - A boolean value that specifies whether the title should be displayed (true) or hidden (false) on the interface.
- unitInterval:number | null - Specifies the amount of spacing or time between each unit, determining how far apart or how frequently the units are placed or triggered.
- valuesOnTicks:boolean - Determines if the axis values (labels or numbers) are positioned directly at the tick marks on the axis. When enabled, each label aligns exactly with its corresponding tick mark; when disabled, labels may be positioned between tick marks or at custom locations.
- visible:boolean - Displays or hides the value axis on the chart. When enabled, the value axis (typically representing numerical data) is visible, allowing users to interpret the chart’s scale; when disabled, the axis is hidden from view.
- alternatingBackgroundColor:string - Applies alternating background colors to the grid rows, creating a striped effect that enhances row distinction and improves readability.
- alternatingBackgroundColor2:string - Applies the secondary background color used for alternating row patterns, typically to distinguish every other row or section for improved readability.
- alternatingBackgroundOpacity:number - Controls the transparency level of the alternating background, where a value of 1 is fully opaque and 0 is fully transparent. This setting affects the visibility of the background colors that alternate in the UI component.
- axisSize:number | string | null - Specifies the length or range of the xAxis, determining how much data is displayed horizontally on the chart. This setting controls the visible width of the xAxis and can affect the scaling and spacing of axis labels and data points.
- bands:[] - Displays optional color bands within the chart’s plot area to highlight specific value ranges or regions. These bands can be customized in terms of color, position, and width to improve data visualization and readability. 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 - Specifies the fundamental time interval (such as 'day', 'month', or 'year') used to group or display data points along a 'date' axis. This setting determines how time-based data will be segmented and visualized on the chart.
- customDraw:boolean - A boolean value that specifies whether the axis should be rendered automatically by the system. If set to true, the axis is drawn automatically; if false, the axis will not be drawn, leaving it up to the user to render the axis manually using the provided APIs.
- dataField:string - Specifies the exact data field within the data source from which the value will be retrieved or referenced. This property is used to bind the component to a specific key or attribute in the underlying dataset.
- dateFormat:string | null - Specifies the optional date format to be used when parsing data from the data source. This property is relevant only when xAxis.type is set to 'date'. Use this format to ensure that date values from your data source are correctly interpreted and displayed on the x-axis. If not specified, a default date parsing format will be applied.
- displayText:string | null - Specifies an optional custom label to be displayed on the xAxis. If provided, this text will override the default xAxis label in the chart.
- flip:boolean - Determines if the values should be presented in the opposite order from their default sequence. When set to true, the values are displayed from last to first instead of first to last.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A user-defined function that formats the values displayed along the axis, allowing customization of label content and appearance (such as number precision, date formatting, or appending units) before they are rendered on the chart.
- formatSettings:object - Settings that define how values are visually formatted and presented on the axis, such as number formatting, decimal precision, currency symbols, and date or time display styles. Property object's options:
- dateFormat:string | null - Specifies an optional format string for displaying Date objects. This property is only relevant when the value being rendered is a JavaScript Date instance. If provided, the format string determines how the date will appear in the user interface; otherwise, a default date format will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or round numeric values to.
- decimalSeparator:string | null - A character or symbol that separates the integer portion of a number from its fractional (decimal) part. By default, this value is taken from localization.decimalSeparator, ensuring consistency with the number formatting conventions of the selected locale (for example, a period '.' for US English or a comma ',' for many European formats).
- negativeWithBrackets:boolean - A boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). When set to true, negative values are shown in brackets; when false, the standard minus sign notation is used.
- prefix:string - Specifies text that will be added at the beginning of the value before any further processing or display.
- sufix:string - Specifies the additional text that will be appended to the end of the existing value. This text is added after the current value content.
- thousandsSeparator:string | null - Indicates the character used to separate digit groups in large numbers, such as thousands, millions, and billions (e.g., using a comma in 1,000,000). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's number formatting conventions.
- gridLines:object - An object that defines the properties and visual styling of the grid lines displayed along the x-axis, including attributes such as color, width, dash pattern, and line visibility. Property object's options:
- color:string - Specifies the color used to display the grid lines, typically defined as a HEX, RGB, or named color value. This setting determines the appearance of the lines separating grid areas or cells.
- custom:[] | null - An array specifying custom values or offsets at which grid lines should be displayed on the grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define precise positions for each grid line instead of using automatically calculated intervals.
- dashStyle:string - Specifies the dash pattern for the grid lines as a string of comma-separated values. For example, "2,2" creates a dashed line with segments of 2 units drawn followed by 2 units of space. Adjust the values to control the length of dashes and gaps.
- lineWidth:number - Specifies the thickness of the grid lines, measured in pixels. This determines how wide each grid line will appear on the screen.
- step:number | null - Specifies the number of axis unit intervals between each grid line. Determines how frequently grid lines are displayed by setting the interval as a multiple of the base axis unit (e.g., a value of 2 draws a grid line every 2 axis units).
- unitInterval:number - Specifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines are drawn along the axis. Adjusting this value controls the density and appearance of the grid within the component or chart.
- visible:boolean | string -
Possible values:
true,false, or'custom'.Controls the visibility of grid lines:
- true: All grid lines are displayed.
- false: All grid lines are hidden.
- 'custom': Only specific grid lines, as defined in the
gridLines.customarray, are displayed. Use this option to specify custom grid line positions or offsets instead of showing all grid lines.
- labels:object - An object that defines the properties for axis labels, including settings such as font size, color, style, alignment, rotation, and formatting. This configuration controls the appearance and behavior of labels displayed along the axis in a chart or graph. Property object's options:
- angle:number - Specifies the angle, in degrees, by which the text is rotated clockwise from its default horizontal orientation.
- autoRotate:boolean - Indicates whether automatic rotation is enabled. This option accepts a boolean value (true or false) and is only applicable to polar and spider charts. When set to true, the chart elements will automatically rotate based on user interaction or data changes.
- class:string | null - Specifies the CSS class or classes applied to the label elements, allowing you to customize their appearance and styling through your stylesheet.
- custom:[] | null - An array specifying the exact values or offsets at which labels should be displayed on the component. This property is only applicable when
labels.visibleis set to'custom', allowing for precise customization of label placement according to the specified values in the array. - formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that formats label text before it is displayed. This function receives the raw label value as an argument and should return the formatted string or JSX to be rendered as the label. Use this to apply custom formatting, localization, or styling to chart, axis, or UI component labels.
- formatSettings:object - An object that specifies the formatting options for labels, including properties such as font style, color, size, alignment, and display format. This object allows you to customize the visual appearance and representation of label text within the application or component.
- horizontalAlignment:string - Specifies the horizontal alignment of labels, determining whether labels are positioned to the left, center, or right within their containing element.
- offset:object - Specifies the distance by which labels are shifted from their default position, allowing for customization of label placement relative to their associated elements.
- rotationPoint:string - Specifies the anchor point or coordinates about which the text will be rotated. This determines the center of rotation for the text element.
- step:number | null - Specifies the number of axis unit intervals to skip between label placements. For example, a value of 2 will place a label at every second axis interval, effectively spacing the labels further apart. This helps control label density on the axis.
- unitInterval:number - Specifies the spacing or distance, in set units, between consecutive labels along the axis. This determines how frequently labels are displayed, helping to control label density and improve readability.
- verticalAlignment:string - Aligns the labels vertically within their container, ensuring consistent placement along the vertical axis.
- visible:boolean | string -
Possible values:
true,false, or'custom'.Controls the visibility of labels:
true: All labels are shown.false: No labels are displayed.'custom': Only the labels specified within thecustomarray are displayed. Each label in the array corresponds to a particular value or offset that should be shown.
- line:object - An object that defines the visual and stylistic properties of the axis line, including attributes such as color, thickness (width), dash style, and visibility. Use this object to customize how the axis line appears on the chart. Property object's options:
- color:string - Specifies the color used to render the axis line, allowing you to customize the appearance of the axis for better visual distinction and design consistency. Accepts any valid CSS color value (e.g., hex code, RGB, RGBA, or color name).
- dashStyle:string - Specifies the dash pattern for the line, using a string of comma-separated numbers (e.g., '2,2' for a pattern of 2 pixels drawn, 2 pixels skipped). By default, this value is inherited from the gridLines settings. Set the dashStyle property to customize the appearance of the line’s dashes.
- lineWidth:number - Specifies the thickness of the line in pixels. By default, this value is inherited from the lineWidth property defined in gridLines. Adjust this option to customize the line width for this specific element.
- visible:boolean - Boolean value that controls whether the axis line is displayed ('true') or hidden ('false') on the chart.
- logarithmicScale:boolean - Specifies whether a logarithmic scale should be applied for data representation, enabling better visualization of values that span several orders of magnitude. When set to true, data will be displayed on a logarithmic axis instead of a linear one.
- logarithmicScaleBase:number - Defines the numerical base used for the logarithmic scale (e.g., 10 for log10, 2 for log2). This value determines how data is spaced and displayed along the logarithmic axis.
- maxValue:any - Specifies the upper limit for the values displayed on the x-axis. Data points that exceed this value will not be shown on the x-axis scale. This setting is useful for controlling the visible range of data in your chart.
- minValue:any - Specifies the lowest numerical value or data point that will be displayed on the xAxis. Values on the xAxis below this minimum will not be shown in the chart. This helps define the visible range of the axis and can be used to focus on a specific section of the data.
- padding:object - An object that defines the padding settings for the axis, specifying the amount of space (in pixels or other units) to add before and after the axis line. This padding controls the distance between the axis and its surrounding elements, helping to adjust overall layout and improve visual clarity. Property object's options:
- bottom:number - Specifies the amount of padding added to the bottom of the chart when using a horizontal xAxis. This setting creates extra space below the xAxis, which can improve the layout and prevent overlap with chart elements or labels. Only applicable when the xAxis orientation is horizontal.
- left:number - Specifies the amount of left padding to apply to the x-axis when it is displayed in a vertical orientation. This setting adjusts the spacing between the left edge of the chart container and the vertical x-axis, helping to improve layout and readability. Only applicable when the x-axis is configured vertically.
- right:number - Specifies the amount of padding added to the right side of the vertical xAxis. This setting is only applicable when the xAxis is oriented vertically, allowing you to create additional space on the right edge of the axis for improved layout and readability.
- top:number - Specifies the amount of padding applied to the top of the horizontal x-axis. This property allows you to add extra space above the x-axis when it is rendered horizontally.
- position:string - Specifies the position of the axis on the chart. By default, you can choose either 'bottom' or 'top' for a horizontal xAxis. If the xAxis is configured to be vertical, only 'left' or 'right' positions are valid. Make sure to select a value that matches the orientation of your axis to ensure correct placement on the chart.
- rangeSelector:object - Defines a range selector component for the xAxis, allowing users to interactively select and zoom into a specific data range on the chart. The range selector is implemented as a child instance of smart-chart, providing consistent functionality and style with the main chart. This enables seamless integration and synchronized data visualization between the main chart area and the range selector. Property object's options:
- backgroundColor:string | null - Specifies the background color applied to the entire range selector chart area, providing visual distinction and enhancing the chart's appearance. Accepts color values in formats such as HEX, RGB, RGBA, or color names.
- backgroundImage:string - Specifies the background image to be displayed behind the range selector chart, enhancing its visual appearance. The image is positioned and sized according to the chart container’s settings.
- baseUnit:string | null - Indicates the fundamental time interval (such as day, month, or year) that is used as the smallest unit of measurement and labeling when the axis type is set to 'date'. This determines how data points are grouped, displayed, and spaced along a date-based axis.
- borderLineColor:string | null - Defines the color of the border surrounding the range selector chart, allowing you to customize its appearance to match your application's design. Accepts color values in formats such as hex codes, RGB, or named colors.
- borderLineWidth:number | null - Specifies the thickness, in pixels, of the border line surrounding the range selector chart. Adjusting this value changes how bold or subtle the chart’s border appears.
- caption:string - Defines the text displayed as the caption (or title) above the range selector chart, providing context or a label for the chart’s content.
- colorScheme:string | null - Defines the color palette used by the range selector chart. The smartChart component supports 32 predefined color schemes, which can be specified by setting the palette value to a string from 'scheme01' to 'scheme32'. This determines the set of colors applied to chart elements such as bars, lines, or pie slices in the range selector.
- columnSeriesOverlap:boolean - Determines whether the columns in a series are allowed to overlap each other when displayed. When enabled, multiple column series can be rendered on top of one another instead of being positioned side by side. Disabling this option ensures that each column is shown separately with no visual overlap.
- columnsGapPercent:number - Specifies the percentage-based spacing between adjacent columns within the same data series. This determines how much empty space appears between columns that belong to a single series in a grouped or clustered chart.
- dataField:string | null - Specifies the exact field or property within the data source from which data will be retrieved or to which data will be mapped. This reference enables the application to access, display, or manipulate data associated with that particular field.
- description:string - Specifies the descriptive text displayed on the range selector chart, providing context or instructions to users regarding the chart's data or functionality.
- greyScale:boolean | null - Specifies whether the range selector chart should be rendered using greyscale (black, white, and shades of gray) colors instead of the default color palette. When enabled, all chart elements within the range selector—such as lines, areas, and markers—will appear in greyscale to provide a neutral visual style.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that formats input values before they are displayed or processed. This function receives each value as an argument and should return the formatted result. Use this to customize the appearance or structure of the data values.
- formatSettings:any - "Configuration options for customizing the appearance and layout of charts, including settings for colors, axes, labels, gridlines, legends, and overall styling."
- gridLines:object - An object that defines the properties and styling options for the grid lines displayed along the x-axis of the range selector chart. This includes settings such as line color, width, dash style, and visibility, allowing customization of the appearance and behavior of the x-axis grid lines within the chart.
- labels:object - An object that defines the properties and configuration options for the axis labels, such as font style, size, color, rotation, alignment, and formatting. This allows for customization of how the labels appear along the chart axis.
- maxValue:any - Specifies the highest allowable value on the x-axis of the range selector chart, effectively defining the upper limit of the selectable data range displayed in the chart.
- minValue:any - Specifies the lowest allowable value on the xAxis of the range selector chart, effectively setting the starting point for the selectable range. This determines the minimum data value users can select or view within the chart’s range selector component.
- padding:object - Describes the padding settings for the range selector chart, specifying the amount of space (in pixels or other units) between the chart’s content and its outer edges. This object allows developers to control the spacing on each side (top, right, bottom, and left) of the range selector, ensuring proper layout and visual separation within the chart area.
- position:string | null - Defines the position of the range selector chart within the component. This property allows you to specify where the range selector appears (e.g., top, bottom, left, or right) in relation to the main chart, enabling better layout customization and user interface control.
- renderTo:HTMLElement | null - Specifies the external HTML element where the range selector chart will be rendered, instead of displaying it within the main chart container. This allows you to place the range selector in a custom location on the page outside of the primary chart area.
- rightToLeft:boolean | null - Gets or sets a boolean value that determines whether the layout of the range selector chart is displayed in a mirrored (reversed) orientation. When set to true, the chart's elements such as axes, labels, and data series are rendered as a mirror image of the default layout. When set to false, the standard layout is used.
- seriesGapPercent:number - Specifies the percentage-based spacing between columns that represent different data series, ensuring visual separation between series in a grouped column or bar chart.
- seriesGroups:[] | null -
seriesGroups (Optional): This property defines the configuration of all data series that are displayed within the range selector chart. Each entry within
seriesGroupsspecifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.For comprehensive details—including a complete list of supported subproperties and configuration examples—please refer to the main documentation entry for seriesGroups.
- serieType:string | null - Specifies the chart type used for the range selector in smartChart. smartChart supports a wide variety of standard chart types, allowing you to visually represent different kinds of data. You can display multiple series with different types on the same chart by specifying a type for each series group. Choosing the appropriate chart type enables you to best convey your data's meaning. Below is a comprehensive list of supported chart types in smartChart: 'Column and Bar Charts' - 'column': Displays simple vertical columns for each data point. - 'stackedcolumn': Stacked vertical columns representing cumulative values. - 'stackedcolumn100': Stacked columns where the height reflects percentage contributions (100%). - 'rangecolumn': Columns that float between two values, visualizing value ranges. 'Line and Area Charts' - 'line': Connects data points with straight lines. - 'stackedline': Stacks multiple line series, showing cumulative totals. - 'stackedline100': Stacked line with percentage contributions. - 'spline': Connects data points with smooth, curved lines. - 'stackedspline': Stacked smooth lines for cumulative totals. - 'stackedspline100': Stacked smooth lines showing percentage contributions. - 'stepline': Step-like straight lines connecting data points. - 'stackedstepline': Stacked step lines for cumulative data. - 'stackedstepline100': Stacked step lines as percentages. 'Area Charts' - 'area': Fills the area beneath straight lines connecting data points. - 'stackedarea': Areas are stacked to show cumulative values. - 'stackedarea100': Stacked areas scaled to 100% totals. - 'rangearea': Shows a floating area between pairs of value points. - 'splinearea': Fills the area beneath a smooth spline line. - 'stackedsplinearea': Stacked smooth areas for cumulative visualization. - 'stackedsplinearea100': Stacked smooth areas as percentages. - 'splinerangearea': Smooth, floating area between value pairs. - 'steparea': Step-like filled area. - 'stackedsteparea': Cumulative, stacked step areas. - 'stackedsteparea100': Stacked step areas scaled to 100%. - 'steprangearea': Step-shaped floating area between value pairs. 'Waterfall Charts' - 'waterfall': Visualizes cumulative effects of sequential positive and negative values. - 'stackedwaterfall': Stacked waterfall series for multi-category measures. 'Pie and Donut Charts' - 'pie': Circular chart divided into sectors, illustrating the relative proportions of each category. - 'donut': Similar to a pie chart, but with a hollow center, differentiating inner and outer radii. 'Scatter and Bubble Charts' - 'scatter': Displays individual data points as unconnected dots. - 'stackedscatter': Stacked scatter points for cumulative values. - 'stackedscatter100': Scatter points stacked and scaled as percentages. - 'bubble': Represents data points as circles (bubbles) with varying sizes. - 'stackedbubble': Stacked bubble series. - 'stackedbubble100': Bubbles showing percentage stacking. 'Stock Charts' - 'candlestick': Illustrates stock OHLC (open, high, low, close) data as candlesticks. - 'ohlc': Displays stock OHLC data as bars without color-filled bodies. 'Notes:' - Each series group in your chart must specify its own type. - Selecting the correct chart type helps emphasize trends, patterns, or proportions relevant to your data. For more details, refer to the smartChart documentation on series types and their specific configurations.
- showBorderLine:boolean | null - Specifies whether a border line should be displayed around the range selector chart. When set to true, a visible border is rendered outlining the range selector; when set to false, no border is shown.
- size:number | null - Defines the dimensions (width and height) of the range selector chart, controlling how large or small the range selector appears within the user interface. Adjusting this setting allows you to customize the overall size to fit your layout requirements.
- skipOverlappingPoints:boolean - Specifies whether overlapping data points should be visually displayed in column, OHLC, and candlestick series. When enabled, multiple data points that share the same position on the x-axis will be shown together, allowing for accurate representation of overlapping values in these chart types.
- titlePadding:object - Specifies the amount of padding (space) around the chart’s title (caption), controlling the distance between the title text and the chart’s edges. This property allows you to adjust the visual spacing to improve readability and appearance.
- unitInterval:number | null - Specifies the amount of space or time between each individual unit, determining how far apart the units are from one another. This interval can be defined in various units (such as pixels, seconds, etc.) depending on the context, and directly affects the layout, spacing, or timing between consecutive units.
- valueAxis:object - An object that defines configuration options for the y-axis (value axis) of the range selector chart, including properties such as axis limits, scaling, labels, grid lines, and other display settings.
- visible:boolean - Determines whether the range selector component is visible or hidden on the interface. When enabled, users can select a specific range (such as dates or values) to filter or adjust the displayed data. Disabling this option will hide the range selector from view.
- text:string - The text label displayed on the x-axis.
- textRotationAngle:number | null - Specifies the angle, in degrees, to rotate the text from its default horizontal orientation. Positive values rotate the text clockwise, while negative values rotate it counterclockwise.
- textRotationPoint:string - Specifies the reference point or anchor position around which the text will be rotated. This determines the exact location in relation to the text (such as its center, corner, or a custom coordinate) that serves as the axis of rotation.
- tickMarks:object - Object that defines the properties and appearance of the tick marks displayed along the xAxis, including settings such as tick interval, length, color, formatting, and label options. Property object's options:
- color:string - Specifies the color used to render the tick marks on the axis, grid, or scale. Accepts any valid CSS color value (e.g., HEX, RGB, or color names).
- custom:[] | null - An array specifying the exact numeric values or offsets at which tick marks will appear along the axis. This property is used only when tickMarks.visible is set to 'custom', allowing you to define precise positions for tick marks instead of relying on automatic or evenly spaced rendering. Each entry in the array determines the location of an individual tick mark.
- dashStyle:string - Specifies the dash pattern for tick marks using a string of numbers. For example, '2,2' creates a dashed line with segments of 2 units long followed by 2 units of space. This allows customization of the tick mark appearance with different dash and gap lengths.
- lineWidth:number - Specifies the thickness, in pixels, of the tick marks displayed on the axis lines. This value determines how wide each tick mark appears.
- size:number - Specifies the length of the tick marks in pixels, determining how long each tick appears along the axis or scale.
- step:number | null - Determines the number of axis unit intervals between each tick mark, setting the spacing so that tick marks appear at every specified multiple of the base interval. For example, a value of 2 places a tick mark at every second axis unit interval.
- unitInterval:number - Specifies the distance or value difference between consecutive tick marks on the axis, determining how frequently tick marks appear and helping to control the scale's granularity.
- visible:boolean | string -
Possible values:
true,false,'custom'.Controls the visibility and placement of tick marks on the axis:
true: All default tick marks are displayed.false: Tick marks are hidden.'custom': Only specific tick marks, defined in thetickMarks.customarray, will be displayed at the specified values or offsets.
- title:object - An object that defines the properties and settings for the x-axis title, including the text to display, font style, alignment, and other appearance-related options. Property object's options:
- class:string | null - Specifies the CSS class or classes to be applied to the title text element, allowing for custom styling and theme adjustments. Provide one or more class names as a string or array.
- horizontalAlignment:string - Specifies the horizontal alignment of content within its container, determining whether elements are aligned to the left, center, or right.
- text:string - Contains the text content to be displayed as the main title or heading.
- verticalAlignment:string - Specifies the vertical alignment of content within an element, allowing you to control whether content is positioned at the top, middle, bottom, or baseline relative to its container.
- visible:boolean - A boolean value that specifies whether the title should be visible ('true') or hidden ('false') in the user interface.
- toolTipFormatFunction:{(value?: any, index?: number, series?: any): string} - A custom function that formats the xAxis values displayed in tooltips, enabling you to control how the x-axis data appears (e.g., date/time formatting, number precision, or adding custom labels) when users hover over chart elements.
- toolTipFormatSettings:object - Configuration options for formatting xAxis values specifically within tooltip displays. These settings determine how xAxis values appear when shown in tooltips, such as specifying number formats, date formats, or custom value formatting functions. Property object's options:
- dateFormat:string | null - Specifies an optional string that defines the format in which Date objects are displayed. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. Use standard date formatting tokens to customize how the date appears in the UI.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values, controlling the precision of numbers in the application.
- decimalSeparator:string | null - A character or symbol that separates the integer portion from the fractional portion of a numeric value (for example, the period in 123.45 or the comma in 123,45). By default, this value is determined by the localization.decimalSeparator setting, ensuring consistency with the user's locale or regional formatting conventions.
- negativeWithBrackets:boolean - A boolean value that determines if negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to show negative values in brackets, or false to use the standard minus sign.
- prefix:string - Specifies a string that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - The string that will be added to the end of the current value. This text is appended directly after the existing value, extending it without altering the original content.
- thousandsSeparator:string | null - Specifies the character used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's standard number formatting.
- type:string - Defines the axis type, determining how data is interpreted and displayed along the axis. Supported values include:
- 'auto' – Automatically detects the appropriate axis type based on the input data and switches to either 'basic', 'linear', or 'date'. This is the recommended default for versatility.
- 'date' – Configures the axis to handle and display date/time values, making it suitable for time series or chronological data.
- 'basic' – Displays all data points in their original, sequential order without interpreting their values, often used for categorical or nominal data.
- 'linear' – Arranges data points according to the numeric values provided in the xAxis data field, resulting in a proportionally spaced, numeric scale.
- unitInterval:number | null - Specifies the amount of time or distance that separates each unit, determining the spacing or frequency at which units occur within the sequence.
- valuesOnTicks:boolean - Indicates whether the axis values (labels) are positioned directly on the tick marks, ensuring that each label is aligned with its corresponding tick for improved readability and accurate data representation. If set to false, axis values may appear between tick marks instead of directly on them.
- visible:boolean - Controls the visibility of the x-axis on the chart. When enabled, the x-axis and its associated labels, ticks, and gridlines will be displayed; when disabled, the x-axis and all related elements will be hidden from view.
Events
Methods
Properties
animationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled and no animation effects will be applied. For other supported values, the property enables the corresponding animation behavior."none" | "simple" | "advanced"
Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled and no animation effects will be applied. For other supported values, the property enables the corresponding animation behavior.
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 Smart.Chart('#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' } ] } ] });
animationDurationSpecifies the duration of the animation, in milliseconds. Acceptable values range from 0 to 5000 inclusive. If a value outside this range is provided, smartChart will automatically revert the animation duration to its default setting.number
Specifies the duration of the animation, in milliseconds. Acceptable values range from 0 to 5000 inclusive. If a value outside this range is provided, smartChart will automatically revert the animation duration to its default setting.
Default value
300Example 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 Smart.Chart('#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' } ] } ] });
backgroundColorSpecifies the color used for the chart’s background. Accepts any valid CSS color format, such as hexadecimal (e.g., '#DDFFE8'), RGB (e.g., 'rgb(221,255,232)'), or color names (e.g., 'lightgreen'). This property controls the area behind all chart elements, providing visual distinction or branding.string | null
Specifies the color used for the chart’s background. Accepts any valid CSS color format, such as hexadecimal (e.g., '#DDFFE8'), RGB (e.g., 'rgb(221,255,232)'), or color names (e.g., 'lightgreen'). This property controls the area behind all chart elements, providing visual distinction or branding.
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 Smart.Chart('#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' } ] } ] });
backgroundImageSpecifies the URL of an image to be used as the chart’s background. For example, setting this property to 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg' will display that image as the backdrop behind the chart elements. This allows you to customize the chart’s appearance with any image of your choice.string
Specifies the URL of an image to be used as the chart’s background. For example, setting this property to 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg' will display that image as the backdrop behind the chart elements. This allows you to customize the chart’s appearance with any image of your choice.
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 Smart.Chart('#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' } ] } ] });
borderLineColorDefines the color of the chart's border. Accepts any valid CSS color value, such as a hexadecimal code (e.g., "#098700"), RGB, RGBA, HSL, or named color. This property allows you to customize the appearance of the chart's outline to match your application's design.string | null
Defines the color of the chart's border. Accepts any valid CSS color value, such as a hexadecimal code (e.g., "#098700"), RGB, RGBA, HSL, or named color. This property allows you to customize the appearance of the chart's outline to match your application's design.
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 Smart.Chart('#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' } ] } ] });
borderLineWidthSpecifies the thickness, in pixels, of the chart’s border line. A higher value results in a thicker border around the chart area.number
Specifies the thickness, in pixels, of the chart’s border line. A higher value results in a thicker border around the chart area.
Default value
1Example 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 Smart.Chart('#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' } ] } ] });
captionDefines the main title displayed at the top of the chart, providing a concise summary or description of the chart's data or purpose.string
Defines the main title displayed at the top of the chart, providing a concise summary or description of the chart's data or purpose.
Default value
"Caption"clipSpecifies whether plotted elements that extend beyond the axis boundaries should be visually clipped (hidden) rather than drawn outside the plotting area. When enabled, any portion of the elements that overflows the axis limits will not be displayed.boolean
Specifies whether plotted elements that extend beyond the axis boundaries should be visually clipped (hidden) rather than drawn outside the plotting area. When enabled, any portion of the elements that overflows the axis limits will not be displayed.
Default value
trueExample 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 Smart.Chart('#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' } ] } ] });
colorSchemeDefines the color palette used for rendering the chart elements. smartChart supports 32 built-in color schemes, which can be specified by setting this property to a string value from 'scheme01' to 'scheme32'. Each scheme applies a predefined set of colors to series, data points, and chart backgrounds, allowing you to easily customize the chart's appearance."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"
Defines the color palette used for rendering the chart elements. smartChart supports 32 built-in color schemes, which can be specified by setting this property to a string value from 'scheme01' to 'scheme32'. Each scheme applies a predefined set of colors to series, data points, and chart backgrounds, allowing you to easily customize the chart's appearance.
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 Smart.Chart('#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' } ] } ] });
columnSeriesOverlapControls whether the columns in the series are displayed overlapping each other or spaced apart. When enabled, columns from different series will overlap along the category axis. When disabled, columns will be shown side by side without overlapping.boolean
Controls whether the columns in the series are displayed overlapping each other or spaced apart. When enabled, columns from different series will overlap along the category axis. When disabled, columns will be shown side by side without overlapping.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
crosshairsColorSpecifies the color of the crosshairs lines displayed on the chart. This property is only effective when the 'enableCrosshairs' option is set to 'true'. Use a valid CSS color value (e.g., hex, RGB, or color name) to customize the appearance of the crosshairs.string | null
Specifies the color of the crosshairs lines displayed on the chart. This property is only effective when the 'enableCrosshairs' option is set to 'true'. Use a valid CSS color value (e.g., hex, RGB, or color name) to customize the appearance of the crosshairs.
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 Smart.Chart('#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' } ] } ] });
crosshairsDashStyleSpecifies the dash pattern for the crosshairs lines by accepting a comma-separated sequence of numbers. Each number represents the length (in pixels) of dashes and gaps, alternating between line segments and spaces. For example, a value of "3,3" will create a dashed line with 3 pixels of line followed by 3 pixels of space, repeating along the length of the crosshair. This property is only effective when the "enableCrosshairs" property is set to true.string
Specifies the dash pattern for the crosshairs lines by accepting a comma-separated sequence of numbers. Each number represents the length (in pixels) of dashes and gaps, alternating between line segments and spaces. For example, a value of "3,3" will create a dashed line with 3 pixels of line followed by 3 pixels of space, repeating along the length of the crosshair. This property is only effective when the "enableCrosshairs" property is set to true.
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 Smart.Chart('#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' } ] } ] });
crosshairsLineWidthSets or retrieves the thickness (in pixels) of the crosshair lines displayed on the chart. This property is only effective when 'enableCrosshairs' is set to 'true'; otherwise, the crosshair lines will not be shown regardless of this value.number
Sets or retrieves the thickness (in pixels) of the crosshair lines displayed on the chart. This property is only effective when 'enableCrosshairs' is set to 'true'; otherwise, the crosshair lines will not be shown regardless of this value.
Default value
1Example 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 Smart.Chart('#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' } ] } ] });
dataSourceSpecifies the data set to be used as the source for the chart, determining which values and categories will be displayed. This property should be assigned an array or object containing the chart’s data points. []
Specifies the data set to be used as the source for the chart, determining which values and categories will be displayed. This property should be assigned an array or object containing the chart’s data points.
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 Smart.Chart('#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' } ] } ] });
descriptionSpecifies the descriptive text that appears on the chart, providing context or additional information to help users understand the chart’s content and purpose.string
Specifies the descriptive text that appears on the chart, providing context or additional information to help users understand the chart’s content and purpose.
Default value
"Description"disabledDetermines whether the chart is visible and interactive. Set to true to display and activate the chart; set to false to deactivate it.boolean
Determines whether the chart is visible and interactive. Set to true to display and activate the chart; set to false to deactivate it.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
drawSpecifies the custom drawing function for smartChart. By setting this property, you can override the default rendering behavior of smartChart and implement your own drawing logic. This allows you to customize how chart elements are displayed according to your specific requirements.function | null
Specifies the custom drawing function for smartChart. By setting this property, you can override the default rendering behavior of smartChart and implement your own drawing logic. This allows you to customize how chart elements are displayed according to your specific requirements.
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 Smart.Chart('#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' } ] } ] });
drawBeforeAllows you to draw custom graphics on the chart canvas before rendering the caption and all other standard chart elements. Use this function to add background visuals, watermarks, or any additional graphics that should appear beneath the main chart components.function | null
Allows you to draw custom graphics on the chart canvas before rendering the caption and all other standard chart elements. Use this function to add background visuals, watermarks, or any additional graphics that should appear beneath the main chart components.
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 Smart.Chart('#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' } ] } ] });
enableAxisTextAnimationSpecifies whether the animation effect for the axis labels (text displayed along the axes) is enabled or disabled. When set to true, the axis labels will animate during rendering or updates; when set to false, the labels will remain static.boolean
Specifies whether the animation effect for the axis labels (text displayed along the axes) is enabled or disabled. When set to true, the axis labels will animate during rendering or updates; when set to false, the labels will remain static.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
enableCrosshairsControls the visibility of crosshair lines on the chart. When enabled, vertical and/or horizontal lines appear as you hover over data points in line and area series, helping to highlight the precise location of your cursor in relation to the data. Disabling this option will hide these crosshair indicators.boolean
Controls the visibility of crosshair lines on the chart. When enabled, vertical and/or horizontal lines appear as you hover over data points in line and area series, helping to highlight the precise location of your cursor in relation to the data. Disabling this option will hide these crosshair indicators.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
greyScaleSpecifies whether the chart should be rendered using greyscale colors instead of the default color palette. When enabled, all chart elements (such as bars, lines, or areas) will appear in shades of grey rather than in color.boolean
Specifies whether the chart should be rendered using greyscale colors instead of the default color palette. When enabled, all chart elements (such as bars, lines, or areas) will appear in shades of grey rather than in color.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
legendLayoutSpecifies the arrangement of items within the legend, such as displaying them in a vertical stack, a horizontal row, or a custom configuration. This property determines how legend entries are organized and presented in the chart.
Click for more details. Property object's options:
object | null
Specifies the arrangement of items within the legend, such as displaying them in a vertical stack, a horizontal row, or a custom configuration. This property determines how legend entries are organized and presented in the chart.
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 Smart.Chart('#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' } ] } ] });
localeSpecifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works together with the messages property to display localized text and content based on the selected locale.string
Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works together with the messages property to display localized text and content based on the selected locale.
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 Smart.Chart('#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' } ] } ] });
localizationA comprehensive localization object that includes culture-specific properties necessary for accurately formatting currencies, numbers, dates, and other locale-dependent values according to regional conventions.
Click for more details. Property object's options:
object
A comprehensive localization object that includes culture-specific properties necessary for accurately formatting currencies, numbers, dates, and other locale-dependent values according to regional conventions.
Properties
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 Smart.Chart('#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' } ] } ] });
decimalSeparatorA character used as a decimal separator to clearly distinguish the integer part from the fractional part of a numerical value, such as a period (“.”) in 3.14 or a comma (“,”) in 3,14, depending on locale.string
A character used as a decimal separator to clearly distinguish the integer part from the fractional part of a numerical value, such as a period (“.”) in 3.14 or a comma (“,”) in 3,14, depending on locale.
Default value
"."Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.localization.decimalSeparator;
patternsAn object that defines various datetime formatting patterns, where each key represents a specific format type (e.g., ISO, short date, long date, time), and each value is the corresponding string pattern used to format or parse datetime values. These patterns can be utilized for consistent date and time representation throughout an application.object | null
An object that defines various datetime formatting patterns, where each key represents a specific format type (e.g., ISO, short date, long date, time), and each value is the corresponding string pattern used to format or parse datetime values. These patterns can be utilized for consistent date and time representation throughout an application.
Read the nested value:
const el = document.querySelector('smart-chart');
const patterns = el.localization.patterns;
thousandsSeparatorA symbol that serves as a separator to group digits in large numbers, distinguishing thousands, millions, billions, and higher orders of magnitude for improved readability (e.g., the comma in "1,000,000" or the space in "1 000 000").string
A symbol that serves as a separator to group digits in large numbers, distinguishing thousands, millions, billions, and higher orders of magnitude for improved readability (e.g., the comma in "1,000,000" or the space in "1 000 000").
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.localization.thousandsSeparator;
messagesConfigures or retrieves an object containing all user-facing text strings displayed by the widget, enabling localization into different languages. This property is used together with the locale option to provide translated text based on the selected language, ensuring the widget’s interface adapts to users’ regional preferences. object
Configures or retrieves an object containing all user-facing text strings displayed by the widget, enabling localization into different languages. This property is used together with the locale option to provide translated text based on the selected language, ensuring the widget’s interface adapts to users’ regional preferences.
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 Smart.Chart('#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' } ] } ] });
paddingSpecifies the amount of padding to apply to the left, top, right, and bottom sides of the Chart, creating space between the chart's content and its outer edges. This padding can be used to adjust the position of the chart elements and prevent them from overlapping with the chart's border or surrounding elements.
Click for more details. Property object's options:
object
Specifies the amount of padding to apply to the left, top, right, and bottom sides of the Chart, creating space between the chart's content and its outer edges. This padding can be used to adjust the position of the chart elements and prevent them from overlapping with the chart's border or surrounding elements.
Properties
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 Smart.Chart('#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' } ] } ] });
bottomSpecifies the amount of space (padding) added to the bottom edge of the chart, creating distance between the chart content and the lower boundary of the chart area. Adjusting this value can help prevent labels, data points, or other chart elements from overlapping with the bottom of the chart.number
Specifies the amount of space (padding) added to the bottom edge of the chart, creating distance between the chart content and the lower boundary of the chart area. Adjusting this value can help prevent labels, data points, or other chart elements from overlapping with the bottom of the chart.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.padding.bottom;
leftSpecifies the amount of space, in pixels, between the left edge of the chart and its content. This padding can help prevent chart elements from being cut off or overlapping with the chart's border.number
Specifies the amount of space, in pixels, between the left edge of the chart and its content. This padding can help prevent chart elements from being cut off or overlapping with the chart's border.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.padding.left;
rightSpecifies the amount of space added to the right side of the chart area, creating padding between the chart content and the chart’s right edge. This helps control the layout and prevents elements from being clipped or overlapping with the chart boundary.number
Specifies the amount of space added to the right side of the chart area, creating padding between the chart content and the chart’s right edge. This helps control the layout and prevents elements from being clipped or overlapping with the chart boundary.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.padding.right;
topSpecifies the amount of space (in pixels) added to the top of the chart, creating padding between the chart’s upper edge and its content or border. This helps control the visual separation and overall layout of the chart within its container.number
Specifies the amount of space (in pixels) added to the top of the chart, creating padding between the chart’s upper edge and its content or border. This helps control the visual separation and overall layout of the chart within its container.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.padding.top;
renderEngineSpecifies the rendering engine responsible for displaying the chart. If this property is left as an empty string, smartChart will automatically detect and select the most suitable rendering engine based on the browser’s capabilities (such as SVG, Canvas, or VML). This ensures optimal performance and compatibility across different browsers."" | "SVG" | "HTML5"
Specifies the rendering engine responsible for displaying the chart. If this property is left as an empty string, smartChart will automatically detect and select the most suitable rendering engine based on the browser’s capabilities (such as SVG, Canvas, or VML). This ensures optimal performance and compatibility across different browsers.
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 Smart.Chart('#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' } ] } ] });
rightToLeftGets or sets a boolean value that determines whether the chart's layout is displayed in a mirrored (reversed) orientation. When set to true, all chart elements, such as axes and data series, are rendered as a mirror image of the default layout.boolean
Gets or sets a boolean value that determines whether the chart's layout is displayed in a mirrored (reversed) orientation. When set to true, all chart elements, such as axes and data series, are rendered as a mirror image of the default layout.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
seriesGroupsThe 'seriesGroups' property defines the configuration for all data series displayed within the chart. smartChart supports visualizing multiple series, even of different chart types, by organizing them into groups called "series groups." Each series group is an object within the 'seriesGroups' array, and allows you to configure a set of series that will share common settings, such as the chart type, value axis (Y-axis), and appearance options.Importantly, each series group can have its own independently configured value axis (Y-axis). This flexibility enables you to plot data series with different value ranges or units on the same chart, as each group’s Y-axis can be scaled and labeled differently. Additionally, you can mix different visualization types (such as 'line', 'area', or 'column')—for instance, displaying one group as lines while representing another as columns—providing richer and more informative data presentations.In summary, the 'seriesGroups' property is an array where:- Each element is an object defining a series group.- Each group specifies its chart type and contains its own array of series, along with settings for axes, styling, and more.- Multiple series groups enable the chart to display series of different types and with different Y-axis scales simultaneously.This property is essential for building complex and customizable charts that present heterogeneous data in a clear and visually compelling way.
Click for more details. Property object's options:
[]
The 'seriesGroups' property defines the configuration for all data series displayed within the chart. smartChart supports visualizing multiple series, even of different chart types, by organizing them into groups called "series groups." Each series group is an object within the 'seriesGroups' array, and allows you to configure a set of series that will share common settings, such as the chart type, value axis (Y-axis), and appearance options.
Importantly, each series group can have its own independently configured value axis (Y-axis). This flexibility enables you to plot data series with different value ranges or units on the same chart, as each group’s Y-axis can be scaled and labeled differently. Additionally, you can mix different visualization types (such as 'line', 'area', or 'column')—for instance, displaying one group as lines while representing another as columns—providing richer and more informative data presentations.
In summary, the 'seriesGroups' property is an array where:
- Each element is an object defining a series group.
- Each group specifies its chart type and contains its own array of series, along with settings for axes, styling, and more.
- Multiple series groups enable the chart to display series of different types and with different Y-axis scales simultaneously.
This property is essential for building complex and customizable charts that present heterogeneous data in a clear and visually compelling way.
Properties
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- tickMarksColor:string - Color of tick marks.
- 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.
- 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.
annotationsAn array of chart annotation objects.
Click for more details. Property object's options:
[]
An array of chart annotation objects.
Properties
- angle:number - Text rotation angle.
- class:string | null - CSS class of the annotation.
- fillColor:string | null - Inner text color (fill).
- horizontalAlignment:string - Horizontal text alignment.
- lineColor:string | null - Outer text color (stroke).
- offset:object - Offset of the annotation text relative to the base annotation offset.
- rotationPoint:string - Position to rotate the text around.
- value:string | null - Text of the annotation.
- verticalAlignment:string - Vertical text alignment.
Read the nested value:
const el = document.querySelector('smart-chart');
const annotations = el.seriesGroups[0].annotations;
fillColorFill/background color of the annotation.string | null
Fill/background color of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColor = el.seriesGroups[0].annotations[0].fillColor;
heightHeight of the annotation.number
Height of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const height = el.seriesGroups[0].annotations[0].height;
lineColorLine color of the annotation.string | null
Line color of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].annotations[0].lineColor;
offsetCustom offset of the annotation relative to xValue & yValue. object
Custom offset of the annotation relative to xValue & yValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].annotations[0].offset;
xHorizontal offset.number | null
Horizontal offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].annotations[0].offset.x;
yVertical offset.number | null
Vertical offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].annotations[0].offset.y;
pathLine path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.string | null
Line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.
Read the nested value:
const el = document.querySelector('smart-chart');
const path = el.seriesGroups[0].annotations[0].path;
radiusRadius of the annotation in case its type is 'circle'.number
Radius of the annotation in case its type is 'circle'.
Read the nested value:
const el = document.querySelector('smart-chart');
const radius = el.seriesGroups[0].annotations[0].radius;
textObject describing the text of the annotation.
Click for more details. Property object's options:
object
Object describing the text of the annotation.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.seriesGroups[0].annotations[0].text;
angleText rotation angle.number
Text rotation angle.
Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].annotations[0].text.angle;
classCSS class of the annotation.string | null
CSS class of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].annotations[0].text.class;
fillColorInner text color (fill).string | null
Inner text color (fill).
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColor = el.seriesGroups[0].annotations[0].text.fillColor;
horizontalAlignmentHorizontal text alignment."center" | "left" | "right"
Horizontal text alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].annotations[0].text.horizontalAlignment;
lineColorOuter text color (stroke).string | null
Outer text color (stroke).
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].annotations[0].text.lineColor;
offsetOffset of the annotation text relative to the base annotation offset. object
Offset of the annotation text relative to the base annotation offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].annotations[0].text.offset;
xHorizontal offset.number
Horizontal offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].annotations[0].text.offset.x;
yVertical offset.number
Vertical offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].annotations[0].text.offset.y;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"centermiddle"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].annotations[0].text.rotationPoint;
valueText of the annotation.string | null
Text of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const value = el.seriesGroups[0].annotations[0].text.value;
verticalAlignmentVertical text alignment."center" | "top" | "bottom"
Vertical text alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].annotations[0].text.verticalAlignment;
typeShape type of the annotation."text" | "rect" | "circle" | "line" | "path" | "null"
Shape type of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.seriesGroups[0].annotations[0].type;
widthWidth of the annotation.number
Width of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const width = el.seriesGroups[0].annotations[0].width;
xValueValue to determine the horizontal offset of the annotation.number
Value to determine the horizontal offset of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const xValue = el.seriesGroups[0].annotations[0].xValue;
xValue2Optional 2nd value to determine the horizontal offset of the annotation bottom-right point.number
Optional 2nd value to determine the horizontal offset of the annotation bottom-right point.
Read the nested value:
const el = document.querySelector('smart-chart');
const xValue2 = el.seriesGroups[0].annotations[0].xValue2;
yValueValue to determine the vertical offset of the annotation.number
Value to determine the vertical offset of the annotation.
Read the nested value:
const el = document.querySelector('smart-chart');
const yValue = el.seriesGroups[0].annotations[0].yValue;
yValue2Optional 2nd value to determine the vertical offset of the annotation's bottom-right point.number
Optional 2nd value to determine the vertical offset of the annotation's bottom-right point.
Read the nested value:
const el = document.querySelector('smart-chart');
const yValue2 = el.seriesGroups[0].annotations[0].yValue2;
bandsOptional color bands dislayed in the chart's plot area.
Click for more details. Property object's options:
[]
Optional color bands dislayed in the chart's plot area.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.seriesGroups[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].bands[0].lineColor;
lineWidthBand line width.string | number | null
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.seriesGroups[0].bands[0].opacity;
columnsBottomWidthPercentColumns bottom width (as percentage of the total width).number
Columns bottom width (as percentage of the total width).
Default value
100Read the nested value:
const el = document.querySelector('smart-chart');
const columnsBottomWidthPercent = el.seriesGroups[0].columnsBottomWidthPercent;
columnsGapPercentPercentage gap between columns within the same serie.number
Percentage gap between columns within the same serie.
Default value
25Read the nested value:
const el = document.querySelector('smart-chart');
const columnsGapPercent = el.seriesGroups[0].columnsGapPercent;
columnsMaxWidthMaximum width of columns in column series.number | null
Maximum width of columns in column series.
Read the nested value:
const el = document.querySelector('smart-chart');
const columnsMaxWidth = el.seriesGroups[0].columnsMaxWidth;
columnsMinWidthMinimum width of columns in column series.number
Minimum width of columns in column series.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const columnsMinWidth = el.seriesGroups[0].columnsMinWidth;
columnsTopWidthPercentColumns top width (as percentage of the total width).number
Columns top width (as percentage of the total width).
Default value
100Read the nested value:
const el = document.querySelector('smart-chart');
const columnsTopWidthPercent = el.seriesGroups[0].columnsTopWidthPercent;
dataSourceDetermines the data source of the serieany
Determines the data source of the serie
Read the nested value:
const el = document.querySelector('smart-chart');
const dataSource = el.seriesGroups[0].dataSource;
drawDetermines the drawing function of the series group. When the property is set, you can draw after the series group has been plotted.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const draw = el.seriesGroups[0].draw;
drawBeforeFunction for custom drawing before the series group.function | null
Function for custom drawing before the series group.
Read the nested value:
const el = document.querySelector('smart-chart');
const drawBefore = el.seriesGroups[0].drawBefore;
enableSelectionDetermines whether series are selectable.boolean
Determines whether series are selectable.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const enableSelection = el.seriesGroups[0].enableSelection;
enableSeriesToggleDetermines whether to toggle series visibility after click on a legend's box.boolean
Determines whether to toggle series visibility after click on a legend's box.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const enableSeriesToggle = el.seriesGroups[0].enableSeriesToggle;
endAngleThe end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.number
The end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
Default value
360Read the nested value:
const el = document.querySelector('smart-chart');
const endAngle = el.seriesGroups[0].endAngle;
formatFunctionCallback function used to format series labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format series labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].formatFunction;
formatSettingsObject describing the format settings of series labels.
Click for more details. Property object's options:
object
Object describing the format settings of series labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].formatSettings[0].thousandsSeparator;
linesUnselectModeDetermines 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const linesUnselectMode = el.seriesGroups[0].linesUnselectMode;
offsetXHorizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.number
Horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.
Read the nested value:
const el = document.querySelector('smart-chart');
const offsetX = el.seriesGroups[0].offsetX;
offsetYVertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.number
Vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.
Read the nested value:
const el = document.querySelector('smart-chart');
const offsetY = el.seriesGroups[0].offsetY;
orientationSpecifies the orientation of the series group."vertical" | "horizontal"
Specifies the orientation of the series group.
Default value
"vertical"Read the nested value:
const el = document.querySelector('smart-chart');
const orientation = el.seriesGroups[0].orientation;
polarWhen polar is set to true, the chart will render in polar coordinates.boolean
When polar is set to true, the chart will render in polar coordinates.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const polar = el.seriesGroups[0].polar;
radiusThe radius of the polar coordinate system. Applicable to polar and spider charts only.number
The radius of the polar coordinate system. Applicable to polar and spider charts only.
Read the nested value:
const el = document.querySelector('smart-chart');
const radius = el.seriesGroups[0].radius;
seriesAn array of chart series.
Click for more details. Property object's options:
[]
An array of chart series.
Properties
- 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.
- angle:number - Text rotation angle.
- autoRotate:boolean - boolean determining if auto rotation is enabled.
- backgroundColor:string | null - Labels background color.
- backgroundOpacity:number | null - Labels background opacity.
- borderColor:string | null - Labels border line color.
- borderOpacity:number | null - Labels border line opacity.
- 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.
- linesAngles:boolean - Determines whether to use direct lines for the labels in pie/donut series.
- linesEnabled:boolean - Determines whether to use lines for the labels in pie/donut series.
- offset:object - Labels offset.
- padding:object - Object describing the padding of the labels.
- radius:number | null - Radius of the labels in pie/donut series.
- 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.
- 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.
- bottom:number - Bottom padding.
- left:number - Left padding.
- right:number - Right padding.
- top:number - Top padding.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const series = el.seriesGroups[0].series;
centerOffsetOffset from the center point in a pie/donut series.number
Offset from the center point in a pie/donut series.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const centerOffset = el.seriesGroups[0].series[0].centerOffset;
colorFunctionA 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.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const colorFunction = el.seriesGroups[0].series[0].colorFunction;
colorSchemeColor palette to use when rendering the serie."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
scheme01Read the nested value:
const el = document.querySelector('smart-chart');
const colorScheme = el.seriesGroups[0].series[0].colorScheme;
dataFieldName of the field in the data source.string
Name of the field in the data source.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataField = el.seriesGroups[0].series[0].dataField;
dataFieldCloseData field used in candlestcik and ohlc series.string
Data field used in candlestcik and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldClose = el.seriesGroups[0].series[0].dataFieldClose;
dataFieldFromData field used in in range column series as a start data field.string
Data field used in in range column series as a start data field.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldFrom = el.seriesGroups[0].series[0].dataFieldFrom;
dataFieldHighData field used in candlestcik and ohlc series.string
Data field used in candlestcik and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldHigh = el.seriesGroups[0].series[0].dataFieldHigh;
dataFieldLowData field used in candlestcik and ohlc series.string
Data field used in candlestcik and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldLow = el.seriesGroups[0].series[0].dataFieldLow;
dataFieldOpenData field used in candlestcik and ohlc series.string
Data field used in candlestcik and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldOpen = el.seriesGroups[0].series[0].dataFieldOpen;
dataFieldToData field used in range column series as an end data field.string
Data field used in range column series as an end data field.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const dataFieldTo = el.seriesGroups[0].series[0].dataFieldTo;
displayTextName to display for this serie.string
Name to display for this serie.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const displayText = el.seriesGroups[0].series[0].displayText;
displayTextCloseName to display for candlestick and ohlc series.string
Name to display for candlestick and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const displayTextClose = el.seriesGroups[0].series[0].displayTextClose;
displayTextHighName to display for candlestick and ohlc series.string
Name to display for candlestick and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const displayTextHigh = el.seriesGroups[0].series[0].displayTextHigh;
displayTextLowName to display for candlestick and ohlc series.string
Name to display for candlestick and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const displayTextLow = el.seriesGroups[0].series[0].displayTextLow;
displayTextOpenName to display for candlestick and ohlc series.string
Name to display for candlestick and ohlc series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const displayTextOpen = el.seriesGroups[0].series[0].displayTextOpen;
emptyPointsDisplayDetermines how to display value gaps in line series."connect" | "skip" | "zero"
Determines how to display value gaps in line series.
Default value
"skip"Read the nested value:
const el = document.querySelector('smart-chart');
const emptyPointsDisplay = el.seriesGroups[0].series[0].emptyPointsDisplay;
enableSelectionDetermines whether the serie is selectable.boolean
Determines whether the serie is selectable.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const enableSelection = el.seriesGroups[0].series[0].enableSelection;
enableSeriesToggleDetermines whether to toggle the series visibility after click on a legend's box.boolean
Determines whether to toggle the series visibility after click on a legend's box.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const enableSeriesToggle = el.seriesGroups[0].series[0].enableSeriesToggle;
endAngleMaximum angle in a pie, donut, polar and spider series.number
Maximum angle in a pie, donut, polar and spider series.
Default value
360Read the nested value:
const el = document.querySelector('smart-chart');
const endAngle = el.seriesGroups[0].series[0].endAngle;
fillColorFill color for the serie.string | null
Fill color for the serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColor = el.seriesGroups[0].series[0].fillColor;
fillColorAltAlternating fill color for the serie. Applicable to OHLC series only.string | null
Alternating fill color for the serie. Applicable to OHLC series only.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColorAlt = el.seriesGroups[0].series[0].fillColorAlt;
fillColorAltSelectedAlternating fill color for the serie when selected. Applicable to OHLC series only.string | null
Alternating fill color for the serie when selected. Applicable to OHLC series only.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColorAltSelected = el.seriesGroups[0].series[0].fillColorAltSelected;
fillColorSelectedFill color for the serie when selected.string | null
Fill color for the serie when selected.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColorSelected = el.seriesGroups[0].series[0].fillColorSelected;
fillColorSymbolFill color for the marker symbols in the serie.string | null
Fill color for the marker symbols in the serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColorSymbol = el.seriesGroups[0].series[0].fillColorSymbol;
fillColorSymbolSelectedFill color for the the marker symbols in serie when selected.string | null
Fill color for the the marker symbols in serie when selected.
Read the nested value:
const el = document.querySelector('smart-chart');
const fillColorSymbolSelected = el.seriesGroups[0].series[0].fillColorSymbolSelected;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].series[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].series[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].series[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].series[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].series[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;
greyScaleDetermines whether to display the serie in grey scale.boolean | null
Determines whether to display the serie in grey scale.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const greyScale = el.seriesGroups[0].series[0].greyScale;
hiddenPointsDisplayDetermines whether to hide slices of toggled points in pie and donut series.boolean
Determines whether to hide slices of toggled points in pie and donut series.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const hiddenPointsDisplay = el.seriesGroups[0].series[0].hiddenPointsDisplay;
initialAngleInitial angle in pie and donut series.number
Initial angle in pie and donut series.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const initialAngle = el.seriesGroups[0].series[0].initialAngle;
innerRadiusInner radius of donut series in pixels or percents.number
Inner radius of donut series in pixels or percents.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const innerRadius = el.seriesGroups[0].series[0].innerRadius;
labelRadiusDetermines the labels rotation radius when the Chart is 'pie' or 'donut'.number
Determines the labels rotation radius when the Chart is 'pie' or 'donut'.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const labelRadius = el.seriesGroups[0].series[0].labelRadius;
labelsObject describing the labels properties of the axis.
Click for more details. Property object's options:
object
Object describing the labels properties of the axis.
Default value
nullProperties
- 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.
- bottom:number - Bottom padding.
- left:number - Left padding.
- right:number - Right padding.
- top:number - Top padding.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.seriesGroups[0].series[0].labels;
angleText rotation angle.number
Text rotation angle.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].series[0].angle;
autoRotateboolean determining if auto rotation is enabled.boolean
boolean determining if auto rotation is enabled.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.seriesGroups[0].series[0].autoRotate;
backgroundColorLabels background color.string | null
Labels background color.
Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundColor = el.seriesGroups[0].series[0].backgroundColor;
backgroundOpacityLabels background opacity.number | null
Labels background opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundOpacity = el.seriesGroups[0].series[0].backgroundOpacity;
borderColorLabels border line color.string | null
Labels border line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const borderColor = el.seriesGroups[0].series[0].borderColor;
borderOpacityLabels border line opacity.number | null
Labels border line opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const borderOpacity = el.seriesGroups[0].series[0].borderOpacity;
classCSS class of the labels.string | null
CSS class of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].series[0].class;
customAn array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.[] | null
An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].series[0].custom;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].series[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].series[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].series[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].series[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].series[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].series[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].series[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].series[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].series[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentHorizontal labels alignment."left" | "center" | "right"
Horizontal labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].series[0].horizontalAlignment;
linesAnglesDetermines whether to use direct lines for the labels in pie/donut series.boolean
Determines whether to use direct lines for the labels in pie/donut series.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const linesAngles = el.seriesGroups[0].series[0].linesAngles;
linesEnabledDetermines whether to use lines for the labels in pie/donut series.boolean
Determines whether to use lines for the labels in pie/donut series.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const linesEnabled = el.seriesGroups[0].series[0].linesEnabled;
offsetLabels offset. object
Labels offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].series[0].offset;
xHorizontal offset.number
Horizontal offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].series[0].offset.x;
yVertical offset.number
Vertical offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].series[0].offset.y;
paddingObject describing the padding of the labels.
Click for more details. Property object's options:
object
Object describing the padding of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.seriesGroups[0].series[0].padding;
bottomBottom padding.number
Bottom padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].series[0].padding.bottom;
leftLeft padding.number
Left padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].series[0].padding.left;
rightRight padding.number
Right padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].series[0].padding.right;
topTop padding.number
Top padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].series[0].padding.top;
radiusRadius of the labels in pie/donut series.number | null
Radius of the labels in pie/donut series.
Read the nested value:
const el = document.querySelector('smart-chart');
const radius = el.seriesGroups[0].series[0].radius;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].series[0].rotationPoint;
stepInterval steps between label placements (multiples of the axis unit interval).number | null
Interval steps between label placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].series[0].step;
unitIntervalSets the interval between the labels.number
Sets the interval between the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].series[0].unitInterval;
verticalAlignmentVertical labels alignment."top" | "center" | "bottom"
Vertical labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].series[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].series[0].visible;
legendFillColorFill color of the legend box. The default value is inherited from the serie's color.string | null
Fill color of the legend box. The default value is inherited from the serie's color.
Read the nested value:
const el = document.querySelector('smart-chart');
const legendFillColor = el.seriesGroups[0].series[0].labels[0].legendFillColor;
legendFormatFunctionLegend data formatting function for the values in the serie.function | null
Legend data formatting function for the values in the serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const legendFormatFunction = el.seriesGroups[0].series[0].labels[0].legendFormatFunction;
legendFormatSettingsLegend data formatting settings for the values in the serie.
Click for more details. Property object's options:
object
Legend data formatting settings for the values in the serie.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const legendFormatSettings = el.seriesGroups[0].series[0].labels[0].legendFormatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].series[0].labels[0].legendFormatSettings[0].thousandsSeparator;
legendLineColorLine color of the legend box. The default value is inherited from the serie's color.string | null
Line color of the legend box. The default value is inherited from the serie's color.
Read the nested value:
const el = document.querySelector('smart-chart');
const legendLineColor = el.seriesGroups[0].series[0].labels[0].legendLineColor;
lineColorLine color for the serie.string | null
Line color for the serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].series[0].labels[0].lineColor;
lineColorSelectedLine color for the serie when selected.string | null
Line color for the serie when selected.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColorSelected = el.seriesGroups[0].series[0].labels[0].lineColorSelected;
lineColorSymbolLine color for the marker symbols in serie.string | null
Line color for the marker symbols in serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColorSymbol = el.seriesGroups[0].series[0].labels[0].lineColorSymbol;
lineColorSymbolSelectedLine color for the marker symbols in the serie when selected.string | null
Line color for the marker symbols in the serie when selected.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColorSymbolSelected = el.seriesGroups[0].series[0].labels[0].lineColorSymbolSelected;
lineDashStyleA string sequence of numbers represening line and space lengths, e.g. '2,2'.string | null
A string sequence of numbers represening line and space lengths, e.g. '2,2'.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineDashStyle = el.seriesGroups[0].series[0].labels[0].lineDashStyle;
linesUnselectModeDetermines 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const linesUnselectMode = el.seriesGroups[0].series[0].labels[0].linesUnselectMode;
lineWidthDetermines the line tickness of the items in this serie.string | null | number
Determines the line tickness of the items in this serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].series[0].labels[0].lineWidth;
lineWidthSelectedDetermines the line tickness of the items in this serie when selected.string | null | number
Determines the line tickness of the items in this serie when selected.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidthSelected = el.seriesGroups[0].series[0].labels[0].lineWidthSelected;
maxRadiusMax radius of bubble series in pixels or percents.string | null | number
Max radius of bubble series in pixels or percents.
Read the nested value:
const el = document.querySelector('smart-chart');
const maxRadius = el.seriesGroups[0].series[0].labels[0].maxRadius;
minRadiusMin radius of bubble series in pixels or percents.string | null | number
Min radius of bubble series in pixels or percents.
Read the nested value:
const el = document.querySelector('smart-chart');
const minRadius = el.seriesGroups[0].series[0].labels[0].minRadius;
opacityDetermines the opacity of the items in this serie.number
Determines the opacity of the items in this serie.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.seriesGroups[0].series[0].labels[0].opacity;
radiusOuter radius of pie and donut series in pixels or percents.number | null
Outer radius of pie and donut series in pixels or percents.
Read the nested value:
const el = document.querySelector('smart-chart');
const radius = el.seriesGroups[0].series[0].labels[0].radius;
radiusDataFieldData field used in bubble series.string
Data field used in bubble series.
Default value
"null"Read the nested value:
const el = document.querySelector('smart-chart');
const radiusDataField = el.seriesGroups[0].series[0].labels[0].radiusDataField;
selectedRadiusChangeRadius change on selection of pie and donut series in pixels or percents.number | null
Radius change on selection of pie and donut series in pixels or percents.
Read the nested value:
const el = document.querySelector('smart-chart');
const selectedRadiusChange = el.seriesGroups[0].series[0].labels[0].selectedRadiusChange;
startAngleMinimum angle in a pie, donut, polar and spider series.number
Minimum angle in a pie, donut, polar and spider series.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const startAngle = el.seriesGroups[0].series[0].labels[0].startAngle;
summarySpecifies the summary of the series group.string
Specifies the summary of the series group.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const summary = el.seriesGroups[0].series[0].labels[0].summary;
symbolSizeDetermines the size of the symbol element.number
Determines the size of the symbol element.
Read the nested value:
const el = document.querySelector('smart-chart');
const symbolSize = el.seriesGroups[0].series[0].labels[0].symbolSize;
symbolSizeSelectedDetermines the size of the symbol element. This property is applicable to line and area series only.number
Determines the size of the symbol element. This property is applicable to line and area series only.
Read the nested value:
const el = document.querySelector('smart-chart');
const symbolSizeSelected = el.seriesGroups[0].series[0].labels[0].symbolSizeSelected;
symbolTypeDetermines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only."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"Read the nested value:
const el = document.querySelector('smart-chart');
const symbolType = el.seriesGroups[0].series[0].labels[0].symbolType;
toolTipBackgroundDetermines the tooltip's background.string | null
Determines the tooltip's background.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipBackground = el.seriesGroups[0].series[0].labels[0].toolTipBackground;
toolTipClassDetermines the tooltip's CSS class name.string | null
Determines the tooltip's CSS class name.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipClass = el.seriesGroups[0].series[0].labels[0].toolTipClass;
toolTipFormatFunctionTooltip data formatting function for the values in the serie.{(value?: any, index?: number, series?: any): string}
Tooltip data formatting function for the values in the serie.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatFunction = el.seriesGroups[0].series[0].labels[0].toolTipFormatFunction;
toolTipFormatSettingsTooltip data formatting settings for the values in the serie.
Click for more details. Property object's options:
object
Tooltip data formatting settings for the values in the serie.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatSettings = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].series[0].labels[0].toolTipFormatSettings[0].thousandsSeparator;
toolTipLineColorDetermines the tooltip's border lines color.string | null
Determines the tooltip's border lines color.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipLineColor = el.seriesGroups[0].series[0].labels[0].toolTipLineColor;
useGradientColorsDetermines whether to use color gradients.boolean
Determines whether to use color gradients.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const useGradientColors = el.seriesGroups[0].series[0].labels[0].useGradientColors;
seriesGapPercentPercentage gap between columns belonging to different series.number
Percentage gap between columns belonging to different series.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const seriesGapPercent = el.seriesGroups[0].seriesGapPercent;
showLabelsWhen showLabels is set to true, the chart will render pie labels.boolean
When showLabels is set to true, the chart will render pie labels.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const showLabels = el.seriesGroups[0].showLabels;
skipOverlappingPointsDetermines whether to display overlapping data points in column, ohlc and candlestick series.boolean
Determines whether to display overlapping data points in column, ohlc and candlestick series.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const skipOverlappingPoints = el.seriesGroups[0].skipOverlappingPoints;
spiderWhen spider is set to true, the chart will render in polar coordinates.boolean
When spider is set to true, the chart will render in polar coordinates.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const spider = el.seriesGroups[0].spider;
startAngleThe start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.number
The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const startAngle = el.seriesGroups[0].startAngle;
summarySpecifies the summary of the series group.string
Specifies the summary of the series group.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const summary = el.seriesGroups[0].summary;
toolTipFormatFunctionSets the tooltip format function. The function is used to format the tooltips of the Chart serie{(value?: any, index?: number, series?: any): string}
Sets the tooltip format function. The function is used to format the tooltips of the Chart serie
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatFunction = el.seriesGroups[0].toolTipFormatFunction;
toolTipFormatSettingsObject describing the format settings of series tooltips.
Click for more details. Property object's options:
object
Object describing the format settings of series tooltips.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatSettings = el.seriesGroups[0].toolTipFormatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].toolTipFormatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].toolTipFormatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].toolTipFormatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].toolTipFormatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].toolTipFormatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].toolTipFormatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].toolTipFormatSettings[0].thousandsSeparator;
typeSets 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"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
columnRead the nested value:
const el = document.querySelector('smart-chart');
const type = el.seriesGroups[0].type;
useGradientColorsDetermines whether to use color gradients.boolean
Determines whether to use color gradients.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const useGradientColors = el.seriesGroups[0].useGradientColors;
valueAxisObject describing the valueAxis for this group. smartChart allows you to use a common valueAxis and/or multiple value axes per serie group.
Click for more details. Property object's options:
object
Object describing the valueAxis for this group. smartChart allows you to use a common valueAxis and/or multiple value axes per serie group.
Properties
- 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 | number - 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.
- 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.
- 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:string | number | null - Line width (in pixels) of the grid lines.
- size:string | number | null - Size (in pixels) of the tick marks.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Read the nested value:
const el = document.querySelector('smart-chart');
const valueAxis = el.seriesGroups[0].valueAxis;
alternatingBackgroundColorAlternating background color between grid lines.string
Alternating background color between grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.seriesGroups[0].valueAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Second alternating background color.string
Second alternating background color.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.seriesGroups[0].valueAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacityOpacity of the alternating background.number
Opacity of the alternating background.
Default value
1Back to root property: seriesGroups
Try a demo showcasing the alternatingBackgroundOpacity property.Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.seriesGroups[0].valueAxis[0].alternatingBackgroundOpacity;
axisSizeSets the size of the axis.number | string | null
Sets the size of the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.seriesGroups[0].valueAxis[0].axisSize;
bandsOptional color bands dislayed in the chart's plot area.
Click for more details. Property object's options:
[]
Optional color bands dislayed in the chart's plot area.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.seriesGroups[0].valueAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].valueAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].valueAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].valueAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null | number
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].valueAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].valueAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].valueAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.seriesGroups[0].valueAxis[0].bands[0].opacity;
baselineValueSets the baseline value for the axis.any
Sets the baseline value for the axis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const baselineValue = el.seriesGroups[0].valueAxis[0].baselineValue;
customDrawboolean determining whether to draw the axis or the user will use APIs to draw it.boolean
boolean determining whether to draw the axis or the user will use APIs to draw it.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.seriesGroups[0].valueAxis[0].customDraw;
descriptionSets the description of the value axis.string
Sets the description of the value axis.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const description = el.seriesGroups[0].valueAxis[0].description;
displayValueAxisSpecifies whether the values axis is displayed.boolean
Specifies whether the values axis is displayed.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const displayValueAxis = el.seriesGroups[0].valueAxis[0].displayValueAxis;
flipSpecifies whether the values are displayed in reverse order.boolean
Specifies whether the values are displayed in reverse order.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.seriesGroups[0].valueAxis[0].flip;
formatFunctionCustom function to format the displayed values along the axis.{(value?: any, index?: number, series?: any): string}
Custom function to format the displayed values along the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].valueAxis[0].formatFunction;
formatSettingsSettings used to format the displayed values along the axis.
Click for more details. Property object's options:
object
Settings used to format the displayed values along the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].valueAxis[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].valueAxis[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].valueAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].valueAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].valueAxis[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].valueAxis[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].valueAxis[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].valueAxis[0].formatSettings[0].thousandsSeparator;
gridLinesObject describing the grid lines properties of the valueAxis.
Click for more details. Property object's options:
object
Object describing the grid lines properties of the valueAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.seriesGroups[0].valueAxis[0].gridLines;
colorColor of the grid lines.string
Color of the grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].valueAxis[0].gridLines[0].color;
customAn array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.[] | null
An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].valueAxis[0].gridLines[0].custom;
dashStyleGrid lines dash style, e.g. '2,2'.string
Grid lines dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].valueAxis[0].gridLines[0].dashStyle;
lineWidthLine width (in pixels) of the grid lines.string | number | null
Line width (in pixels) of the grid lines.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].valueAxis[0].gridLines[0].lineWidth;
sizeSize (in pixels) of the tick marks.string | number | null
Size (in pixels) of the tick marks.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.seriesGroups[0].valueAxis[0].gridLines[0].size;
stepInterval steps between grid line placements (multiples of the axis unit interval).number | null
Interval steps between grid line placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].valueAxis[0].gridLines[0].step;
unitIntervalSets the interval between the grid lines.number
Sets the interval between the grid lines.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].valueAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].gridLines[0].visible;
labelsObject describing the labels properties of the axis.
Click for more details. Property object's options:
object
Object describing the labels properties of the axis.
Properties
- 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.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.seriesGroups[0].valueAxis[0].labels;
angleText rotation angle.number
Text rotation angle.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].valueAxis[0].labels[0].angle;
autoRotateboolean determining if auto rotation is enabled. Applicable to polar and spider charts only.boolean
boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.seriesGroups[0].valueAxis[0].labels[0].autoRotate;
classCSS class of the labels.string | null
CSS class of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].valueAxis[0].labels[0].class;
customAn array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.[] | null
An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].valueAxis[0].labels[0].custom;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].valueAxis[0].labels[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentHorizontal labels alignment."left" | "center" | "right"
Horizontal labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].valueAxis[0].labels[0].horizontalAlignment;
offsetLabels offset. object
Labels offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].valueAxis[0].labels[0].offset;
xHorizontal offset.number
Horizontal offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].valueAxis[0].labels[0].offset.x;
yVertical offset.number
Vertical offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].valueAxis[0].labels[0].offset.y;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].valueAxis[0].labels[0].rotationPoint;
stepInterval steps between label placements (multiples of the axis unit interval).number | null
Interval steps between label placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].valueAxis[0].labels[0].step;
unitIntervalSets the interval between the labels.number
Sets the interval between the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].valueAxis[0].labels[0].unitInterval;
verticalAlignmentVertical labels alignment."top" | "center" | "bottom"
Vertical labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].valueAxis[0].labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].labels[0].visible;
lineObject describing the line properties of the axis.
Click for more details. Property object's options:
object
Object describing the line properties of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.seriesGroups[0].valueAxis[0].line;
colorColor of axis line.string
Color of axis line.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].valueAxis[0].line.color;
dashStyleLine dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.string
Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].valueAxis[0].line.dashStyle;
lineWidthLine width. The default is inherited from gridLines.lineWidth.number
Line width. The default is inherited from gridLines.lineWidth.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].valueAxis[0].line.lineWidth;
visibleboolean determining the visibility of the axis line.boolean
boolean determining the visibility of the axis line.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].line.visible;
logarithmicScaleDetermines whether to use logarithmic scale.boolean
Determines whether to use logarithmic scale.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.seriesGroups[0].valueAxis[0].logarithmicScale;
logarithmicScaleBaseBase for logarithmic scale.number
Base for logarithmic scale.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.seriesGroups[0].valueAxis[0].logarithmicScaleBase;
maxValueSets the maximum value of the valueAxis.any
Sets the maximum value of the valueAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].valueAxis[0].maxValue;
minValueSets the minimum value of the valueAxis.any
Sets the minimum value of the valueAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].valueAxis[0].minValue;
paddingObject describing the padding of the axis.
Click for more details. Property object's options:
object
Object describing the padding of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.seriesGroups[0].valueAxis[0].padding;
bottomBottom padding. Available for horizontal valueAxis.number
Bottom padding. Available for horizontal valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].valueAxis[0].padding.bottom;
leftLeft padding. Available for vertical valueAxis.number
Left padding. Available for vertical valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].valueAxis[0].padding.left;
rightRight padding. Available for vertical valueAxis.number
Right padding. Available for vertical valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].valueAxis[0].padding.right;
topTop padding. Available for horizontal valueAxis.number
Top padding. Available for horizontal valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].valueAxis[0].padding.top;
positionSets 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.seriesGroups[0].valueAxis[0].position;
textRotationAngleText rotation angle.number | null
Text rotation angle.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.seriesGroups[0].valueAxis[0].textRotationAngle;
textRotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.seriesGroups[0].valueAxis[0].textRotationPoint;
tickMarksObject describing the tick marks properties of the valueAxis.
Click for more details. Property object's options:
object
Object describing the tick marks properties of the valueAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.seriesGroups[0].valueAxis[0].tickMarks;
colorColor of the tick marks.string
Color of the tick marks.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].valueAxis[0].tickMarks[0].color;
customAn array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.[] | null
An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].valueAxis[0].tickMarks[0].custom;
dashStyleTick marks dash style, e.g. '2,2'.string
Tick marks dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].valueAxis[0].tickMarks[0].dashStyle;
lineWidthLine width (in pixels) of the tick marks.number
Line width (in pixels) of the tick marks.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].valueAxis[0].tickMarks[0].lineWidth;
sizeSize (in pixels) of the tick marks.number
Size (in pixels) of the tick marks.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.seriesGroups[0].valueAxis[0].tickMarks[0].size;
stepInterval steps between tick mark placements (multiples of the axis unit interval).number | null
Interval steps between tick mark placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].valueAxis[0].tickMarks[0].step;
unitIntervalSets the interval between tick marks.number
Sets the interval between tick marks.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].valueAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].tickMarks[0].visible;
tickMarksColorColor of tick marks.string
Color of tick marks.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarksColor = el.seriesGroups[0].valueAxis[0].tickMarksColor;
titleObject describing the title of the valueAxis.
Click for more details. Property object's options:
object
Object describing the title of the valueAxis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.seriesGroups[0].valueAxis[0].title;
classCSS class of the title text.string | null
CSS class of the title text.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].valueAxis[0].title.class;
horizontalAlignmentHorizontal alignment."left" | "center" | "right"
Horizontal alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].valueAxis[0].title.horizontalAlignment;
textText of the title.string
Text of the title.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.seriesGroups[0].valueAxis[0].title.text;
verticalAlignmentVertical alignment."top" | "center" | "bottom"
Vertical alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].valueAxis[0].title.verticalAlignment;
visibleboolean determining the visibility of the title.boolean
boolean determining the visibility of the title.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].title.visible;
typeValue Axis Typestring
Value Axis Type
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.seriesGroups[0].valueAxis[0].type;
unitIntervalSets the interval between the units.number | null
Sets the interval between the units.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].valueAxis[0].unitInterval;
valuesOnTicksSpecifies whether the axis values will be aligned with the tick marks.boolean
Specifies whether the axis values will be aligned with the tick marks.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.seriesGroups[0].valueAxis[0].valuesOnTicks;
visibleShows or hides the valueAxis.boolean
Shows or hides the valueAxis.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].valueAxis[0].visible;
xAxisObject describing the xAxis for this group.
Click for more details. Property object's options:
object
Object describing the xAxis for this group.
Properties
- 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 | number - 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.
- 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.
- 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:string | number | null - 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.
- 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.
- color:string - Color of axis line.
- dashStyle:string - Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
- lineWidth:string | number | null - Line width. The default is inherited from gridLines.lineWidth.
- visible:boolean - boolean determining the visibility of the axis line.
- 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.
- 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.
- gridLines:object - 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.
- formatSettings:any - Chart Format Settings
- 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.
- 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.
- 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.
- 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.
Read the nested value:
const el = document.querySelector('smart-chart');
const xAxis = el.seriesGroups[0].xAxis;
alternatingBackgroundColorAlternating background color between grid lines.string
Alternating background color between grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.seriesGroups[0].xAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Second alternating background color.string
Second alternating background color.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.seriesGroups[0].xAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacityOpacity of the alternating background.number
Opacity of the alternating background.
Default value
1Back to root property: seriesGroups
Try a demo showcasing the alternatingBackgroundOpacity property.Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.seriesGroups[0].xAxis[0].alternatingBackgroundOpacity;
axisSizeSets the size of the xAxis.number | string | null
Sets the size of the xAxis.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.seriesGroups[0].xAxis[0].axisSize;
bandsOptional color bands dislayed in the chart's plot area.
Click for more details. Property object's options:
[]
Optional color bands dislayed in the chart's plot area.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.seriesGroups[0].xAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].xAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null | number
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].xAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].xAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.seriesGroups[0].xAxis[0].bands[0].opacity;
baseUnitThe base unit when used with 'date' axis.null | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
The base unit when used with 'date' axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const baseUnit = el.seriesGroups[0].xAxis[0].baseUnit;
customDrawboolean determining whether to draw the axis or the user will use APIs to draw it.boolean
boolean determining whether to draw the axis or the user will use APIs to draw it.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.seriesGroups[0].xAxis[0].customDraw;
dataFieldPoints to a data field in the data source.string
Points to a data field in the data source.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dataField = el.seriesGroups[0].xAxis[0].dataField;
dateFormatOptional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.string | null
Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].dateFormat;
displayTextOptional custom xAxis display text.string | null
Optional custom xAxis display text.
Read the nested value:
const el = document.querySelector('smart-chart');
const displayText = el.seriesGroups[0].xAxis[0].displayText;
flipSpecifies whether the values are displayed in reverse order.boolean
Specifies whether the values are displayed in reverse order.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.seriesGroups[0].xAxis[0].flip;
formatFunctionCustom function to format the displayed values along the axis.{(value?: any, index?: number, series?: any): string}
Custom function to format the displayed values along the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].formatFunction;
formatSettingsSettings used to format the displayed values along the axis.
Click for more details. Property object's options:
object
Settings used to format the displayed values along the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].formatSettings[0].thousandsSeparator;
gridLinesObject describing the grid lines properties of the xAxis.
Click for more details. Property object's options:
object
Object describing the grid lines properties of the xAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.seriesGroups[0].xAxis[0].gridLines;
colorColor of the grid lines.string
Color of the grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].gridLines[0].color;
customAn array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.[] | null
An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].gridLines[0].custom;
dashStyleGrid lines dash style, e.g. '2,2'.string
Grid lines dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].gridLines[0].dashStyle;
lineWidthLine width (in pixels) of the grid lines.string | number | null
Line width (in pixels) of the grid lines.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].gridLines[0].lineWidth;
stepInterval steps between grid line placements (multiples of the axis unit interval).number | null
Interval steps between grid line placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].gridLines[0].step;
unitIntervalSets the interval between the grid lines.number
Sets the interval between the grid lines.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].gridLines[0].visible;
labelsObject describing the labels properties of the axis.
Click for more details. Property object's options:
object
Object describing the labels properties of the axis.
Properties
- 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.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.seriesGroups[0].xAxis[0].labels;
angleText rotation angle.number
Text rotation angle.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].xAxis[0].labels[0].angle;
autoRotateboolean determining if auto rotation is enabled. Applicable to polar and spider charts only.boolean
boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.seriesGroups[0].xAxis[0].labels[0].autoRotate;
classCSS class of the labels.string | null
CSS class of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].xAxis[0].labels[0].class;
customAn array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.[] | null
An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].labels[0].custom;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].labels[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].labels[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentHorizontal labels alignment."left" | "center" | "right"
Horizontal labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].xAxis[0].labels[0].horizontalAlignment;
offsetLabels offset. object
Labels offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].xAxis[0].labels[0].offset;
xHorizontal offset.number
Horizontal offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].xAxis[0].labels[0].offset.x;
yVertical offset.number
Vertical offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].xAxis[0].labels[0].offset.y;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].xAxis[0].labels[0].rotationPoint;
stepInterval steps between label placements (multiples of the axis unit interval).number | null
Interval steps between label placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].labels[0].step;
unitIntervalSets the interval between the labels.number
Sets the interval between the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].labels[0].unitInterval;
verticalAlignmentVertical labels alignment."top" | "center" | "bottom"
Vertical labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].xAxis[0].labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].labels[0].visible;
lineObject describing the line properties of the axis.
Click for more details. Property object's options:
object
Object describing the line properties of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.seriesGroups[0].xAxis[0].line;
colorColor of axis line.string
Color of axis line.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].line.color;
dashStyleLine dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.string
Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].line.dashStyle;
lineWidthLine width. The default is inherited from gridLines.lineWidth.string | number | null
Line width. The default is inherited from gridLines.lineWidth.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].line.lineWidth;
visibleboolean determining the visibility of the axis line.boolean
boolean determining the visibility of the axis line.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].line.visible;
logarithmicScaleDetermines whether to use logarithmic scale.boolean
Determines whether to use logarithmic scale.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.seriesGroups[0].xAxis[0].logarithmicScale;
logarithmicScaleBaseBase for logarithmic scale.number
Base for logarithmic scale.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.seriesGroups[0].xAxis[0].logarithmicScaleBase;
maxValueSets the maximum value of the xAxis.any
Sets the maximum value of the xAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].xAxis[0].maxValue;
minValueSets the minimum value of the xAxis.any
Sets the minimum value of the xAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].xAxis[0].minValue;
paddingObject describing the padding of the axis.
Click for more details. Property object's options:
object
Object describing the padding of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.seriesGroups[0].xAxis[0].padding;
bottomBottom padding. Available for horizontal xAxis.number
Bottom padding. Available for horizontal xAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].xAxis[0].padding.bottom;
leftLeft padding. Available for vertical xAxis.number
Left padding. Available for vertical xAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].xAxis[0].padding.left;
rightRight padding. Available for vertical xAxis.number
Right padding. Available for vertical xAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].xAxis[0].padding.right;
topTop padding. Available for horizontal xAxis.number
Top padding. Available for horizontal xAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].xAxis[0].padding.top;
positionSets 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.seriesGroups[0].xAxis[0].position;
rangeSelectorDefinition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
Click for more details. Property object's options:
object
Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
Properties
- 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.
- 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.
- bottom:number - Bottom padding.
- left:number - Left padding.
- right:number - Right padding.
- top:number - Top padding.
(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.
- bottom:number - Bottom padding.
- left:number - Left padding.
- right:number - Right padding.
- top:number - Top padding.
- 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.
- 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.
- textRotationPoint:string - Position to rotate the text around.
- type:string - Value Axis Type
- 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.
Read the nested value:
const el = document.querySelector('smart-chart');
const rangeSelector = el.seriesGroups[0].xAxis[0].rangeSelector;
backgroundColorSets the range selector chart's background color.string | null
Sets the range selector chart's background color.
Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundColor = el.seriesGroups[0].xAxis[0].rangeSelector.backgroundColor;
backgroundImageSets the range selector chart's background image.string
Sets the range selector chart's background image.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundImage = el.seriesGroups[0].xAxis[0].rangeSelector.backgroundImage;
baseUnitThe base unit when used with 'date' axis.null | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
The base unit when used with 'date' axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const baseUnit = el.seriesGroups[0].xAxis[0].rangeSelector.baseUnit;
borderLineColorSets the range selector chart's border color.string | null
Sets the range selector chart's border color.
Read the nested value:
const el = document.querySelector('smart-chart');
const borderLineColor = el.seriesGroups[0].xAxis[0].rangeSelector.borderLineColor;
borderLineWidthSets the range selector chart's border line width.number | null
Sets the range selector chart's border line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const borderLineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.borderLineWidth;
captionSets the caption (title) of the range selector chart.string
Sets the caption (title) of the range selector chart.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const caption = el.seriesGroups[0].xAxis[0].rangeSelector.caption;
colorSchemeSets the range selector chart's color pallete. smartChart suppports 32 color schemes from 'scheme01' to 'scheme32'."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
scheme01Read the nested value:
const el = document.querySelector('smart-chart');
const colorScheme = el.seriesGroups[0].xAxis[0].rangeSelector.colorScheme;
columnSeriesOverlapEnables or disables overlapping of the column series.boolean
Enables or disables overlapping of the column series.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const columnSeriesOverlap = el.seriesGroups[0].xAxis[0].rangeSelector.columnSeriesOverlap;
columnsGapPercentPercentage gap between columns within the same serie.number
Percentage gap between columns within the same serie.
Default value
25Read the nested value:
const el = document.querySelector('smart-chart');
const columnsGapPercent = el.seriesGroups[0].xAxis[0].rangeSelector.columnsGapPercent;
dataFieldPoints to a data field in the data source.string | null
Points to a data field in the data source.
Read the nested value:
const el = document.querySelector('smart-chart');
const dataField = el.seriesGroups[0].xAxis[0].rangeSelector.dataField;
descriptionSets the description text of the range selector chart.string
Sets the description text of the range selector chart.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const description = el.seriesGroups[0].xAxis[0].rangeSelector.description;
formatFunctionCallback function used to format the values.{(value?: any, index?: number, series?: any): string}
Callback function used to format the values.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].rangeSelector.formatFunction;
formatSettingsChart Format Settingsany
Chart Format Settings
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].rangeSelector.formatSettings;
greyScaleDetermines whether to display the range selector chart using greyscale colors.boolean | null
Determines whether to display the range selector chart using greyscale colors.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const greyScale = el.seriesGroups[0].xAxis[0].rangeSelector.greyScale;
gridLinesObject describing the grid lines properties of the range selector chart's xAxis.
Click for more details. Property object's options:
object
Object describing the grid lines properties of the range selector chart's xAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines;
colorColor of the grid lines.string
Color of the grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].color;
customAn array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.[] | null
An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].custom;
dashStyleGrid lines dash style, e.g. '2,2'.string
Grid lines dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].dashStyle;
lineWidthLine width (in pixels) of the grid lines.number
Line width (in pixels) of the grid lines.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].lineWidth;
stepInterval steps between grid line placements (multiples of the axis unit interval).number | null
Interval steps between grid line placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].step;
unitIntervalSets the interval between the grid lines.number
Sets the interval between the grid lines.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.gridLines[0].visible;
labelsObject describing the labels properties of the axis.
Click for more details. Property object's options:
object
Object describing the labels properties of the axis.
Properties
- 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.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.seriesGroups[0].xAxis[0].rangeSelector.labels;
angleText rotation angle.number
Text rotation angle.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].angle;
autoRotateboolean determining if auto rotation is enabled. Applicable to polar and spider charts only.boolean
boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].autoRotate;
classCSS class of the labels.string | null
CSS class of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].class;
customAn array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.[] | null
An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].custom;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentHorizontal labels alignment."left" | "center" | "right"
Horizontal labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].horizontalAlignment;
offsetLabels offset. object
Labels offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset;
xHorizontal offset.number
Horizontal offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.x;
yVertical offset.number
Vertical offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].offset.y;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].rotationPoint;
stepInterval steps between label placements (multiples of the axis unit interval).number | null
Interval steps between label placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].step;
unitIntervalSets the interval between the labels.number
Sets the interval between the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].unitInterval;
verticalAlignmentVertical labels alignment."top" | "center" | "bottom"
Vertical labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.labels[0].visible;
maxValueSets the maximum value of the range selector chart's xAxis.any
Sets the maximum value of the range selector chart's xAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].xAxis[0].rangeSelector.maxValue;
minValueSets the minimum value of the range selector chart's xAxis.any
Sets the minimum value of the range selector chart's xAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].xAxis[0].rangeSelector.minValue;
paddingObject describing the padding of the range selector chart.
Click for more details. Property object's options:
object
Object describing the padding of the range selector chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.seriesGroups[0].xAxis[0].rangeSelector.padding;
bottomBottom padding.number
Bottom padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].xAxis[0].rangeSelector.padding.bottom;
leftLeft padding.number
Left padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].xAxis[0].rangeSelector.padding.left;
rightRight padding.number
Right padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].xAxis[0].rangeSelector.padding.right;
topTop padding.number
Top padding.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].xAxis[0].rangeSelector.padding.top;
positionSets the range selector chart position."bottom" | "top" | "left" | "right"
Sets the range selector chart position.
Default value
leftRead the nested value:
const el = document.querySelector('smart-chart');
const position = el.seriesGroups[0].xAxis[0].rangeSelector.position;
renderToAn HTML element outside the chart to render the range selector chart to.HTMLElement | null
An HTML element outside the chart to render the range selector chart to.
Read the nested value:
const el = document.querySelector('smart-chart');
const renderTo = el.seriesGroups[0].xAxis[0].rangeSelector.renderTo;
rightToLeftSets or gets a value indicating whether the range selector chart's layout is mirrored.boolean | null
Sets or gets a value indicating whether the range selector chart's layout is mirrored.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const rightToLeft = el.seriesGroups[0].xAxis[0].rangeSelector.rightToLeft;
seriesGapPercentPercentage gap between columns belonging to different series.number
Percentage gap between columns belonging to different series.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const seriesGapPercent = el.seriesGroups[0].xAxis[0].rangeSelector.seriesGapPercent;
seriesGroups(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.
[] | 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.
Read the nested value:
const el = document.querySelector('smart-chart');
const seriesGroups = el.seriesGroups[0].xAxis[0].rangeSelector.seriesGroups;
serieTypeSets 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"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
areaRead the nested value:
const el = document.querySelector('smart-chart');
const serieType = el.seriesGroups[0].xAxis[0].rangeSelector.serieType;
showBorderLineDetermines whether to display the range selector chart's border line.boolean | null
Determines whether to display the range selector chart's border line.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const showBorderLine = el.seriesGroups[0].xAxis[0].rangeSelector.showBorderLine;
sizeSets the size of the range selector chart.number | null
Sets the size of the range selector chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.seriesGroups[0].xAxis[0].rangeSelector.size;
skipOverlappingPointsDetermines whether to display overlapping data points in column, ohlc and candlestick series.boolean
Determines whether to display overlapping data points in column, ohlc and candlestick series.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const skipOverlappingPoints = el.seriesGroups[0].xAxis[0].rangeSelector.skipOverlappingPoints;
titlePaddingSets the padding of the chart's title (caption).
Click for more details. Property object's options:
object
Sets the padding of the chart's title (caption).
Read the nested value:
const el = document.querySelector('smart-chart');
const titlePadding = el.seriesGroups[0].xAxis[0].rangeSelector.titlePadding;
bottomBottom padding.number
Bottom padding.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.bottom;
leftLeft padding.number
Left padding.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.left;
rightRight padding.number
Right padding.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.right;
topTop padding.number
Top padding.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].xAxis[0].rangeSelector.titlePadding.top;
unitIntervalSets the interval between the units.number | null
Sets the interval between the units.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.unitInterval;
valueAxisAn object with settings about the range selector Chart's y-axis (value axis).
Click for more details. Property object's options:
object
An object with settings about the range selector Chart's y-axis (value axis).
Properties
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Read the nested value:
const el = document.querySelector('smart-chart');
const valueAxis = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis;
alternatingBackgroundColorAlternating background color between grid lines.string
Alternating background color between grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Second alternating background color.string
Second alternating background color.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacityOpacity of the alternating background.number
Opacity of the alternating background.
Default value
1Back to root property: seriesGroups
Try a demo showcasing the alternatingBackgroundOpacity property.Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;
axisSizeSets the size of the axis.number | string | null
Sets the size of the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].axisSize;
bandsOptional color bands dislayed in the chart's plot area.
Click for more details. Property object's options:
[]
Optional color bands dislayed in the chart's plot area.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;
baselineValueSets the baseline value for the axis.any
Sets the baseline value for the axis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const baselineValue = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].baselineValue;
customDrawboolean determining whether to draw the axis or the user will use APIs to draw it.boolean
boolean determining whether to draw the axis or the user will use APIs to draw it.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].customDraw;
displayValueAxisSpecifies whether the values axis is displayed.boolean
Specifies whether the values axis is displayed.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const displayValueAxis = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;
flipSpecifies whether the values are displayed in reverse order.boolean
Specifies whether the values are displayed in reverse order.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].flip;
formatFunctionCustom function to format the displayed values along the axis.{(value?: any, index?: number, series?: any): string}
Custom function to format the displayed values along the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatFunction;
formatSettingsSettings used to format the displayed values along the axis.
Click for more details. Property object's options:
object
Settings used to format the displayed values along the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;
gridLinesObject describing the grid lines properties of the valueAxis.
Click for more details. Property object's options:
object
Object describing the grid lines properties of the valueAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines;
colorColor of the grid lines.string
Color of the grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;
customAn array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.[] | null
An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;
dashStyleGrid lines dash style, e.g. '2,2'.string
Grid lines dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;
lineWidthLine width (in pixels) of the grid lines.number
Line width (in pixels) of the grid lines.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;
stepInterval steps between grid line placements (multiples of the axis unit interval).number | null
Interval steps between grid line placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;
unitIntervalSets the interval between the grid lines.number
Sets the interval between the grid lines.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;
labelsObject describing the labels properties of the axis.
Click for more details. Property object's options:
object
Object describing the labels properties of the axis.
Properties
- 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.
Possible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels;
angleText rotation angle.number
Text rotation angle.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;
autoRotateboolean determining if auto rotation is enabled. Applicable to polar and spider charts only.boolean
boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;
classCSS class of the labels.string | null
CSS class of the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].class;
customAn array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.[] | null
An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;
formatFunctionCallback function used to format the labels.{(value?: any, index?: number, series?: any): string}
Callback function used to format the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;
formatSettingsObject describing the format settings of the labels.
Click for more details. Property object's options:
object
Object describing the format settings of the labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentHorizontal labels alignment."left" | "center" | "right"
Horizontal labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;
offsetLabels offset. object
Labels offset.
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;
xHorizontal offset.number
Horizontal offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;
yVertical offset.number
Vertical offset.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;
rotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;
stepInterval steps between label placements (multiples of the axis unit interval).number | null
Interval steps between label placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].step;
unitIntervalSets the interval between the labels.number
Sets the interval between the labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;
verticalAlignmentVertical labels alignment."top" | "center" | "bottom"
Vertical labels alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;
lineObject describing the line properties of the axis.
Click for more details. Property object's options:
object
Object describing the line properties of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line;
colorColor of axis line.string
Color of axis line.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.color;
dashStyleLine dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.string
Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;
lineWidthLine width. The default is inherited from gridLines.lineWidth.number
Line width. The default is inherited from gridLines.lineWidth.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;
visibleboolean determining the visibility of the axis line.boolean
boolean determining the visibility of the axis line.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].line.visible;
logarithmicScaleDetermines whether to use logarithmic scale.boolean
Determines whether to use logarithmic scale.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;
logarithmicScaleBaseBase for logarithmic scale.number
Base for logarithmic scale.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;
maxValueSets the maximum value of the valueAxis.any
Sets the maximum value of the valueAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].maxValue;
minValueSets the minimum value of the valueAxis.any
Sets the minimum value of the valueAxis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].minValue;
paddingObject describing the padding of the axis.
Click for more details. Property object's options:
object
Object describing the padding of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding;
bottomBottom padding. Available for horizontal valueAxis.number
Bottom padding. Available for horizontal valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.bottom;
leftLeft padding. Available for vertical valueAxis.number
Left padding. Available for vertical valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.left;
rightRight padding. Available for vertical valueAxis.number
Right padding. Available for vertical valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.right;
topTop padding. Available for horizontal valueAxis.number
Top padding. Available for horizontal valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].padding.top;
positionSets 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].position;
textRotationAngleText rotation angle.number | null
Text rotation angle.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;
textRotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;
tickMarksObject describing the tick marks properties of the valueAxis.
Click for more details. Property object's options:
object
Object describing the tick marks properties of the valueAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks;
colorColor of the tick marks.string
Color of the tick marks.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;
customAn array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.[] | null
An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;
dashStyleTick marks dash style, e.g. '2,2'.string
Tick marks dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;
lineWidthLine width (in pixels) of the tick marks.number
Line width (in pixels) of the tick marks.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;
sizeSize (in pixels) of the tick marks.number
Size (in pixels) of the tick marks.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;
stepInterval steps between tick mark placements (multiples of the axis unit interval).number | null
Interval steps between tick mark placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;
unitIntervalSets the interval between tick marks.number
Sets the interval between tick marks.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;
titleObject describing the title of the valueAxis.
Click for more details. Property object's options:
object
Object describing the title of the valueAxis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title;
classCSS class of the title text.string | null
CSS class of the title text.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.class;
horizontalAlignmentHorizontal alignment."left" | "center" | "right"
Horizontal alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;
textText of the title.string
Text of the title.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.text;
verticalAlignmentVertical alignment."top" | "center" | "bottom"
Vertical alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;
visibleboolean determining the visibility of the title.boolean
boolean determining the visibility of the title.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].title.visible;
typeValue Axis Typestring
Value Axis Type
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].type;
unitIntervalSets the interval between the units.number | null
Sets the interval between the units.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].unitInterval;
valuesOnTicksSpecifies whether the axis values will be aligned with the tick marks.boolean
Specifies whether the axis values will be aligned with the tick marks.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;
visibleShows or hides the valueAxis.boolean
Shows or hides the valueAxis.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.valueAxis[0].visible;
visibleShows or hides the range selector.boolean
Shows or hides the range selector.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].rangeSelector.visible;
textxAxis's text value.string
xAxis's text value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.seriesGroups[0].xAxis[0].text;
textRotationAngleText rotation angle.number | null
Text rotation angle.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.seriesGroups[0].xAxis[0].textRotationAngle;
textRotationPointPosition to rotate the text around."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Position to rotate the text around.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.seriesGroups[0].xAxis[0].textRotationPoint;
tickMarksObject describing the tick marks properties of the xAxis.
Click for more details. Property object's options:
object
Object describing the tick marks properties of the xAxis.
Properties
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.
Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.seriesGroups[0].xAxis[0].tickMarks;
colorColor of the tick marks.string
Color of the tick marks.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.seriesGroups[0].xAxis[0].tickMarks[0].color;
customAn array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.[] | null
An array of custom values/offsets where a tick mark will be displayed. Applicable only if tickMarks.visible is set to 'custom'.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.seriesGroups[0].xAxis[0].tickMarks[0].custom;
dashStyleTick marks dash style, e.g. '2,2'.string
Tick marks dash style, e.g. '2,2'.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.seriesGroups[0].xAxis[0].tickMarks[0].dashStyle;
lineWidthLine width (in pixels) of the tick marks.number
Line width (in pixels) of the tick marks.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.seriesGroups[0].xAxis[0].tickMarks[0].lineWidth;
sizeSize (in pixels) of the tick marks.number
Size (in pixels) of the tick marks.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.seriesGroups[0].xAxis[0].tickMarks[0].size;
stepInterval steps between tick mark placements (multiples of the axis unit interval).number | null
Interval steps between tick mark placements (multiples of the axis unit interval).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.seriesGroups[0].xAxis[0].tickMarks[0].step;
unitIntervalSets the interval between tick marks.number
Sets the interval between tick marks.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Determines the visibility of tick marks. When 'custom' is set, displays only custom values/offsets from the tickMarks.custom array.
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.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].tickMarks[0].visible;
titleObject describing the title of the xAxis.
Click for more details. Property object's options:
object
Object describing the title of the xAxis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.seriesGroups[0].xAxis[0].title;
classCSS class of the title text.string | null
CSS class of the title text.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.seriesGroups[0].xAxis[0].title.class;
horizontalAlignmentHorizontal alignment."left" | "center" | "right"
Horizontal alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.seriesGroups[0].xAxis[0].title.horizontalAlignment;
textText of the title.string
Text of the title.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.seriesGroups[0].xAxis[0].title.text;
verticalAlignmentVertical alignment."top" | "center" | "bottom"
Vertical alignment.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.seriesGroups[0].xAxis[0].title.verticalAlignment;
visibleboolean determining the visibility of the title.boolean
boolean determining the visibility of the title.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].title.visible;
toolTipFormatFunctionCustom function to format xAxis values in tooltips.{(value?: any, index?: number, series?: any): string}
Custom function to format xAxis values in tooltips.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatFunction = el.seriesGroups[0].xAxis[0].toolTipFormatFunction;
toolTipFormatSettingsSettings used to format xAxis values in tooltips.
Click for more details. Property object's options:
object
Settings used to format xAxis values in tooltips.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatSettings = el.seriesGroups[0].xAxis[0].toolTipFormatSettings;
dateFormatOptional date format string. This property is applicable only when displaying Date objects.string | null
Optional date format string. This property is applicable only when displaying Date objects.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].dateFormat;
decimalPlacesDecimal places of numeric values.number | null
Decimal places of numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].decimalPlaces;
decimalSeparatorA symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.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.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value indicating whether to display negative numbers in brackets.boolean
A boolean value indicating whether to display negative numbers in brackets.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;
prefixText to prepend to the value.string
Text to prepend to the value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].prefix;
sufixText to append to the valuestring
Text to append to the value
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].sufix;
thousandsSeparatorA symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.string | null
A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.seriesGroups[0].xAxis[0].toolTipFormatSettings[0].thousandsSeparator;
typeThe 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."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"Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.seriesGroups[0].xAxis[0].type;
unitIntervalSets the interval between the units.number | null
Sets the interval between the units.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.seriesGroups[0].xAxis[0].unitInterval;
valuesOnTicksSpecifies whether the axis values will be aligned with the tick marks.boolean
Specifies whether the axis values will be aligned with the tick marks.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.seriesGroups[0].xAxis[0].valuesOnTicks;
visibleShows or hides the xAxis.boolean
Shows or hides the xAxis.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.seriesGroups[0].xAxis[0].visible;
showBorderLineSpecifies whether a visible border line should be rendered around the chart area. Set this option to true to display the border, or false to hide it.boolean
Specifies whether a visible border line should be rendered around the chart area. Set this option to true to display the border, or false to hide it.
Default value
trueExample 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 Smart.Chart('#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' } ] } ] });
showLegendSpecifies whether the chart series legend should be displayed or hidden. When set to true, the legend appears on the chart, providing information about each data series. When set to false, the legend is not shown, resulting in a cleaner chart without series labels.boolean
Specifies whether the chart series legend should be displayed or hidden. When set to true, the legend appears on the chart, providing information about each data series. When set to false, the legend is not shown, resulting in a cleaner chart without series labels.
Default value
trueExample 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 Smart.Chart('#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' } ] } ] });
showToolTipsControls the visibility of chart tooltips by enabling or disabling them. When enabled, informational tooltips appear when users hover over or interact with chart elements; when disabled, tooltips are hidden and no additional information is displayed on interaction.boolean
Controls the visibility of chart tooltips by enabling or disabling them. When enabled, informational tooltips appear when users hover over or interact with chart elements; when disabled, tooltips are hidden and no additional information is displayed on interaction.
Default value
trueExample 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 Smart.Chart('#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' } ] } ] });
showToolTipsOnAllSeriesSpecifies whether to display a single, combined tooltip that presents information for all data series at the hovered data point, instead of individual tooltips for each series.boolean
Specifies whether to display a single, combined tooltip that presents information for all data series at the hovered data point, instead of individual tooltips for each series.
Default value
falseExample 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 Smart.Chart('#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' } ] } ] });
themeSpecifies the default set of colors to be applied to various chart elements, including the background, lines, text, and bands. These colors will be automatically used for the corresponding components in the chart unless individually overridden, ensuring a consistent visual theme throughout the chart.string
Specifies the default set of colors to be applied to various chart elements, including the background, lines, text, and bands. These colors will be automatically used for the corresponding components in the chart unless individually overridden, ensuring a consistent visual theme throughout 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 Smart.Chart('#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' } ] } ] });
titlePaddingSpecifies the amount of space (padding) applied around the chart’s title (caption), controlling the distance between the title text and the edges of its container. This affects the overall appearance and readability of the chart title.
Click for more details. Property object's options:
object
Specifies the amount of space (padding) applied around the chart’s title (caption), controlling the distance between the title text and the edges of its container. This affects the overall appearance and readability of the chart title.
Properties
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 Smart.Chart('#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' } ] } ] });
bottomSpecifies the amount of space added to the bottom inside edge of an element, creating padding between the element’s content and its bottom border.number
Specifies the amount of space added to the bottom inside edge of an element, creating padding between the element’s content and its bottom border.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.titlePadding.bottom;
leftSets the amount of space (padding) on the left side of an element's content, creating extra space between the element's content and its left border. Accepts values in units such as pixels (px), ems (em), percentages (%), etc.number
Sets the amount of space (padding) on the left side of an element's content, creating extra space between the element's content and its left border. Accepts values in units such as pixels (px), ems (em), percentages (%), etc.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.titlePadding.left;
rightAdds padding to the right side of the element. This property increases the space between the element's content and its right border. Specify the padding value using units such as pixels ('px'), ems ('em'), or percentages ('%').number
Adds padding to the right side of the element. This property increases the space between the element's content and its right border. Specify the padding value using units such as pixels ('px'), ems ('em'), or percentages ('%').
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.titlePadding.right;
topAdds padding space to the top edge of the element’s content, creating separation between the element’s content and its upper border. This property helps control the vertical spacing within the element.number
Adds padding space to the top edge of the element’s content, creating separation between the element’s content and its upper border. This property helps control the vertical spacing within the element.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.titlePadding.top;
toolTipBackgroundSpecifies the background color of the tooltip element, which appears when a user hovers over or focuses on a target component. This setting determines the visual background behind the tooltip text.string | null
Specifies the background color of the tooltip element, which appears when a user hovers over or focuses on a target component. This setting determines the visual background behind the tooltip text.
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 Smart.Chart('#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' } ] } ] });
toolTipFormatFunctionCallback function that allows users to customize the formatting of tooltip text. This function receives relevant data and returns a formatted string or HTML to be displayed as the tooltip content.{(value?: any, index?: number, series?: any): string}
Callback function that allows users to customize the formatting of tooltip text. This function receives relevant data and returns a formatted string or HTML to be displayed as the tooltip content.
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 Smart.Chart('#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' } ] } ] });
toolTipHideDelaySpecifies the duration, in milliseconds, to wait before hiding the tooltip after a user interaction (such as mouseleave or blur) occurs. This delay allows the tooltip to remain visible for a short period before disappearing, improving the user experience.number
Specifies the duration, in milliseconds, to wait before hiding the tooltip after a user interaction (such as mouseleave or blur) occurs. This delay allows the tooltip to remain visible for a short period before disappearing, improving the user experience.
Default value
4000Example 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 Smart.Chart('#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' } ] } ] });
toolTipLineColorSpecifies the color of the lines (borders or dividers) displayed within the tooltip, such as axis markers or grid lines, enhancing tooltip visibility and aesthetics. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color name).string | null
Specifies the color of the lines (borders or dividers) displayed within the tooltip, such as axis markers or grid lines, enhancing tooltip visibility and aesthetics. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color name).
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 Smart.Chart('#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' } ] } ] });
toolTipShowDelaySpecifies the delay, in milliseconds, before a tooltip appears after a triggering event (such as mouse hover or focus). Acceptable values range from 0 to 10,000 milliseconds (ms), where 0 shows the tooltip immediately and 10,000 sets a maximum delay of 10 seconds.number
Specifies the delay, in milliseconds, before a tooltip appears after a triggering event (such as mouse hover or focus). Acceptable values range from 0 to 10,000 milliseconds (ms), where 0 shows the tooltip immediately and 10,000 sets a maximum delay of 10 seconds.
Default value
300Example 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 Smart.Chart('#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' } ] } ] });
unlockKeySets or retrieves the unlockKey, a unique code or token required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the current key that allows authorized access.string
Sets or retrieves the unlockKey, a unique code or token required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the current key that allows authorized access.
Default value
""Examples
Markup and runtime examples for unlockKey:
HTML:
<smart-chart unlock-key=""></smart-chart>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-chart');
el.unlockKey = "1111-2222-3333-4444-5555";Read the current value:
const el = document.querySelector('smart-chart');
const unlockKey = el.unlockKey;
valueAxisAn object containing configuration settings for the chart's y-axis (also known as the value axis). This includes options for labels, scaling, grid lines, tick marks, axis titles, formatting, and other properties that control the appearance and behavior of the y-axis.
Click for more details. Property object's options:
object
An object containing configuration settings for the chart's y-axis (also known as the value axis). This includes options for labels, scaling, grid lines, tick marks, axis titles, formatting, and other properties that control the appearance and behavior of the y-axis.
Properties
- 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.
- dateFormat:string | null - Specifies an optional date format string used to control how Date objects are displayed as text. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. If not provided, a default date formatting will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values.
- decimalSeparator:string | null - A character that separates the integer part from the fractional part in a numeric value (for example, the decimal point in "123.45" or the comma in "123,45", depending on locale). By default, this value is inherited from localization.decimalSeparator, ensuring that number formatting follows the conventions of the user's selected language or region.
- negativeWithBrackets:boolean - A boolean value that determines whether negative numbers should be displayed within parentheses (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to format negative numbers with brackets; set to false to use the standard minus sign.
- prefix:string - Specifies the text that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - Specifies the text string that will be added to the end of the current value. This text is appended after the existing content.
- thousandsSeparator:string | null - Specifies the character or symbol used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). This helps improve number readability by marking the boundaries between thousands, millions, billions, and so on. If not explicitly set, the value defaults to the character defined in localization.thousandsSeparator.
- color:string - Specifies the color used to display the grid lines on the chart or graph. Accepts any valid CSS color value (e.g., hex, RGB, or named colors).
- custom:[] | null - An array specifying the exact positions or values at which grid lines should appear on the grid. This property is only effective when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using automatic or default intervals. Each element in the array represents a coordinate or value where a grid line will be rendered.
- dashStyle:string - Specifies the dash pattern for grid lines. Use a string of comma-separated numbers (e.g., "2,2") to define the lengths of dashes and gaps in pixels. For example, "2,2" creates a pattern of 2-pixel dashes followed by 2-pixel gaps.
- lineWidth:number - Specifies the thickness of the grid lines, measured in pixels. This value determines how wide each grid line appears on the screen.
- step:number | null - Specifies the number of axis unit intervals between consecutive grid lines on the chart. This value determines how frequently grid lines are drawn by setting the step size as a multiple of the base axis unit. For example, a value of 2 will place a grid line every two axis units.
- unitInterval:number - Specifies the spacing between adjacent grid lines by setting the interval distance. This determines how far apart the grid lines are displayed, allowing you to control the density or sparsity of the grid within the layout or chart.
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of grid lines:
true: All default grid lines are displayed.false: No grid lines are displayed.'custom': Only specific grid lines defined in thegridLines.customarray are displayed. Use this option to show grid lines at custom positions or offsets.
- angle:number - Specifies the angle, in degrees, at which the text is rotated clockwise from its normal horizontal orientation.
- autoRotate:boolean - Indicates whether automatic rotation is enabled for the chart. This boolean property applies exclusively to polar and spider chart types, controlling whether the chart elements rotate automatically.
- class:string | null - Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the application.
- custom:[] | null - An array specifying the exact values or positions (offsets) at which labels should be displayed on the axis. This property is used only when labels.visible is set to 'custom', allowing you to define a customized set of label locations rather than using default or evenly spaced labels.
- formatFunction:{(value?: any, index?: number, series?: any): string} - Specifies a callback function responsible for customizing the appearance or text of the labels. This function receives the original label value as an argument and should return the formatted label as it should be displayed. Use this to apply custom formatting, localization, or other label transformations.
- formatSettings:object - An object that specifies the configuration options for label formatting, including properties such as font size, color, font style, alignment, and other visual styling attributes. This object allows you to customize the appearance and presentation of labels.
- horizontalAlignment:string - Specifies the horizontal alignment of labels (e.g., left, center, or right) within their container. Determines how label text is positioned along the horizontal axis.
- offset:object - Specifies the amount of space or displacement applied to labels from their default position. This setting allows you to adjust how far the labels are shifted horizontally, vertically, or both—helpful for improving readability and avoiding overlap with other elements.
- rotationPoint:string - Specifies the reference point or coordinates around which the text will be rotated. This determines the center or pivot for the rotation transformation applied to the text.
- step:number | null - Specifies the number of axis unit intervals between each label placement. For example, a value of 1 places a label at every interval, while a value of 2 places a label at every second interval. This controls the spacing of labels along the axis.
- unitInterval:number - Defines the spacing between consecutive labels, specifying the interval at which labels are displayed along the axis or relevant element. This setting determines how frequently labels appear, allowing you to control label density and avoid overlap.
- verticalAlignment:string - Aligns the vertical position of labels relative to their containing element, allowing you to specify whether labels are positioned at the top, center, or bottom within the container.
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of labels. When set to
true, all labels are displayed. When set tofalse, all labels are hidden. If set to'custom', only the specific labels or offsets provided in the custom array will be visible.
- color:string - Specifies the color used to render the axis line, allowing customization of the axis appearance. Accepts any valid CSS color value (e.g., hex, RGB, color name).
- dashStyle:string - Specifies the dash pattern for the line as a comma-separated sequence of numbers, such as '2,2', where each number represents the length of dashes and gaps, respectively. By default, this value is inherited from the gridLines.dashStyle setting.
- lineWidth:number - Specifies the width of the line, in pixels, used for drawing. By default, this value is inherited from the gridLines.lineWidth property unless explicitly set here.
- visible:boolean - A boolean value that specifies whether the axis line should be displayed ('true') or hidden ('false') on the chart.
- bottom:number - Specifies the amount of padding to be applied to the bottom of the horizontal value axis. This property is only applicable when the valueAxis is oriented horizontally. Use it to add space below the axis for better layout or visual clarity.
- left:number - Specifies the amount of space (padding) added to the left side of the value axis when it is oriented vertically. This setting helps control the distance between the value axis and the edge of the chart, improving readability and layout customization. Applicable only when the valueAxis is set to a vertical orientation.
- right:number - Specifies the amount of padding to add to the right side of the chart. This option is applicable only when the valueAxis is oriented vertically, allowing you to create additional space on the right edge of the chart area.
- top:number - Specifies the amount of space added to the top of the horizontal value axis. This padding helps control the distance between the axis and its surrounding elements, allowing for improved layout and visual clarity. Applies exclusively to horizontal valueAxis configurations.
valueAxis is configured as horizontal, only 'top' or 'bottom' values are valid. This property determines where the axis line and its labels appear relative to the chart area.- color:string - Specifies the color used to display the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex, rgb, or color name).
- custom:[] | null - Specifies an array of custom values or positions at which tick marks will be displayed along the axis. This property is only applicable when tickMarks.visible is set to 'custom'. Each entry in the array represents a specific value or offset where a visible tick mark should appear.
- dashStyle:string - Specifies the dash pattern for tick marks using a comma-separated string. For example, '2,2' creates a repeating pattern of 2 pixels filled and 2 pixels of space. Adjust the values to customize the appearance of dashed tick marks.
- lineWidth:number - Specifies the thickness of the tick marks, in pixels. This value determines how wide each tick mark appears on the axis or scale.
- size:number - Specifies the length of the tick marks in pixels, determining how long each tick mark appears on the axis.
- step:number | null - Specifies the number of axis unit intervals between each tick mark. This determines how frequently tick marks are placed along the axis—set as a multiple of the default unit interval. For example, a value of 2 places tick marks every 2 units, skipping every other interval.
- unitInterval:number - Specifies the distance or value between each consecutive tick mark on the axis, determining how frequently tick marks appear. This controls the spacing of the tick marks for improved readability and precision on the scale.
- visible:boolean | string -
Possible values:
true,false,'custom'.Controls the visibility of tick marks on the component:
true: Shows all default tick marks.false: Hides all tick marks.'custom': Only displays tick marks at the positions specified in the tickMarks.custom array.
- class:string | null - Specifies the CSS class to be applied to the title text element, allowing for custom styling and formatting through external or internal stylesheets.
- horizontalAlignment:string - Specifies the horizontal alignment of content within its container, such as left, center, right, or justified. Determines how content is positioned along the horizontal (x) axis.
- text:string - The main text content displayed as the title. This typically serves as a concise summary or headline for the section, page, or component.
- verticalAlignment:string - Controls the vertical alignment of content within its containing element, allowing you to position items at the top, center, bottom, or baseline relative to their container.
- visible:boolean - A boolean value that specifies whether the title should be displayed (true) or hidden (false) on the interface.
alternatingBackgroundColorApplies alternating background colors to the grid rows or columns, creating a striped pattern that enhances readability by visually distinguishing between adjacent lines. This effect helps users easily track and follow data across the grid.string
Applies alternating background colors to the grid rows or columns, creating a striped pattern that enhances readability by visually distinguishing between adjacent lines. This effect helps users easily track and follow data across the grid.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.valueAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Applies the secondary background color used for alternating row styles, typically in tables or lists, to improve visual distinction between adjacent items.string
Applies the secondary background color used for alternating row styles, typically in tables or lists, to improve visual distinction between adjacent items.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.valueAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacitySpecifies the transparency level of the alternating background, where a value of 1 means fully opaque and 0 means fully transparent. This setting determines how visible the alternating background color appears behind content.number
Specifies the transparency level of the alternating background, where a value of 1 means fully opaque and 0 means fully transparent. This setting determines how visible the alternating background color appears behind content.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.valueAxis[0].alternatingBackgroundOpacity;
axisSizeSpecifies the length or thickness of the axis, determining how large it appears within the chart or graph. This setting can affect either the axis line itself or the space allocated for the axis, depending on the context.number | string | null
Specifies the length or thickness of the axis, determining how large it appears within the chart or graph. This setting can affect either the axis line itself or the space allocated for the axis, depending on the context.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.valueAxis[0].axisSize;
bandsOptional color bands that can be displayed in the chart's plot area to highlight specific ranges or intervals along an axis. These bands help emphasize particular areas of interest within the chart for improved data visualization and interpretation.
Click for more details. Property object's options:
[]
Optional color bands that can be displayed in the chart's plot area to highlight specific ranges or intervals along an axis. These bands help emphasize particular areas of interest within the chart for improved data visualization and interpretation.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.valueAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.valueAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.valueAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.valueAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.valueAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.valueAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.valueAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.valueAxis[0].bands[0].opacity;
baselineValueDefines the starting point or reference value from which the axis measurements are calculated. This baseline determines where the axis grid, tick marks, or data rendering begin, influencing the visual representation of the chart or graph.any
Defines the starting point or reference value from which the axis measurements are calculated. This baseline determines where the axis grid, tick marks, or data rendering begin, influencing the visual representation of the chart or graph.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const baselineValue = el.valueAxis[0].baselineValue;
customDrawA boolean value that specifies whether the axis should be rendered automatically. If set to true, the axis is drawn by the system; if false, rendering is left to the user, who can draw the axis manually using provided APIs.boolean
A boolean value that specifies whether the axis should be rendered automatically. If set to true, the axis is drawn by the system; if false, rendering is left to the user, who can draw the axis manually using provided APIs.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.valueAxis[0].customDraw;
descriptionDefines the text label or title displayed on the value axis of a chart or graph, providing context or explanation for the data values represented along that axis.string
Defines the text label or title displayed on the value axis of a chart or graph, providing context or explanation for the data values represented along that axis.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const description = el.valueAxis[0].description;
displayValueAxisDetermines whether the value axis (typically representing numerical data on a chart or graph) is visible on the display. When set to true, the value axis is shown; when set to false, it is hidden from view.boolean
Determines whether the value axis (typically representing numerical data on a chart or graph) is visible on the display. When set to true, the value axis is shown; when set to false, it is hidden from view.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const displayValueAxis = el.valueAxis[0].displayValueAxis;
flipIndicates whether the values should be displayed in the opposite order from their original sequence. If set to true, the order of the values will be reversed; if false, the values will be shown in their default (original) order.boolean
Indicates whether the values should be displayed in the opposite order from their original sequence. If set to true, the order of the values will be reversed; if false, the values will be shown in their default (original) order.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.valueAxis[0].flip;
formatFunctionA user-defined function that formats the values displayed along the axis, allowing you to customize how axis labels appear (e.g., adding units, formatting numbers, or applying localization).{(value?: any, index?: number, series?: any): string}
A user-defined function that formats the values displayed along the axis, allowing you to customize how axis labels appear (e.g., adding units, formatting numbers, or applying localization).
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.valueAxis[0].formatFunction;
formatSettingsSettings that define how values are visually formatted and presented along the axis, such as number formatting, decimal precision, units, currency symbols, and custom display patterns.
Click for more details. Property object's options:
object
Settings that define how values are visually formatted and presented along the axis, such as number formatting, decimal precision, units, currency symbols, and custom display patterns.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.valueAxis[0].formatSettings;
dateFormatSpecifies an optional date format string used to control how Date objects are displayed as text. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. If not provided, a default date formatting will be used.string | null
Specifies an optional date format string used to control how Date objects are displayed as text. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. If not provided, a default date formatting will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.valueAxis[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or store for numeric values.number | null
Specifies the number of decimal places to display or store for numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.valueAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA character that separates the integer part from the fractional part in a numeric value (for example, the decimal point in "123.45" or the comma in "123,45", depending on locale). By default, this value is inherited from localization.decimalSeparator, ensuring that number formatting follows the conventions of the user's selected language or region.string | null
A character that separates the integer part from the fractional part in a numeric value (for example, the decimal point in "123.45" or the comma in "123,45", depending on locale). By default, this value is inherited from localization.decimalSeparator, ensuring that number formatting follows the conventions of the user's selected language or region.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.valueAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines whether negative numbers should be displayed within parentheses (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to format negative numbers with brackets; set to false to use the standard minus sign.boolean
A boolean value that determines whether negative numbers should be displayed within parentheses (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to format negative numbers with brackets; set to false to use the standard minus sign.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.valueAxis[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value before it is displayed or processed.string
Specifies the text that will be added to the beginning of the value before it is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.valueAxis[0].formatSettings[0].prefix;
sufixSpecifies the text string that will be added to the end of the current value. This text is appended after the existing content.string
Specifies the text string that will be added to the end of the current value. This text is appended after the existing content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.valueAxis[0].formatSettings[0].sufix;
thousandsSeparatorSpecifies the character or symbol used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). This helps improve number readability by marking the boundaries between thousands, millions, billions, and so on. If not explicitly set, the value defaults to the character defined in localization.thousandsSeparator.string | null
Specifies the character or symbol used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). This helps improve number readability by marking the boundaries between thousands, millions, billions, and so on. If not explicitly set, the value defaults to the character defined in localization.thousandsSeparator.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.valueAxis[0].formatSettings[0].thousandsSeparator;
gridLinesAn object that defines the properties and styling options for the grid lines displayed along the valueAxis. This includes attributes such as line color, width, dash pattern, visibility, and other customization options that control the appearance and behavior of the value axis grid lines within the chart.
Click for more details. Property object's options:
object
An object that defines the properties and styling options for the grid lines displayed along the valueAxis. This includes attributes such as line color, width, dash pattern, visibility, and other customization options that control the appearance and behavior of the value axis grid lines within the chart.
Properties
Possible values: true, false, 'custom'.
This option controls the visibility of grid lines:
true: All default grid lines are displayed. false: No grid lines are displayed. 'custom': Only specific grid lines defined in the gridLines.custom array are displayed. Use this option to show grid lines at custom positions or offsets.Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.valueAxis[0].gridLines;
colorSpecifies the color used to display the grid lines on the chart or graph. Accepts any valid CSS color value (e.g., hex, RGB, or named colors).string
Specifies the color used to display the grid lines on the chart or graph. Accepts any valid CSS color value (e.g., hex, RGB, or named colors).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.valueAxis[0].gridLines[0].color;
customAn array specifying the exact positions or values at which grid lines should appear on the grid. This property is only effective when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using automatic or default intervals. Each element in the array represents a coordinate or value where a grid line will be rendered.[] | null
An array specifying the exact positions or values at which grid lines should appear on the grid. This property is only effective when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using automatic or default intervals. Each element in the array represents a coordinate or value where a grid line will be rendered.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.valueAxis[0].gridLines[0].custom;
dashStyleSpecifies the dash pattern for grid lines. Use a string of comma-separated numbers (e.g., "2,2") to define the lengths of dashes and gaps in pixels. For example, "2,2" creates a pattern of 2-pixel dashes followed by 2-pixel gaps.string
Specifies the dash pattern for grid lines. Use a string of comma-separated numbers (e.g., "2,2") to define the lengths of dashes and gaps in pixels. For example, "2,2" creates a pattern of 2-pixel dashes followed by 2-pixel gaps.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.valueAxis[0].gridLines[0].dashStyle;
lineWidthSpecifies the thickness of the grid lines, measured in pixels. This value determines how wide each grid line appears on the screen.number
Specifies the thickness of the grid lines, measured in pixels. This value determines how wide each grid line appears on the screen.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.valueAxis[0].gridLines[0].lineWidth;
stepSpecifies the number of axis unit intervals between consecutive grid lines on the chart. This value determines how frequently grid lines are drawn by setting the step size as a multiple of the base axis unit. For example, a value of 2 will place a grid line every two axis units.number | null
Specifies the number of axis unit intervals between consecutive grid lines on the chart. This value determines how frequently grid lines are drawn by setting the step size as a multiple of the base axis unit. For example, a value of 2 will place a grid line every two axis units.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.valueAxis[0].gridLines[0].step;
unitIntervalSpecifies the spacing between adjacent grid lines by setting the interval distance. This determines how far apart the grid lines are displayed, allowing you to control the density or sparsity of the grid within the layout or chart.number
Specifies the spacing between adjacent grid lines by setting the interval distance. This determines how far apart the grid lines are displayed, allowing you to control the density or sparsity of the grid within the layout or chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.valueAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
This option controls the visibility of grid lines:
true: All default grid lines are displayed. false: No grid lines are displayed. 'custom': Only specific grid lines defined in the gridLines.custom array are displayed. Use this option to show grid lines at custom positions or offsets.boolean | string
true, false, 'custom'.Possible values: true, false, 'custom'.
This option controls the visibility of grid lines:
true: All default grid lines are displayed.false: No grid lines are displayed.'custom': Only specific grid lines defined in the gridLines.custom array are displayed. Use this option to show grid lines at custom positions or offsets.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].gridLines[0].visible;
labelsDefines the properties and configuration options for the labels displayed along the axis, such as label text, style, formatting, rotation, and positioning.
Click for more details. Property object's options:
object
Defines the properties and configuration options for the labels displayed along the axis, such as label text, style, formatting, rotation, and positioning.
Properties
- dateFormat:string | null - Specifies an optional format string for displaying dates. This property is used only when the value is a Date object, and determines how the date will be rendered (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.
- decimalPlaces:number | null - Specifies the number of digits to display after the decimal point for numeric values.
- decimalSeparator:string | null - A character that separates the integer portion from the fractional portion in numeric values (for example, the period in "3.14"). By default, this symbol is automatically set based on the localization.decimalSeparator setting, ensuring the correct format for the user's locale.
- negativeWithBrackets:boolean - A boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., displaying -123 as (123)) instead of using the standard minus sign. Set to true to show negative numbers in brackets; set to false to display them with a minus sign.
- prefix:string - Specifies the text that will be added to the beginning of the value. This text appears before the value whenever it is displayed or processed.
- sufix:string - Specifies the text string that will be added to the end of the current value. This appended text appears immediately after the existing content, extending or modifying the original value.
- thousandsSeparator:string | null - Indicates the character or symbol used to separate groups of digits in large numbers (e.g., thousands, millions, billions) for readability, such as a comma in "1,000,000". By default, this value is determined by localization.thousandsSeparator, allowing it to adapt based on the user's locale or regional formatting settings.
Possible values: true, false, 'custom'.
This option controls the visibility of labels. When set to true, all labels are displayed. When set to false, all labels are hidden. If set to 'custom', only the specific labels or offsets provided in the custom array will be visible.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.valueAxis[0].labels;
angleSpecifies the angle, in degrees, at which the text is rotated clockwise from its normal horizontal orientation.number
Specifies the angle, in degrees, at which the text is rotated clockwise from its normal horizontal orientation.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.valueAxis[0].labels[0].angle;
autoRotateIndicates whether automatic rotation is enabled for the chart. This boolean property applies exclusively to polar and spider chart types, controlling whether the chart elements rotate automatically.boolean
Indicates whether automatic rotation is enabled for the chart. This boolean property applies exclusively to polar and spider chart types, controlling whether the chart elements rotate automatically.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.valueAxis[0].labels[0].autoRotate;
classSpecifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the application.string | null
Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the application.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.valueAxis[0].labels[0].class;
customAn array specifying the exact values or positions (offsets) at which labels should be displayed on the axis. This property is used only when labels.visible is set to 'custom', allowing you to define a customized set of label locations rather than using default or evenly spaced labels.[] | null
An array specifying the exact values or positions (offsets) at which labels should be displayed on the axis. This property is used only when labels.visible is set to 'custom', allowing you to define a customized set of label locations rather than using default or evenly spaced labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.valueAxis[0].labels[0].custom;
formatFunctionSpecifies a callback function responsible for customizing the appearance or text of the labels. This function receives the original label value as an argument and should return the formatted label as it should be displayed. Use this to apply custom formatting, localization, or other label transformations.{(value?: any, index?: number, series?: any): string}
Specifies a callback function responsible for customizing the appearance or text of the labels. This function receives the original label value as an argument and should return the formatted label as it should be displayed. Use this to apply custom formatting, localization, or other label transformations.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.valueAxis[0].labels[0].formatFunction;
formatSettingsAn object that specifies the configuration options for label formatting, including properties such as font size, color, font style, alignment, and other visual styling attributes. This object allows you to customize the appearance and presentation of labels.
Click for more details. Property object's options:
object
An object that specifies the configuration options for label formatting, including properties such as font size, color, font style, alignment, and other visual styling attributes. This object allows you to customize the appearance and presentation of labels.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.valueAxis[0].labels[0].formatSettings;
dateFormatSpecifies an optional format string for displaying dates. This property is used only when the value is a Date object, and determines how the date will be rendered (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.string | null
Specifies an optional format string for displaying dates. This property is used only when the value is a Date object, and determines how the date will be rendered (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.valueAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of digits to display after the decimal point for numeric values.number | null
Specifies the number of digits to display after the decimal point for numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA character that separates the integer portion from the fractional portion in numeric values (for example, the period in "3.14"). By default, this symbol is automatically set based on the localization.decimalSeparator setting, ensuring the correct format for the user's locale.string | null
A character that separates the integer portion from the fractional portion in numeric values (for example, the period in "3.14"). By default, this symbol is automatically set based on the localization.decimalSeparator setting, ensuring the correct format for the user's locale.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., displaying -123 as (123)) instead of using the standard minus sign. Set to true to show negative numbers in brackets; set to false to display them with a minus sign.boolean
A boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., displaying -123 as (123)) instead of using the standard minus sign. Set to true to show negative numbers in brackets; set to false to display them with a minus sign.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value. This text appears before the value whenever it is displayed or processed.string
Specifies the text that will be added to the beginning of the value. This text appears before the value whenever it is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.valueAxis[0].labels[0].formatSettings[0].prefix;
sufixSpecifies the text string that will be added to the end of the current value. This appended text appears immediately after the existing content, extending or modifying the original value.string
Specifies the text string that will be added to the end of the current value. This appended text appears immediately after the existing content, extending or modifying the original value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.valueAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorIndicates the character or symbol used to separate groups of digits in large numbers (e.g., thousands, millions, billions) for readability, such as a comma in "1,000,000". By default, this value is determined by localization.thousandsSeparator, allowing it to adapt based on the user's locale or regional formatting settings.string | null
Indicates the character or symbol used to separate groups of digits in large numbers (e.g., thousands, millions, billions) for readability, such as a comma in "1,000,000". By default, this value is determined by localization.thousandsSeparator, allowing it to adapt based on the user's locale or regional formatting settings.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentSpecifies the horizontal alignment of labels (e.g., left, center, or right) within their container. Determines how label text is positioned along the horizontal axis."left" | "center" | "right"
Specifies the horizontal alignment of labels (e.g., left, center, or right) within their container. Determines how label text is positioned along the horizontal axis.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.valueAxis[0].labels[0].horizontalAlignment;
offsetSpecifies the amount of space or displacement applied to labels from their default position. This setting allows you to adjust how far the labels are shifted horizontally, vertically, or both—helpful for improving readability and avoiding overlap with other elements. object
Specifies the amount of space or displacement applied to labels from their default position. This setting allows you to adjust how far the labels are shifted horizontally, vertically, or both—helpful for improving readability and avoiding overlap with other elements.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.valueAxis[0].labels[0].offset;
xSpecifies the horizontal distance, in pixels, from a reference point or edge. Positive values move the element to the right, while negative values move it to the left.number
Specifies the horizontal distance, in pixels, from a reference point or edge. Positive values move the element to the right, while negative values move it to the left.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.valueAxis[0].labels[0].offset.x;
ySpecifies the distance by which an element is shifted vertically from its original position. Positive values move the element downward, while negative values move it upward. Typically measured in pixels or other CSS-supported units.number
Specifies the distance by which an element is shifted vertically from its original position. Positive values move the element downward, while negative values move it upward. Typically measured in pixels or other CSS-supported units.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.valueAxis[0].labels[0].offset.y;
rotationPointSpecifies the reference point or coordinates around which the text will be rotated. This determines the center or pivot for the rotation transformation applied to the text."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the reference point or coordinates around which the text will be rotated. This determines the center or pivot for the rotation transformation applied to the text.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.valueAxis[0].labels[0].rotationPoint;
stepSpecifies the number of axis unit intervals between each label placement. For example, a value of 1 places a label at every interval, while a value of 2 places a label at every second interval. This controls the spacing of labels along the axis.number | null
Specifies the number of axis unit intervals between each label placement. For example, a value of 1 places a label at every interval, while a value of 2 places a label at every second interval. This controls the spacing of labels along the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.valueAxis[0].labels[0].step;
unitIntervalDefines the spacing between consecutive labels, specifying the interval at which labels are displayed along the axis or relevant element. This setting determines how frequently labels appear, allowing you to control label density and avoid overlap.number
Defines the spacing between consecutive labels, specifying the interval at which labels are displayed along the axis or relevant element. This setting determines how frequently labels appear, allowing you to control label density and avoid overlap.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.valueAxis[0].labels[0].unitInterval;
verticalAlignmentAligns the vertical position of labels relative to their containing element, allowing you to specify whether labels are positioned at the top, center, or bottom within the container."top" | "center" | "bottom"
Aligns the vertical position of labels relative to their containing element, allowing you to specify whether labels are positioned at the top, center, or bottom within the container.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.valueAxis[0].labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
This option controls the visibility of labels. When set to true, all labels are displayed. When set to false, all labels are hidden. If set to 'custom', only the specific labels or offsets provided in the custom array will be visible.
boolean | string
true, false, 'custom'.true, all labels are displayed. When set to false, all labels are hidden. If set to 'custom', only the specific labels or offsets provided in the custom array will be visible.Possible values: true, false, 'custom'.
This option controls the visibility of labels. When set to true, all labels are displayed. When set to false, all labels are hidden. If set to 'custom', only the specific labels or offsets provided in the custom array will be visible.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].labels[0].visible;
lineAn object that defines the visual and functional properties of the axis line, including attributes such as color, width, style (e.g., solid or dashed), and visibility settings. This object allows you to customize how the axis line appears on a chart or graph.
Click for more details. Property object's options:
object
An object that defines the visual and functional properties of the axis line, including attributes such as color, width, style (e.g., solid or dashed), and visibility settings. This object allows you to customize how the axis line appears on a chart or graph.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.valueAxis[0].line;
colorSpecifies the color used to render the axis line, allowing customization of the axis appearance. Accepts any valid CSS color value (e.g., hex, RGB, color name).string
Specifies the color used to render the axis line, allowing customization of the axis appearance. Accepts any valid CSS color value (e.g., hex, RGB, color name).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.valueAxis[0].line.color;
dashStyleSpecifies the dash pattern for the line as a comma-separated sequence of numbers, such as '2,2', where each number represents the length of dashes and gaps, respectively. By default, this value is inherited from the gridLines.dashStyle setting.string
Specifies the dash pattern for the line as a comma-separated sequence of numbers, such as '2,2', where each number represents the length of dashes and gaps, respectively. By default, this value is inherited from the gridLines.dashStyle setting.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.valueAxis[0].line.dashStyle;
lineWidthSpecifies the width of the line, in pixels, used for drawing. By default, this value is inherited from the gridLines.lineWidth property unless explicitly set here.number
Specifies the width of the line, in pixels, used for drawing. By default, this value is inherited from the gridLines.lineWidth property unless explicitly set here.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.valueAxis[0].line.lineWidth;
visibleA boolean value that specifies whether the axis line should be displayed ('true') or hidden ('false') on the chart.boolean
A boolean value that specifies whether the axis line should be displayed ('true') or hidden ('false') on the chart.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].line.visible;
logarithmicScaleSpecifies whether the scale should be displayed using a logarithmic (log) scale instead of a linear scale. When set to true, data values are plotted according to their logarithmic values, which is useful for visualizing data that spans several orders of magnitude.boolean
Specifies whether the scale should be displayed using a logarithmic (log) scale instead of a linear scale. When set to true, data values are plotted according to their logarithmic values, which is useful for visualizing data that spans several orders of magnitude.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.valueAxis[0].logarithmicScale;
logarithmicScaleBaseSpecifies the base value used for the logarithmic scale. All data values are plotted according to this base, which defines the intervals and spacing of the scale (e.g., a base of 10 creates intervals of 10, 100, 1000, etc.).number
Specifies the base value used for the logarithmic scale. All data values are plotted according to this base, which defines the intervals and spacing of the scale (e.g., a base of 10 creates intervals of 10, 100, 1000, etc.).
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.valueAxis[0].logarithmicScaleBase;
maxValueSpecifies the highest numerical value displayed on the valueAxis. Any data points exceeding this maximum will be capped or not shown on the axis. Use this property to control the upper boundary of the axis range for accurate data representation and visualization.any
Specifies the highest numerical value displayed on the valueAxis. Any data points exceeding this maximum will be capped or not shown on the axis. Use this property to control the upper boundary of the axis range for accurate data representation and visualization.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.valueAxis[0].maxValue;
minValueDefines the lowest value displayed on the valueAxis, establishing the minimum limit for the axis range. This sets where the axis will start, and any values below this threshold will not be shown.any
Defines the lowest value displayed on the valueAxis, establishing the minimum limit for the axis range. This sets where the axis will start, and any values below this threshold will not be shown.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.valueAxis[0].minValue;
paddingAn object that specifies the padding settings for the axis, defining the amount of spacing (in pixels or other units) added before and after the axis line. This controls the distance between the axis and its surrounding elements, such as labels, ticks, or gridlines. The object typically includes properties for padding at the start and end of the axis.
Click for more details. Property object's options:
object
An object that specifies the padding settings for the axis, defining the amount of spacing (in pixels or other units) added before and after the axis line. This controls the distance between the axis and its surrounding elements, such as labels, ticks, or gridlines. The object typically includes properties for padding at the start and end of the axis.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.valueAxis[0].padding;
bottomSpecifies the amount of padding to be applied to the bottom of the horizontal value axis. This property is only applicable when the valueAxis is oriented horizontally. Use it to add space below the axis for better layout or visual clarity.number
Specifies the amount of padding to be applied to the bottom of the horizontal value axis. This property is only applicable when the valueAxis is oriented horizontally. Use it to add space below the axis for better layout or visual clarity.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.valueAxis[0].padding.bottom;
leftSpecifies the amount of space (padding) added to the left side of the value axis when it is oriented vertically. This setting helps control the distance between the value axis and the edge of the chart, improving readability and layout customization. Applicable only when the valueAxis is set to a vertical orientation.number
Specifies the amount of space (padding) added to the left side of the value axis when it is oriented vertically. This setting helps control the distance between the value axis and the edge of the chart, improving readability and layout customization. Applicable only when the valueAxis is set to a vertical orientation.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.valueAxis[0].padding.left;
rightSpecifies the amount of padding to add to the right side of the chart. This option is applicable only when the valueAxis is oriented vertically, allowing you to create additional space on the right edge of the chart area.number
Specifies the amount of padding to add to the right side of the chart. This option is applicable only when the valueAxis is oriented vertically, allowing you to create additional space on the right edge of the chart area.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.valueAxis[0].padding.right;
topSpecifies the amount of space added to the top of the horizontal value axis. This padding helps control the distance between the axis and its surrounding elements, allowing for improved layout and visual clarity. Applies exclusively to horizontal valueAxis configurations.number
Specifies the amount of space added to the top of the horizontal value axis. This padding helps control the distance between the axis and its surrounding elements, allowing for improved layout and visual clarity. Applies exclusively to horizontal valueAxis configurations.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.valueAxis[0].padding.top;
positionDefines the positioning of the axis on the chart. By default, you can set the axis position to either 'left' or 'right' for vertical axes. If the valueAxis is configured as horizontal, only 'top' or 'bottom' values are valid. This property determines where the axis line and its labels appear relative to the chart area."left" | "right" | "top" | "bottom"
Defines the positioning of the axis on the chart. By default, you can set the axis position to either 'left' or 'right' for vertical axes. If the valueAxis is configured as horizontal, only 'top' or 'bottom' values are valid. This property determines where the axis line and its labels appear relative to the chart area.
Default value
"left"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.valueAxis[0].position;
textRotationAngleSpecifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.number | null
Specifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.valueAxis[0].textRotationAngle;
textRotationPointSpecifies the reference point or origin around which the text will be rotated. This determines the center of rotation for any transformation applied to the text."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the reference point or origin around which the text will be rotated. This determines the center of rotation for any transformation applied to the text.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.valueAxis[0].textRotationPoint;
tickMarksObject that defines the configuration options for the tick marks displayed on the valueAxis, including properties such as tick size, color, thickness, spacing, and visibility. This allows you to customize the appearance and behavior of the valueAxis tick marks to fit your chart’s design requirements.
Click for more details. Property object's options:
object
Object that defines the configuration options for the tick marks displayed on the valueAxis, including properties such as tick size, color, thickness, spacing, and visibility. This allows you to customize the appearance and behavior of the valueAxis tick marks to fit your chart’s design requirements.
Properties
Possible values: true, false, 'custom'.
Controls the visibility of tick marks on the component:
true: Shows all default tick marks. false: Hides all tick marks. 'custom': Only displays tick marks at the positions specified in the tickMarks.custom array.Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.valueAxis[0].tickMarks;
colorSpecifies the color used to display the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex, rgb, or color name).string
Specifies the color used to display the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex, rgb, or color name).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.valueAxis[0].tickMarks[0].color;
customSpecifies an array of custom values or positions at which tick marks will be displayed along the axis. This property is only applicable when tickMarks.visible is set to 'custom'. Each entry in the array represents a specific value or offset where a visible tick mark should appear.[] | null
Specifies an array of custom values or positions at which tick marks will be displayed along the axis. This property is only applicable when tickMarks.visible is set to 'custom'. Each entry in the array represents a specific value or offset where a visible tick mark should appear.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.valueAxis[0].tickMarks[0].custom;
dashStyleSpecifies the dash pattern for tick marks using a comma-separated string. For example, '2,2' creates a repeating pattern of 2 pixels filled and 2 pixels of space. Adjust the values to customize the appearance of dashed tick marks.string
Specifies the dash pattern for tick marks using a comma-separated string. For example, '2,2' creates a repeating pattern of 2 pixels filled and 2 pixels of space. Adjust the values to customize the appearance of dashed tick marks.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.valueAxis[0].tickMarks[0].dashStyle;
lineWidthSpecifies the thickness of the tick marks, in pixels. This value determines how wide each tick mark appears on the axis or scale.number
Specifies the thickness of the tick marks, in pixels. This value determines how wide each tick mark appears on the axis or scale.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.valueAxis[0].tickMarks[0].lineWidth;
sizeSpecifies the length of the tick marks in pixels, determining how long each tick mark appears on the axis.number
Specifies the length of the tick marks in pixels, determining how long each tick mark appears on the axis.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.valueAxis[0].tickMarks[0].size;
stepSpecifies the number of axis unit intervals between each tick mark. This determines how frequently tick marks are placed along the axis—set as a multiple of the default unit interval. For example, a value of 2 places tick marks every 2 units, skipping every other interval.number | null
Specifies the number of axis unit intervals between each tick mark. This determines how frequently tick marks are placed along the axis—set as a multiple of the default unit interval. For example, a value of 2 places tick marks every 2 units, skipping every other interval.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.valueAxis[0].tickMarks[0].step;
unitIntervalSpecifies the distance or value between each consecutive tick mark on the axis, determining how frequently tick marks appear. This controls the spacing of the tick marks for improved readability and precision on the scale.number
Specifies the distance or value between each consecutive tick mark on the axis, determining how frequently tick marks appear. This controls the spacing of the tick marks for improved readability and precision on the scale.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.valueAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Controls the visibility of tick marks on the component:
true: Shows all default tick marks. false: Hides all tick marks. 'custom': Only displays tick marks at the positions specified in the tickMarks.custom array.boolean | string
true, false, 'custom'.Possible values: true, false, 'custom'.
Controls the visibility of tick marks on the component:
true: Shows all default tick marks.false: Hides all tick marks.'custom': Only displays tick marks at the positions specified in the tickMarks.custom array.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].tickMarks[0].visible;
titleAn object that defines the properties and configuration of the valueAxis title, including attributes such as the displayed text, font style, color, alignment, and additional styling options.
Click for more details. Property object's options:
object
An object that defines the properties and configuration of the valueAxis title, including attributes such as the displayed text, font style, color, alignment, and additional styling options.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.valueAxis[0].title;
classSpecifies the CSS class to be applied to the title text element, allowing for custom styling and formatting through external or internal stylesheets.string | null
Specifies the CSS class to be applied to the title text element, allowing for custom styling and formatting through external or internal stylesheets.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.valueAxis[0].title.class;
horizontalAlignmentSpecifies the horizontal alignment of content within its container, such as left, center, right, or justified. Determines how content is positioned along the horizontal (x) axis."left" | "center" | "right"
Specifies the horizontal alignment of content within its container, such as left, center, right, or justified. Determines how content is positioned along the horizontal (x) axis.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.valueAxis[0].title.horizontalAlignment;
textThe main text content displayed as the title. This typically serves as a concise summary or headline for the section, page, or component.string
The main text content displayed as the title. This typically serves as a concise summary or headline for the section, page, or component.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.valueAxis[0].title.text;
verticalAlignmentControls the vertical alignment of content within its containing element, allowing you to position items at the top, center, bottom, or baseline relative to their container."top" | "center" | "bottom"
Controls the vertical alignment of content within its containing element, allowing you to position items at the top, center, bottom, or baseline relative to their container.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.valueAxis[0].title.verticalAlignment;
visibleA boolean value that specifies whether the title should be displayed (true) or hidden (false) on the interface.boolean
A boolean value that specifies whether the title should be displayed (true) or hidden (false) on the interface.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].title.visible;
type"Specifies the type of axis used to represent the values in a chart (such as linear, logarithmic, or categorical), determining how data points are scaled and displayed along the value axis."string
"Specifies the type of axis used to represent the values in a chart (such as linear, logarithmic, or categorical), determining how data points are scaled and displayed along the value axis."
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.valueAxis[0].type;
unitIntervalSpecifies the amount of spacing or time between each unit, determining how far apart or how frequently the units are placed or triggered.number | null
Specifies the amount of spacing or time between each unit, determining how far apart or how frequently the units are placed or triggered.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.valueAxis[0].unitInterval;
valuesOnTicksDetermines if the axis values (labels or numbers) are positioned directly at the tick marks on the axis. When enabled, each label aligns exactly with its corresponding tick mark; when disabled, labels may be positioned between tick marks or at custom locations.boolean
Determines if the axis values (labels or numbers) are positioned directly at the tick marks on the axis. When enabled, each label aligns exactly with its corresponding tick mark; when disabled, labels may be positioned between tick marks or at custom locations.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.valueAxis[0].valuesOnTicks;
visibleDisplays or hides the value axis on the chart. When enabled, the value axis (typically representing numerical data) is visible, allowing users to interpret the chart’s scale; when disabled, the axis is hidden from view.boolean
Displays or hides the value axis on the chart. When enabled, the value axis (typically representing numerical data) is visible, allowing users to interpret the chart’s scale; when disabled, the axis is hidden from view.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.valueAxis[0].visible;
xAxisConfigures the x-axis properties of the chart, including its scale, labels, formatting, and appearance. This determines how data is displayed horizontally on the chart.
Click for more details. Property object's options:
object
Configures the x-axis properties of the chart, including its scale, labels, formatting, and appearance. This determines how data is displayed horizontally on the chart.
Properties
- 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.
- dateFormat:string | null - Specifies an optional format string for displaying Date objects. This property is only relevant when the value being rendered is a JavaScript Date instance. If provided, the format string determines how the date will appear in the user interface; otherwise, a default date format will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or round numeric values to.
- decimalSeparator:string | null - A character or symbol that separates the integer portion of a number from its fractional (decimal) part. By default, this value is taken from localization.decimalSeparator, ensuring consistency with the number formatting conventions of the selected locale (for example, a period '.' for US English or a comma ',' for many European formats).
- negativeWithBrackets:boolean - A boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). When set to true, negative values are shown in brackets; when false, the standard minus sign notation is used.
- prefix:string - Specifies text that will be added at the beginning of the value before any further processing or display.
- sufix:string - Specifies the additional text that will be appended to the end of the existing value. This text is added after the current value content.
- thousandsSeparator:string | null - Indicates the character used to separate digit groups in large numbers, such as thousands, millions, and billions (e.g., using a comma in 1,000,000). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's number formatting conventions.
- color:string - Specifies the color used to display the grid lines, typically defined as a HEX, RGB, or named color value. This setting determines the appearance of the lines separating grid areas or cells.
- custom:[] | null - An array specifying custom values or offsets at which grid lines should be displayed on the grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define precise positions for each grid line instead of using automatically calculated intervals.
- dashStyle:string - Specifies the dash pattern for the grid lines as a string of comma-separated values. For example, "2,2" creates a dashed line with segments of 2 units drawn followed by 2 units of space. Adjust the values to control the length of dashes and gaps.
- lineWidth:number - Specifies the thickness of the grid lines, measured in pixels. This determines how wide each grid line will appear on the screen.
- step:number | null - Specifies the number of axis unit intervals between each grid line. Determines how frequently grid lines are displayed by setting the interval as a multiple of the base axis unit (e.g., a value of 2 draws a grid line every 2 axis units).
- unitInterval:number - Specifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines are drawn along the axis. Adjusting this value controls the density and appearance of the grid within the component or chart.
- visible:boolean | string -
Possible values:
true,false, or'custom'.Controls the visibility of grid lines:
- true: All grid lines are displayed.
- false: All grid lines are hidden.
- 'custom': Only specific grid lines, as defined in the
gridLines.customarray, are displayed. Use this option to specify custom grid line positions or offsets instead of showing all grid lines.
- angle:number - Specifies the angle, in degrees, by which the text is rotated clockwise from its default horizontal orientation.
- autoRotate:boolean - Indicates whether automatic rotation is enabled. This option accepts a boolean value (true or false) and is only applicable to polar and spider charts. When set to true, the chart elements will automatically rotate based on user interaction or data changes.
- class:string | null - Specifies the CSS class or classes applied to the label elements, allowing you to customize their appearance and styling through your stylesheet.
- custom:[] | null - An array specifying the exact values or offsets at which labels should be displayed on the component. This property is only applicable when
labels.visibleis set to'custom', allowing for precise customization of label placement according to the specified values in the array. - formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that formats label text before it is displayed. This function receives the raw label value as an argument and should return the formatted string or JSX to be rendered as the label. Use this to apply custom formatting, localization, or styling to chart, axis, or UI component labels.
- formatSettings:object - An object that specifies the formatting options for labels, including properties such as font style, color, size, alignment, and display format. This object allows you to customize the visual appearance and representation of label text within the application or component.
- horizontalAlignment:string - Specifies the horizontal alignment of labels, determining whether labels are positioned to the left, center, or right within their containing element.
- offset:object - Specifies the distance by which labels are shifted from their default position, allowing for customization of label placement relative to their associated elements.
- rotationPoint:string - Specifies the anchor point or coordinates about which the text will be rotated. This determines the center of rotation for the text element.
- step:number | null - Specifies the number of axis unit intervals to skip between label placements. For example, a value of 2 will place a label at every second axis interval, effectively spacing the labels further apart. This helps control label density on the axis.
- unitInterval:number - Specifies the spacing or distance, in set units, between consecutive labels along the axis. This determines how frequently labels are displayed, helping to control label density and improve readability.
- verticalAlignment:string - Aligns the labels vertically within their container, ensuring consistent placement along the vertical axis.
- visible:boolean | string -
Possible values:
true,false, or'custom'.Controls the visibility of labels:
true: All labels are shown.false: No labels are displayed.'custom': Only the labels specified within thecustomarray are displayed. Each label in the array corresponds to a particular value or offset that should be shown.
- color:string - Specifies the color used to render the axis line, allowing you to customize the appearance of the axis for better visual distinction and design consistency. Accepts any valid CSS color value (e.g., hex code, RGB, RGBA, or color name).
- dashStyle:string - Specifies the dash pattern for the line, using a string of comma-separated numbers (e.g., '2,2' for a pattern of 2 pixels drawn, 2 pixels skipped). By default, this value is inherited from the gridLines settings. Set the dashStyle property to customize the appearance of the line’s dashes.
- lineWidth:number - Specifies the thickness of the line in pixels. By default, this value is inherited from the lineWidth property defined in gridLines. Adjust this option to customize the line width for this specific element.
- visible:boolean - Boolean value that controls whether the axis line is displayed ('true') or hidden ('false') on the chart.
- bottom:number - Specifies the amount of padding added to the bottom of the chart when using a horizontal xAxis. This setting creates extra space below the xAxis, which can improve the layout and prevent overlap with chart elements or labels. Only applicable when the xAxis orientation is horizontal.
- left:number - Specifies the amount of left padding to apply to the x-axis when it is displayed in a vertical orientation. This setting adjusts the spacing between the left edge of the chart container and the vertical x-axis, helping to improve layout and readability. Only applicable when the x-axis is configured vertically.
- right:number - Specifies the amount of padding added to the right side of the vertical xAxis. This setting is only applicable when the xAxis is oriented vertically, allowing you to create additional space on the right edge of the axis for improved layout and readability.
- top:number - Specifies the amount of padding applied to the top of the horizontal x-axis. This property allows you to add extra space above the x-axis when it is rendered horizontally.
- backgroundColor:string | null - Specifies the background color applied to the entire range selector chart area, providing visual distinction and enhancing the chart's appearance. Accepts color values in formats such as HEX, RGB, RGBA, or color names.
- backgroundImage:string - Specifies the background image to be displayed behind the range selector chart, enhancing its visual appearance. The image is positioned and sized according to the chart container’s settings.
- baseUnit:string | null - Indicates the fundamental time interval (such as day, month, or year) that is used as the smallest unit of measurement and labeling when the axis type is set to 'date'. This determines how data points are grouped, displayed, and spaced along a date-based axis.
- borderLineColor:string | null - Defines the color of the border surrounding the range selector chart, allowing you to customize its appearance to match your application's design. Accepts color values in formats such as hex codes, RGB, or named colors.
- borderLineWidth:number | null - Specifies the thickness, in pixels, of the border line surrounding the range selector chart. Adjusting this value changes how bold or subtle the chart’s border appears.
- caption:string - Defines the text displayed as the caption (or title) above the range selector chart, providing context or a label for the chart’s content.
- colorScheme:string | null - Defines the color palette used by the range selector chart. The smartChart component supports 32 predefined color schemes, which can be specified by setting the palette value to a string from 'scheme01' to 'scheme32'. This determines the set of colors applied to chart elements such as bars, lines, or pie slices in the range selector.
- columnSeriesOverlap:boolean - Determines whether the columns in a series are allowed to overlap each other when displayed. When enabled, multiple column series can be rendered on top of one another instead of being positioned side by side. Disabling this option ensures that each column is shown separately with no visual overlap.
- columnsGapPercent:number - Specifies the percentage-based spacing between adjacent columns within the same data series. This determines how much empty space appears between columns that belong to a single series in a grouped or clustered chart.
- dataField:string | null - Specifies the exact field or property within the data source from which data will be retrieved or to which data will be mapped. This reference enables the application to access, display, or manipulate data associated with that particular field.
- description:string - Specifies the descriptive text displayed on the range selector chart, providing context or instructions to users regarding the chart's data or functionality.
- greyScale:boolean | null - Specifies whether the range selector chart should be rendered using greyscale (black, white, and shades of gray) colors instead of the default color palette. When enabled, all chart elements within the range selector—such as lines, areas, and markers—will appear in greyscale to provide a neutral visual style.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that formats input values before they are displayed or processed. This function receives each value as an argument and should return the formatted result. Use this to customize the appearance or structure of the data values.
- formatSettings:any -
"Configuration options for customizing the appearance and layout of charts, including settings for colors, axes, labels, gridlines, legends, and overall styling." - gridLines:object - An object that defines the properties and styling options for the grid lines displayed along the x-axis of the range selector chart. This includes settings such as line color, width, dash style, and visibility, allowing customization of the appearance and behavior of the x-axis grid lines within the chart.
- labels:object - An object that defines the properties and configuration options for the axis labels, such as font style, size, color, rotation, alignment, and formatting. This allows for customization of how the labels appear along the chart axis.
- maxValue:any - Specifies the highest allowable value on the x-axis of the range selector chart, effectively defining the upper limit of the selectable data range displayed in the chart.
- minValue:any - Specifies the lowest allowable value on the xAxis of the range selector chart, effectively setting the starting point for the selectable range. This determines the minimum data value users can select or view within the chart’s range selector component.
- padding:object - Describes the padding settings for the range selector chart, specifying the amount of space (in pixels or other units) between the chart’s content and its outer edges. This object allows developers to control the spacing on each side (top, right, bottom, and left) of the range selector, ensuring proper layout and visual separation within the chart area.
- position:string | null - Defines the position of the range selector chart within the component. This property allows you to specify where the range selector appears (e.g., top, bottom, left, or right) in relation to the main chart, enabling better layout customization and user interface control.
- renderTo:HTMLElement | null - Specifies the external HTML element where the range selector chart will be rendered, instead of displaying it within the main chart container. This allows you to place the range selector in a custom location on the page outside of the primary chart area.
- rightToLeft:boolean | null - Gets or sets a boolean value that determines whether the layout of the range selector chart is displayed in a mirrored (reversed) orientation. When set to true, the chart's elements such as axes, labels, and data series are rendered as a mirror image of the default layout. When set to false, the standard layout is used.
- seriesGapPercent:number - Specifies the percentage-based spacing between columns that represent different data series, ensuring visual separation between series in a grouped column or bar chart.
- seriesGroups:[] | null -
seriesGroups (Optional): This property defines the configuration of all data series that are displayed within the range selector chart. Each entry within
seriesGroupsspecifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.For comprehensive details—including a complete list of supported subproperties and configuration examples—please refer to the main documentation entry for seriesGroups.
- serieType:string | null - Specifies the chart type used for the range selector in smartChart. smartChart supports a wide variety of standard chart types, allowing you to visually represent different kinds of data. You can display multiple series with different types on the same chart by specifying a type for each series group. Choosing the appropriate chart type enables you to best convey your data's meaning.
Below is a comprehensive list of supported chart types in smartChart:
'Column and Bar Charts'
- 'column': Displays simple vertical columns for each data point.
- 'stackedcolumn': Stacked vertical columns representing cumulative values.
- 'stackedcolumn100': Stacked columns where the height reflects percentage contributions (100%).
- 'rangecolumn': Columns that float between two values, visualizing value ranges.
'Line and Area Charts'
- 'line': Connects data points with straight lines.
- 'stackedline': Stacks multiple line series, showing cumulative totals.
- 'stackedline100': Stacked line with percentage contributions.
- 'spline': Connects data points with smooth, curved lines.
- 'stackedspline': Stacked smooth lines for cumulative totals.
- 'stackedspline100': Stacked smooth lines showing percentage contributions.
- 'stepline': Step-like straight lines connecting data points.
- 'stackedstepline': Stacked step lines for cumulative data.
- 'stackedstepline100': Stacked step lines as percentages.
'Area Charts'
- 'area': Fills the area beneath straight lines connecting data points.
- 'stackedarea': Areas are stacked to show cumulative values.
- 'stackedarea100': Stacked areas scaled to 100% totals.
- 'rangearea': Shows a floating area between pairs of value points.
- 'splinearea': Fills the area beneath a smooth spline line.
- 'stackedsplinearea': Stacked smooth areas for cumulative visualization.
- 'stackedsplinearea100': Stacked smooth areas as percentages.
- 'splinerangearea': Smooth, floating area between value pairs.
- 'steparea': Step-like filled area.
- 'stackedsteparea': Cumulative, stacked step areas.
- 'stackedsteparea100': Stacked step areas scaled to 100%.
- 'steprangearea': Step-shaped floating area between value pairs.
'Waterfall Charts'
- 'waterfall': Visualizes cumulative effects of sequential positive and negative values.
- 'stackedwaterfall': Stacked waterfall series for multi-category measures.
'Pie and Donut Charts'
- 'pie': Circular chart divided into sectors, illustrating the relative proportions of each category.
- 'donut': Similar to a pie chart, but with a hollow center, differentiating inner and outer radii.
'Scatter and Bubble Charts'
- 'scatter': Displays individual data points as unconnected dots.
- 'stackedscatter': Stacked scatter points for cumulative values.
- 'stackedscatter100': Scatter points stacked and scaled as percentages.
- 'bubble': Represents data points as circles (bubbles) with varying sizes.
- 'stackedbubble': Stacked bubble series.
- 'stackedbubble100': Bubbles showing percentage stacking.
'Stock Charts'
- 'candlestick': Illustrates stock OHLC (open, high, low, close) data as candlesticks.
- 'ohlc': Displays stock OHLC data as bars without color-filled bodies.
'Notes:'
- Each series group in your chart must specify its own type.
- Selecting the correct chart type helps emphasize trends, patterns, or proportions relevant to your data.
For more details, refer to the smartChart documentation on series types and their specific configurations. - showBorderLine:boolean | null - Specifies whether a border line should be displayed around the range selector chart. When set to true, a visible border is rendered outlining the range selector; when set to false, no border is shown.
- size:number | null - Defines the dimensions (width and height) of the range selector chart, controlling how large or small the range selector appears within the user interface. Adjusting this setting allows you to customize the overall size to fit your layout requirements.
- skipOverlappingPoints:boolean - Specifies whether overlapping data points should be visually displayed in column, OHLC, and candlestick series. When enabled, multiple data points that share the same position on the x-axis will be shown together, allowing for accurate representation of overlapping values in these chart types.
- titlePadding:object - Specifies the amount of padding (space) around the chart’s title (caption), controlling the distance between the title text and the chart’s edges. This property allows you to adjust the visual spacing to improve readability and appearance.
- unitInterval:number | null - Specifies the amount of space or time between each individual unit, determining how far apart the units are from one another. This interval can be defined in various units (such as pixels, seconds, etc.) depending on the context, and directly affects the layout, spacing, or timing between consecutive units.
- valueAxis:object - An object that defines configuration options for the y-axis (value axis) of the range selector chart, including properties such as axis limits, scaling, labels, grid lines, and other display settings.
- visible:boolean - Determines whether the range selector component is visible or hidden on the interface. When enabled, users can select a specific range (such as dates or values) to filter or adjust the displayed data. Disabling this option will hide the range selector from view.
- color:string - Specifies the color used to render the tick marks on the axis, grid, or scale. Accepts any valid CSS color value (e.g., HEX, RGB, or color names).
- custom:[] | null - An array specifying the exact numeric values or offsets at which tick marks will appear along the axis. This property is used only when tickMarks.visible is set to 'custom', allowing you to define precise positions for tick marks instead of relying on automatic or evenly spaced rendering. Each entry in the array determines the location of an individual tick mark.
- dashStyle:string - Specifies the dash pattern for tick marks using a string of numbers. For example, '2,2' creates a dashed line with segments of 2 units long followed by 2 units of space. This allows customization of the tick mark appearance with different dash and gap lengths.
- lineWidth:number - Specifies the thickness, in pixels, of the tick marks displayed on the axis lines. This value determines how wide each tick mark appears.
- size:number - Specifies the length of the tick marks in pixels, determining how long each tick appears along the axis or scale.
- step:number | null - Determines the number of axis unit intervals between each tick mark, setting the spacing so that tick marks appear at every specified multiple of the base interval. For example, a value of 2 places a tick mark at every second axis unit interval.
- unitInterval:number - Specifies the distance or value difference between consecutive tick marks on the axis, determining how frequently tick marks appear and helping to control the scale's granularity.
- visible:boolean | string -
Possible values:
true,false,'custom'.Controls the visibility and placement of tick marks on the axis:
true: All default tick marks are displayed.false: Tick marks are hidden.'custom': Only specific tick marks, defined in thetickMarks.customarray, will be displayed at the specified values or offsets.
- class:string | null - Specifies the CSS class or classes to be applied to the title text element, allowing for custom styling and theme adjustments. Provide one or more class names as a string or array.
- horizontalAlignment:string - Specifies the horizontal alignment of content within its container, determining whether elements are aligned to the left, center, or right.
- text:string - Contains the text content to be displayed as the main title or heading.
- verticalAlignment:string - Specifies the vertical alignment of content within an element, allowing you to control whether content is positioned at the top, middle, bottom, or baseline relative to its container.
- visible:boolean - A boolean value that specifies whether the title should be visible ('true') or hidden ('false') in the user interface.
- dateFormat:string | null - Specifies an optional string that defines the format in which Date objects are displayed. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. Use standard date formatting tokens to customize how the date appears in the UI.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values, controlling the precision of numbers in the application.
- decimalSeparator:string | null - A character or symbol that separates the integer portion from the fractional portion of a numeric value (for example, the period in 123.45 or the comma in 123,45). By default, this value is determined by the localization.decimalSeparator setting, ensuring consistency with the user's locale or regional formatting conventions.
- negativeWithBrackets:boolean - A boolean value that determines if negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to show negative values in brackets, or false to use the standard minus sign.
- prefix:string - Specifies a string that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - The string that will be added to the end of the current value. This text is appended directly after the existing value, extending it without altering the original content.
- thousandsSeparator:string | null - Specifies the character used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's standard number formatting.
alternatingBackgroundColorApplies alternating background colors to the grid rows, creating a striped effect that enhances row distinction and improves readability.string
Applies alternating background colors to the grid rows, creating a striped effect that enhances row distinction and improves readability.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.xAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Applies the secondary background color used for alternating row patterns, typically to distinguish every other row or section for improved readability.string
Applies the secondary background color used for alternating row patterns, typically to distinguish every other row or section for improved readability.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.xAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacityControls the transparency level of the alternating background, where a value of 1 is fully opaque and 0 is fully transparent. This setting affects the visibility of the background colors that alternate in the UI component.number
Controls the transparency level of the alternating background, where a value of 1 is fully opaque and 0 is fully transparent. This setting affects the visibility of the background colors that alternate in the UI component.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.xAxis[0].alternatingBackgroundOpacity;
axisSizeSpecifies the length or range of the xAxis, determining how much data is displayed horizontally on the chart. This setting controls the visible width of the xAxis and can affect the scaling and spacing of axis labels and data points.number | string | null
Specifies the length or range of the xAxis, determining how much data is displayed horizontally on the chart. This setting controls the visible width of the xAxis and can affect the scaling and spacing of axis labels and data points.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.xAxis[0].axisSize;
bandsDisplays optional color bands within the chart’s plot area to highlight specific value ranges or regions. These bands can be customized in terms of color, position, and width to improve data visualization and readability.
Click for more details. Property object's options:
[]
Displays optional color bands within the chart’s plot area to highlight specific value ranges or regions. These bands can be customized in terms of color, position, and width to improve data visualization and readability.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.xAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.xAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.xAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.xAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.xAxis[0].bands[0].opacity;
baseUnitSpecifies the fundamental time interval (such as 'day', 'month', or 'year') used to group or display data points along a 'date' axis. This setting determines how time-based data will be segmented and visualized on the chart.null | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
Specifies the fundamental time interval (such as 'day', 'month', or 'year') used to group or display data points along a 'date' axis. This setting determines how time-based data will be segmented and visualized on the chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const baseUnit = el.xAxis[0].baseUnit;
customDrawA boolean value that specifies whether the axis should be rendered automatically by the system. If set to true, the axis is drawn automatically; if false, the axis will not be drawn, leaving it up to the user to render the axis manually using the provided APIs.boolean
A boolean value that specifies whether the axis should be rendered automatically by the system. If set to true, the axis is drawn automatically; if false, the axis will not be drawn, leaving it up to the user to render the axis manually using the provided APIs.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.xAxis[0].customDraw;
dataFieldSpecifies the exact data field within the data source from which the value will be retrieved or referenced. This property is used to bind the component to a specific key or attribute in the underlying dataset.string
Specifies the exact data field within the data source from which the value will be retrieved or referenced. This property is used to bind the component to a specific key or attribute in the underlying dataset.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dataField = el.xAxis[0].dataField;
dateFormatSpecifies the optional date format to be used when parsing data from the data source. This property is relevant only when xAxis.type is set to 'date'. Use this format to ensure that date values from your data source are correctly interpreted and displayed on the x-axis. If not specified, a default date parsing format will be applied.string | null
Specifies the optional date format to be used when parsing data from the data source. This property is relevant only when xAxis.type is set to 'date'. Use this format to ensure that date values from your data source are correctly interpreted and displayed on the x-axis. If not specified, a default date parsing format will be applied.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].dateFormat;
displayTextSpecifies an optional custom label to be displayed on the xAxis. If provided, this text will override the default xAxis label in the chart.string | null
Specifies an optional custom label to be displayed on the xAxis. If provided, this text will override the default xAxis label in the chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const displayText = el.xAxis[0].displayText;
flipDetermines if the values should be presented in the opposite order from their default sequence. When set to true, the values are displayed from last to first instead of first to last.boolean
Determines if the values should be presented in the opposite order from their default sequence. When set to true, the values are displayed from last to first instead of first to last.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.xAxis[0].flip;
formatFunctionA user-defined function that formats the values displayed along the axis, allowing customization of label content and appearance (such as number precision, date formatting, or appending units) before they are rendered on the chart.{(value?: any, index?: number, series?: any): string}
A user-defined function that formats the values displayed along the axis, allowing customization of label content and appearance (such as number precision, date formatting, or appending units) before they are rendered on the chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].formatFunction;
formatSettingsSettings that define how values are visually formatted and presented on the axis, such as number formatting, decimal precision, currency symbols, and date or time display styles.
Click for more details. Property object's options:
object
Settings that define how values are visually formatted and presented on the axis, such as number formatting, decimal precision, currency symbols, and date or time display styles.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].formatSettings;
dateFormatSpecifies an optional format string for displaying Date objects. This property is only relevant when the value being rendered is a JavaScript Date instance. If provided, the format string determines how the date will appear in the user interface; otherwise, a default date format will be used.string | null
Specifies an optional format string for displaying Date objects. This property is only relevant when the value being rendered is a JavaScript Date instance. If provided, the format string determines how the date will appear in the user interface; otherwise, a default date format will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or round numeric values to.number | null
Specifies the number of decimal places to display or round numeric values to.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA character or symbol that separates the integer portion of a number from its fractional (decimal) part. By default, this value is taken from localization.decimalSeparator, ensuring consistency with the number formatting conventions of the selected locale (for example, a period '.' for US English or a comma ',' for many European formats).string | null
A character or symbol that separates the integer portion of a number from its fractional (decimal) part. By default, this value is taken from localization.decimalSeparator, ensuring consistency with the number formatting conventions of the selected locale (for example, a period '.' for US English or a comma ',' for many European formats).
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). When set to true, negative values are shown in brackets; when false, the standard minus sign notation is used.boolean
A boolean value that specifies whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). When set to true, negative values are shown in brackets; when false, the standard minus sign notation is used.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies text that will be added at the beginning of the value before any further processing or display.string
Specifies text that will be added at the beginning of the value before any further processing or display.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].formatSettings[0].prefix;
sufixSpecifies the additional text that will be appended to the end of the existing value. This text is added after the current value content.string
Specifies the additional text that will be appended to the end of the existing value. This text is added after the current value content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].formatSettings[0].sufix;
thousandsSeparatorIndicates the character used to separate digit groups in large numbers, such as thousands, millions, and billions (e.g., using a comma in 1,000,000). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's number formatting conventions.string | null
Indicates the character used to separate digit groups in large numbers, such as thousands, millions, and billions (e.g., using a comma in 1,000,000). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's number formatting conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].formatSettings[0].thousandsSeparator;
gridLinesAn object that defines the properties and visual styling of the grid lines displayed along the x-axis, including attributes such as color, width, dash pattern, and line visibility.
Click for more details. Property object's options:
object
An object that defines the properties and visual styling of the grid lines displayed along the x-axis, including attributes such as color, width, dash pattern, and line visibility.
Properties
Possible values: true, false, or 'custom'.
Controls the visibility of grid lines:
true: All grid lines are displayed. false: All grid lines are hidden. 'custom': Only specific grid lines, as defined in thegridLines.custom array, are displayed. Use this option to specify custom grid line positions or offsets instead of showing all grid lines.Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.xAxis[0].gridLines;
colorSpecifies the color used to display the grid lines, typically defined as a HEX, RGB, or named color value. This setting determines the appearance of the lines separating grid areas or cells.string
Specifies the color used to display the grid lines, typically defined as a HEX, RGB, or named color value. This setting determines the appearance of the lines separating grid areas or cells.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].gridLines[0].color;
customAn array specifying custom values or offsets at which grid lines should be displayed on the grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define precise positions for each grid line instead of using automatically calculated intervals.[] | null
An array specifying custom values or offsets at which grid lines should be displayed on the grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define precise positions for each grid line instead of using automatically calculated intervals.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].gridLines[0].custom;
dashStyleSpecifies the dash pattern for the grid lines as a string of comma-separated values. For example, "2,2" creates a dashed line with segments of 2 units drawn followed by 2 units of space. Adjust the values to control the length of dashes and gaps.string
Specifies the dash pattern for the grid lines as a string of comma-separated values. For example, "2,2" creates a dashed line with segments of 2 units drawn followed by 2 units of space. Adjust the values to control the length of dashes and gaps.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].gridLines[0].dashStyle;
lineWidthSpecifies the thickness of the grid lines, measured in pixels. This determines how wide each grid line will appear on the screen.number
Specifies the thickness of the grid lines, measured in pixels. This determines how wide each grid line will appear on the screen.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].gridLines[0].lineWidth;
stepSpecifies the number of axis unit intervals between each grid line. Determines how frequently grid lines are displayed by setting the interval as a multiple of the base axis unit (e.g., a value of 2 draws a grid line every 2 axis units).number | null
Specifies the number of axis unit intervals between each grid line. Determines how frequently grid lines are displayed by setting the interval as a multiple of the base axis unit (e.g., a value of 2 draws a grid line every 2 axis units).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].gridLines[0].step;
unitIntervalSpecifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines are drawn along the axis. Adjusting this value controls the density and appearance of the grid within the component or chart.number
Specifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines are drawn along the axis. Adjusting this value controls the density and appearance of the grid within the component or chart.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, or 'custom'.
Controls the visibility of grid lines:
true: All grid lines are displayed. false: All grid lines are hidden. 'custom': Only specific grid lines, as defined in the gridLines.custom array, are displayed. Use this option to specify custom grid line positions or offsets instead of showing all grid lines.boolean | string
true, false, or 'custom'.Possible values: true, false, or 'custom'.
Controls the visibility of grid lines:
true: All grid lines are displayed.
false: All grid lines are hidden.
'custom': Only specific grid lines, as defined in the
gridLines.custom array, are displayed. Use this option to specify custom grid line positions or offsets instead of showing all grid lines.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].gridLines[0].visible;
labelsAn object that defines the properties for axis labels, including settings such as font size, color, style, alignment, rotation, and formatting. This configuration controls the appearance and behavior of labels displayed along the axis in a chart or graph.
Click for more details. Property object's options:
object
An object that defines the properties for axis labels, including settings such as font size, color, style, alignment, rotation, and formatting. This configuration controls the appearance and behavior of labels displayed along the axis in a chart or graph.
Properties
labels.visible is set to 'custom', allowing for precise customization of label placement according to the specified values in the array.- dateFormat:string | null - Specifies an optional date format string used to control how Date objects are displayed. This property is relevant only when the data being rendered is a Date object; it has no effect on other data types. If provided, the format string determines the output format of the date (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If omitted, the default display format for dates will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values. This determines the level of precision shown after the decimal point.
- decimalSeparator:string | null - Defines the character that separates the integer part from the fractional part in a numeric value (for example, the decimal point). By default, this value is inherited from localization.decimalSeparator, ensuring consistency with the application's locale-specific formatting conventions.
- negativeWithBrackets:boolean - A boolean value that determines if negative numbers should be shown enclosed in brackets (e.g., (123) instead of -123). When set to true, negative values are displayed with parentheses for improved readability or accounting format; when false, the standard minus sign is used.
- prefix:string - Specifies the text that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - Text that will be added to the end of the current value.
- thousandsSeparator:string | null - Indicates the character used to separate groups of thousands in large numbers (e.g., 1,000; 1,000,000; 1,000,000,000). By default, this value is inherited from localization.thousandsSeparator, allowing the separator to be automatically adjusted based on the user's locale settings.
Possible values: true, false, or 'custom'.
Controls the visibility of labels:
true: All labels are shown. false: No labels are displayed. 'custom': Only the labels specified within the custom array are displayed. Each label in the array corresponds to a particular value or offset that should be shown.Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.xAxis[0].labels;
angleSpecifies the angle, in degrees, by which the text is rotated clockwise from its default horizontal orientation.number
Specifies the angle, in degrees, by which the text is rotated clockwise from its default horizontal orientation.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.xAxis[0].labels[0].angle;
autoRotateIndicates whether automatic rotation is enabled. This option accepts a boolean value (true or false) and is only applicable to polar and spider charts. When set to true, the chart elements will automatically rotate based on user interaction or data changes.boolean
Indicates whether automatic rotation is enabled. This option accepts a boolean value (true or false) and is only applicable to polar and spider charts. When set to true, the chart elements will automatically rotate based on user interaction or data changes.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.xAxis[0].labels[0].autoRotate;
classSpecifies the CSS class or classes applied to the label elements, allowing you to customize their appearance and styling through your stylesheet.string | null
Specifies the CSS class or classes applied to the label elements, allowing you to customize their appearance and styling through your stylesheet.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.xAxis[0].labels[0].class;
customAn array specifying the exact values or offsets at which labels should be displayed on the component. This property is only applicable when labels.visible is set to 'custom', allowing for precise customization of label placement according to the specified values in the array.[] | null
An array specifying the exact values or offsets at which labels should be displayed on the component. This property is only applicable when labels.visible is set to 'custom', allowing for precise customization of label placement according to the specified values in the array.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].labels[0].custom;
formatFunctionA callback function that formats label text before it is displayed. This function receives the raw label value as an argument and should return the formatted string or JSX to be rendered as the label. Use this to apply custom formatting, localization, or styling to chart, axis, or UI component labels.{(value?: any, index?: number, series?: any): string}
A callback function that formats label text before it is displayed. This function receives the raw label value as an argument and should return the formatted string or JSX to be rendered as the label. Use this to apply custom formatting, localization, or styling to chart, axis, or UI component labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].labels[0].formatFunction;
formatSettingsAn object that specifies the formatting options for labels, including properties such as font style, color, size, alignment, and display format. This object allows you to customize the visual appearance and representation of label text within the application or component.
Click for more details. Property object's options:
object
An object that specifies the formatting options for labels, including properties such as font style, color, size, alignment, and display format. This object allows you to customize the visual appearance and representation of label text within the application or component.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].labels[0].formatSettings;
dateFormatSpecifies an optional date format string used to control how Date objects are displayed. This property is relevant only when the data being rendered is a Date object; it has no effect on other data types. If provided, the format string determines the output format of the date (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If omitted, the default display format for dates will be used.string | null
Specifies an optional date format string used to control how Date objects are displayed. This property is relevant only when the data being rendered is a Date object; it has no effect on other data types. If provided, the format string determines the output format of the date (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If omitted, the default display format for dates will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or store for numeric values. This determines the level of precision shown after the decimal point.number | null
Specifies the number of decimal places to display or store for numeric values. This determines the level of precision shown after the decimal point.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorDefines the character that separates the integer part from the fractional part in a numeric value (for example, the decimal point). By default, this value is inherited from localization.decimalSeparator, ensuring consistency with the application's locale-specific formatting conventions.string | null
Defines the character that separates the integer part from the fractional part in a numeric value (for example, the decimal point). By default, this value is inherited from localization.decimalSeparator, ensuring consistency with the application's locale-specific formatting conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines if negative numbers should be shown enclosed in brackets (e.g., (123) instead of -123). When set to true, negative values are displayed with parentheses for improved readability or accounting format; when false, the standard minus sign is used.boolean
A boolean value that determines if negative numbers should be shown enclosed in brackets (e.g., (123) instead of -123). When set to true, negative values are displayed with parentheses for improved readability or accounting format; when false, the standard minus sign is used.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value before it is displayed or processed.string
Specifies the text that will be added to the beginning of the value before it is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].labels[0].formatSettings[0].prefix;
sufixText that will be added to the end of the current value.string
Text that will be added to the end of the current value.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorIndicates the character used to separate groups of thousands in large numbers (e.g., 1,000; 1,000,000; 1,000,000,000). By default, this value is inherited from localization.thousandsSeparator, allowing the separator to be automatically adjusted based on the user's locale settings.string | null
Indicates the character used to separate groups of thousands in large numbers (e.g., 1,000; 1,000,000; 1,000,000,000). By default, this value is inherited from localization.thousandsSeparator, allowing the separator to be automatically adjusted based on the user's locale settings.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentSpecifies the horizontal alignment of labels, determining whether labels are positioned to the left, center, or right within their containing element."left" | "center" | "right"
Specifies the horizontal alignment of labels, determining whether labels are positioned to the left, center, or right within their containing element.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.xAxis[0].labels[0].horizontalAlignment;
offsetSpecifies the distance by which labels are shifted from their default position, allowing for customization of label placement relative to their associated elements. object
Specifies the distance by which labels are shifted from their default position, allowing for customization of label placement relative to their associated elements.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.xAxis[0].labels[0].offset;
xSpecifies the horizontal offset value, which determines the distance an element is shifted left or right from its original position along the x-axis. Positive values move the element to the right, while negative values move it to the left.number
Specifies the horizontal offset value, which determines the distance an element is shifted left or right from its original position along the x-axis. Positive values move the element to the right, while negative values move it to the left.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.xAxis[0].labels[0].offset.x;
ySpecifies the amount of vertical displacement, typically measured in pixels, used to shift an element or effect up or down from its original position. Positive values move the element downward, while negative values move it upward.number
Specifies the amount of vertical displacement, typically measured in pixels, used to shift an element or effect up or down from its original position. Positive values move the element downward, while negative values move it upward.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.xAxis[0].labels[0].offset.y;
rotationPointSpecifies the anchor point or coordinates about which the text will be rotated. This determines the center of rotation for the text element."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the anchor point or coordinates about which the text will be rotated. This determines the center of rotation for the text element.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.xAxis[0].labels[0].rotationPoint;
stepSpecifies the number of axis unit intervals to skip between label placements. For example, a value of 2 will place a label at every second axis interval, effectively spacing the labels further apart. This helps control label density on the axis.number | null
Specifies the number of axis unit intervals to skip between label placements. For example, a value of 2 will place a label at every second axis interval, effectively spacing the labels further apart. This helps control label density on the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].labels[0].step;
unitIntervalSpecifies the spacing or distance, in set units, between consecutive labels along the axis. This determines how frequently labels are displayed, helping to control label density and improve readability.number
Specifies the spacing or distance, in set units, between consecutive labels along the axis. This determines how frequently labels are displayed, helping to control label density and improve readability.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].labels[0].unitInterval;
verticalAlignmentAligns the labels vertically within their container, ensuring consistent placement along the vertical axis."top" | "center" | "bottom"
Aligns the labels vertically within their container, ensuring consistent placement along the vertical axis.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.xAxis[0].labels[0].verticalAlignment;
visiblePossible values: true, false, or 'custom'.
Controls the visibility of labels:
true: All labels are shown. false: No labels are displayed. 'custom': Only the labels specified within the custom array are displayed. Each label in the array corresponds to a particular value or offset that should be shown.boolean | string
true, false, or 'custom'.Possible values: true, false, or 'custom'.
Controls the visibility of labels:
true: All labels are shown.false: No labels are displayed.'custom': Only the labels specified within the custom array are displayed. Each label in the array corresponds to a particular value or offset that should be shown.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].labels[0].visible;
lineAn object that defines the visual and stylistic properties of the axis line, including attributes such as color, thickness (width), dash style, and visibility. Use this object to customize how the axis line appears on the chart.
Click for more details. Property object's options:
object
An object that defines the visual and stylistic properties of the axis line, including attributes such as color, thickness (width), dash style, and visibility. Use this object to customize how the axis line appears on the chart.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.xAxis[0].line;
colorSpecifies the color used to render the axis line, allowing you to customize the appearance of the axis for better visual distinction and design consistency. Accepts any valid CSS color value (e.g., hex code, RGB, RGBA, or color name).string
Specifies the color used to render the axis line, allowing you to customize the appearance of the axis for better visual distinction and design consistency. Accepts any valid CSS color value (e.g., hex code, RGB, RGBA, or color name).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].line.color;
dashStyleSpecifies the dash pattern for the line, using a string of comma-separated numbers (e.g., '2,2' for a pattern of 2 pixels drawn, 2 pixels skipped). By default, this value is inherited from the gridLines settings. Set the dashStyle property to customize the appearance of the line’s dashes.string
Specifies the dash pattern for the line, using a string of comma-separated numbers (e.g., '2,2' for a pattern of 2 pixels drawn, 2 pixels skipped). By default, this value is inherited from the gridLines settings. Set the dashStyle property to customize the appearance of the line’s dashes.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].line.dashStyle;
lineWidthSpecifies the thickness of the line in pixels. By default, this value is inherited from the lineWidth property defined in gridLines. Adjust this option to customize the line width for this specific element.number
Specifies the thickness of the line in pixels. By default, this value is inherited from the lineWidth property defined in gridLines. Adjust this option to customize the line width for this specific element.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].line.lineWidth;
visibleBoolean value that controls whether the axis line is displayed ('true') or hidden ('false') on the chart.boolean
Boolean value that controls whether the axis line is displayed ('true') or hidden ('false') on the chart.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].line.visible;
logarithmicScaleSpecifies whether a logarithmic scale should be applied for data representation, enabling better visualization of values that span several orders of magnitude. When set to true, data will be displayed on a logarithmic axis instead of a linear one.boolean
Specifies whether a logarithmic scale should be applied for data representation, enabling better visualization of values that span several orders of magnitude. When set to true, data will be displayed on a logarithmic axis instead of a linear one.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.xAxis[0].logarithmicScale;
logarithmicScaleBaseDefines the numerical base used for the logarithmic scale (e.g., 10 for log10, 2 for log2). This value determines how data is spaced and displayed along the logarithmic axis.number
Defines the numerical base used for the logarithmic scale (e.g., 10 for log10, 2 for log2). This value determines how data is spaced and displayed along the logarithmic axis.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.xAxis[0].logarithmicScaleBase;
maxValueSpecifies the upper limit for the values displayed on the x-axis. Data points that exceed this value will not be shown on the x-axis scale. This setting is useful for controlling the visible range of data in your chart.any
Specifies the upper limit for the values displayed on the x-axis. Data points that exceed this value will not be shown on the x-axis scale. This setting is useful for controlling the visible range of data in your chart.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.xAxis[0].maxValue;
minValueSpecifies the lowest numerical value or data point that will be displayed on the xAxis. Values on the xAxis below this minimum will not be shown in the chart. This helps define the visible range of the axis and can be used to focus on a specific section of the data.any
Specifies the lowest numerical value or data point that will be displayed on the xAxis. Values on the xAxis below this minimum will not be shown in the chart. This helps define the visible range of the axis and can be used to focus on a specific section of the data.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.xAxis[0].minValue;
paddingAn object that defines the padding settings for the axis, specifying the amount of space (in pixels or other units) to add before and after the axis line. This padding controls the distance between the axis and its surrounding elements, helping to adjust overall layout and improve visual clarity.
Click for more details. Property object's options:
object
An object that defines the padding settings for the axis, specifying the amount of space (in pixels or other units) to add before and after the axis line. This padding controls the distance between the axis and its surrounding elements, helping to adjust overall layout and improve visual clarity.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.xAxis[0].padding;
bottomSpecifies the amount of padding added to the bottom of the chart when using a horizontal xAxis. This setting creates extra space below the xAxis, which can improve the layout and prevent overlap with chart elements or labels. Only applicable when the xAxis orientation is horizontal.number
Specifies the amount of padding added to the bottom of the chart when using a horizontal xAxis. This setting creates extra space below the xAxis, which can improve the layout and prevent overlap with chart elements or labels. Only applicable when the xAxis orientation is horizontal.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.xAxis[0].padding.bottom;
leftSpecifies the amount of left padding to apply to the x-axis when it is displayed in a vertical orientation. This setting adjusts the spacing between the left edge of the chart container and the vertical x-axis, helping to improve layout and readability. Only applicable when the x-axis is configured vertically.number
Specifies the amount of left padding to apply to the x-axis when it is displayed in a vertical orientation. This setting adjusts the spacing between the left edge of the chart container and the vertical x-axis, helping to improve layout and readability. Only applicable when the x-axis is configured vertically.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.xAxis[0].padding.left;
rightSpecifies the amount of padding added to the right side of the vertical xAxis. This setting is only applicable when the xAxis is oriented vertically, allowing you to create additional space on the right edge of the axis for improved layout and readability.number
Specifies the amount of padding added to the right side of the vertical xAxis. This setting is only applicable when the xAxis is oriented vertically, allowing you to create additional space on the right edge of the axis for improved layout and readability.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.xAxis[0].padding.right;
topSpecifies the amount of padding applied to the top of the horizontal x-axis. This property allows you to add extra space above the x-axis when it is rendered horizontally.number
Specifies the amount of padding applied to the top of the horizontal x-axis. This property allows you to add extra space above the x-axis when it is rendered horizontally.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.xAxis[0].padding.top;
positionSpecifies the position of the axis on the chart. By default, you can choose either 'bottom' or 'top' for a horizontal xAxis. If the xAxis is configured to be vertical, only 'left' or 'right' positions are valid. Make sure to select a value that matches the orientation of your axis to ensure correct placement on the chart."bottom" | "top" | "left" | "right"
Specifies the position of the axis on the chart. By default, you can choose either 'bottom' or 'top' for a horizontal xAxis. If the xAxis is configured to be vertical, only 'left' or 'right' positions are valid. Make sure to select a value that matches the orientation of your axis to ensure correct placement on the chart.
Default value
"bottom"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.xAxis[0].position;
rangeSelectorDefines a range selector component for the xAxis, allowing users to interactively select and zoom into a specific data range on the chart. The range selector is implemented as a child instance of smart-chart, providing consistent functionality and style with the main chart. This enables seamless integration and synchronized data visualization between the main chart area and the range selector.
Click for more details. Property object's options:
object
Defines a range selector component for the xAxis, allowing users to interactively select and zoom into a specific data range on the chart. The range selector is implemented as a child instance of smart-chart, providing consistent functionality and style with the main chart. This enables seamless integration and synchronized data visualization between the main chart area and the range selector.
Properties
- color:string - Specifies the color used to display the grid lines. Accepts any valid CSS color value (e.g., hex, RGB, or color names).
- custom:[] | null - An array specifying the exact positions (values or offsets) where grid lines should be drawn on the chart or grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using the default automatic spacing. Each entry in the array determines a specific location for a grid line to appear.
- dashStyle:string - Specifies the dash pattern for grid lines. Use a string of comma-separated numbers, such as '2,2', where each number represents the length (in pixels or SVG units) of dashes and gaps alternately. For example, '2,2' creates a pattern of 2 pixels dashed, 2 pixels space, repeated along the grid lines.
- lineWidth:number - Specifies the thickness of the grid lines in pixels. This determines how wide each grid line appears, allowing you to control the visual prominence of the grid within the interface.
- step:number | null - Specifies the spacing between grid lines by determining how many axis unit intervals occur between each grid line. For example, a value of 1 places a grid line at every axis interval, while a value of 2 places grid lines at every second axis interval. Use this setting to control the regularity and density of grid lines along the axis.
- unitInterval:number - Specifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines appear. Adjusting this value will increase or decrease the interval at which the grid lines are drawn.
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of the grid lines:
true: All grid lines are visible.false: No grid lines are displayed.'custom': Only the grid lines specified in thegridLines.customarray are shown. Use thecustomarray to define which specific grid lines or offsets to display.
- angle:number - Specifies the angle, in degrees, to rotate the text clockwise from its default horizontal orientation. Positive values rotate the text to the right; negative values rotate it to the left.
- autoRotate:boolean - Specifies whether automatic rotation is enabled. This setting is a boolean value ('true' to enable, 'false' to disable) and is only applicable to polar and spider charts. When enabled, elements such as axis labels or data points will automatically rotate based on the chart’s configuration or data orientation.
- class:string | null - Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.
- custom:[] | null - An array specifying the exact data values or axis offsets at which labels should appear on the chart. This property only takes effect when labels.visible is set to 'custom', allowing precise control over label placement. Each entry in the array determines a position where a label will be rendered.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that allows you to customize the formatting of labels before they are displayed. This function receives the original label value as an argument and should return the formatted label string to be shown in the UI.
- formatSettings:object - Detailed object specifying the configuration options for label formatting, including properties such as font style, size, color, alignment, and text formatting behavior. This object allows you to customize how labels are displayed in the interface.
- horizontalAlignment:string - Specifies the horizontal alignment of labels (e.g., left, center, or right) within their container. This setting determines how label text is positioned along the horizontal axis.
- offset:object - Specifies the amount of spacing or displacement applied to labels relative to their default position. This can be used to adjust how far labels appear from the item or element they are associated with, improving visibility and layout.
- rotationPoint:string - Specifies the reference point or anchor coordinates about which the text will be rotated. This determines the exact position in relation to which the rotation transformation is applied to the text.
- step:number | null - Specifies the spacing between each label on the axis, measured in multiples of the axis unit interval. For example, a value of 2 places a label every 2 units, skipping one unit between each labeled point.
- unitInterval:number - Specifies the spacing between consecutive labels by defining the interval value. This determines how frequently labels are displayed along the axis, with a higher value resulting in fewer labels and a lower value showing labels more closely together.
- verticalAlignment:string - Specifies how labels are aligned vertically within their container (e.g., top, center, or bottom alignment).
- visible:boolean | string -
Possible values:
true,false,'custom'.This option controls the visibility of labels:
true: All labels are visible.false: All labels are hidden.'custom': Only labels specified in the custom array (provided separately) are displayed.
When set to
'custom', you can define specific label values or offsets to display by populating the custom array.
- bottom:number - Specifies the amount of space added to the bottom edge of an element's content area, creating padding between the content and the element's bottom border.
- left:number - Specifies the amount of space (padding) to be added to the left side of an element’s content. Adjusting this property increases or decreases the distance between the content and the element’s left edge.
- right:number - Applies padding to the right side of an element, creating space between the element’s content and its right border. The value specifies the amount of space to add.
- top:number - Sets the amount of space (padding) between the top edge of an element and its content.
seriesGroups (Optional): This property defines the configuration of all data series that are displayed within the range selector chart. Each entry within seriesGroups specifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.
For comprehensive details—including a complete list of supported subproperties and configuration examples—please refer to the main documentation entry for seriesGroups.
- bottom:number - Specifies the amount of space added to the bottom of an element’s content, creating separation between the content and the element’s bottom edge. This property helps control the vertical spacing within containers for improved layout and readability.
- left:number - Specifies the amount of space (in pixels, ems, or other CSS units) added to the left side of an element’s content, creating padding between the content and the element’s left border.
- right:number - Adds extra space to the right side of an element's content, typically used to ensure proper spacing and alignment within the layout.
- top:number - Amount of space added to the top edge of an element’s content, separating it from the element’s border.
- alternatingBackgroundColor:string - Applies alternating background colors to grid lines, creating a striped effect that improves readability and visually distinguishes each row or column within the grid.
- alternatingBackgroundColor2:string - Applies the second color option used for alternating background patterns, typically in lists, tables, or grids, to visually distinguish every other row or item. This provides contrast and improves readability by differentiating between adjacent elements.
- alternatingBackgroundOpacity:number - Defines the transparency level of the alternating background color, allowing you to adjust how visible or faded the alternating background appears. Accepts values from 0 (fully transparent) to 1 (fully opaque).
- axisSize:number | string | null - Specifies the length or dimension of the axis, determining how much space the axis occupies within the chart or graphical component. This setting affects the scale and visual layout of the axis in relation to other elements.
- bands:[] - Displays optional color bands in the chart's plot area to highlight specific value ranges or regions. These bands can be used to emphasize particular data intervals or thresholds within the chart.
- baselineValue:any - Specifies the starting reference value from which the axis is measured. This baseline determines where the axis begins, influencing how data is displayed—such as where bars or lines originate on a chart.
- customDraw:boolean - A boolean value that specifies whether the axis should be automatically rendered by the system ('true'), or if the user intends to handle axis rendering manually using provided APIs ('false').
- displayValueAxis:boolean - Indicates whether the values axis (typically representing numerical data on a chart, such as the y-axis in a bar or line chart) is visible. Set this option to true to display the values axis, or false to hide it.
- flip:boolean - Indicates if the values should be presented in the opposite sequence from their original order. When set to true, the values will be displayed from last to first; when set to false, they will appear in their default, forward order.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A user-defined function that customizes how values are displayed along the chart axis, allowing you to control the formatting (such as number precision, currency symbols, date formats, or unit labels) of each axis tick label.
- formatSettings:object - Settings that control how values are formatted and displayed along the axis, such as number formatting, date and time representation, currency symbols, and custom display patterns.
- gridLines:object - Detailed description:
Object specifying the configuration options for the grid lines displayed along the value axis. This includes properties that control the visibility, color, width, style (such as dashed or solid), and other visual aspects of the grid lines that run perpendicular to the value axis in the chart. - labels:object - An object that defines the properties and styling options for the labels displayed along the axis, including text content, font size, color, alignment, rotation, and formatting options.
- line:object - Object that defines the visual properties of the axis line, including attributes such as color, width, style (e.g., solid, dashed), and visibility. This configuration determines how the axis line is rendered on the chart.
- logarithmicScale:boolean - Specifies whether the scale should be displayed using a logarithmic transformation instead of a linear one. When enabled, data values are plotted according to a logarithmic scale, which can be useful for visualizing data with a wide range of values.
- logarithmicScaleBase:number - Specifies the base value used for the logarithmic scale (e.g., 10 for log base 10). This determines how data values are scaled and displayed along the axis when a logarithmic scale is applied.
- maxValue:any - Defines the upper limit for the valueAxis, specifying the highest data value that will be displayed along the axis. Any data points exceeding this value will be capped at this maximum.
- minValue:any - Specifies the lowest numerical value displayed on the valueAxis. Data points with values below this threshold will not be shown on the axis.
- padding:object - Object that specifies the amount of space (in pixels) to add as padding around an axis, allowing you to control the distance between the axis line and surrounding chart elements. This object typically includes properties for defining padding on each side (e.g., top, bottom, left, right).
- position:string - Determines the position of the axis on the chart. By default, for vertical axes, the available options are 'left' and 'right'. For horizontal axes (when
valueAxisis set to horizontal), only 'top' and 'bottom' are valid positions. This property controls where the axis will be rendered relative to the chart area. - type:string - "Value Axis Type" specifies the format or scale used for the value axis (y-axis) in a chart or graph. This setting determines how data values are represented and interpreted—options may include linear, logarithmic, or categorical scales, among others. Adjusting the value axis type affects how data trends and differences are visualized within the chart.
- textRotationAngle:number | null - Specifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.
- textRotationPoint:string - Defines the reference point or anchor position around which the text will be rotated. This determines the center of rotation when applying a rotation transformation to the text, affecting how and where the text pivots on the screen or canvas.
- tickMarks:object - An object that defines the properties and appearance of the tick marks displayed along the value axis, including attributes such as length, color, thickness, spacing, and visibility.
- title:object - Object that defines the configuration options for the title displayed on the value axis, including properties such as the text content, font style, alignment, and other presentation settings.
- unitInterval:number | null - Specifies the amount of space or time between individual units, determining how frequently or closely the units are placed or repeated within the sequence or layout.
- valuesOnTicks:boolean - Determines if the axis values (labels) are positioned exactly at the tick marks along the axis. When enabled, each label will appear directly aligned with its corresponding tick mark; when disabled, labels may be placed between tick marks or follow a different alignment pattern.
- visible:boolean - Controls the visibility of the value axis on the chart. When enabled, the value axis is displayed alongside the chart to indicate the scale of data values. When disabled, the axis is hidden from view.
Read the nested value:
const el = document.querySelector('smart-chart');
const rangeSelector = el.xAxis[0].rangeSelector;
backgroundColorSpecifies the background color applied to the entire range selector chart area, providing visual distinction and enhancing the chart's appearance. Accepts color values in formats such as HEX, RGB, RGBA, or color names.string | null
Specifies the background color applied to the entire range selector chart area, providing visual distinction and enhancing the chart's appearance. Accepts color values in formats such as HEX, RGB, RGBA, or color names.
Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundColor = el.xAxis[0].rangeSelector.backgroundColor;
backgroundImageSpecifies the background image to be displayed behind the range selector chart, enhancing its visual appearance. The image is positioned and sized according to the chart container’s settings.string
Specifies the background image to be displayed behind the range selector chart, enhancing its visual appearance. The image is positioned and sized according to the chart container’s settings.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const backgroundImage = el.xAxis[0].rangeSelector.backgroundImage;
baseUnitIndicates the fundamental time interval (such as day, month, or year) that is used as the smallest unit of measurement and labeling when the axis type is set to 'date'. This determines how data points are grouped, displayed, and spaced along a date-based axis.null | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"
Indicates the fundamental time interval (such as day, month, or year) that is used as the smallest unit of measurement and labeling when the axis type is set to 'date'. This determines how data points are grouped, displayed, and spaced along a date-based axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const baseUnit = el.xAxis[0].rangeSelector.baseUnit;
borderLineColorDefines the color of the border surrounding the range selector chart, allowing you to customize its appearance to match your application's design. Accepts color values in formats such as hex codes, RGB, or named colors.string | null
Defines the color of the border surrounding the range selector chart, allowing you to customize its appearance to match your application's design. Accepts color values in formats such as hex codes, RGB, or named colors.
Read the nested value:
const el = document.querySelector('smart-chart');
const borderLineColor = el.xAxis[0].rangeSelector.borderLineColor;
borderLineWidthSpecifies the thickness, in pixels, of the border line surrounding the range selector chart. Adjusting this value changes how bold or subtle the chart’s border appears.number | null
Specifies the thickness, in pixels, of the border line surrounding the range selector chart. Adjusting this value changes how bold or subtle the chart’s border appears.
Read the nested value:
const el = document.querySelector('smart-chart');
const borderLineWidth = el.xAxis[0].rangeSelector.borderLineWidth;
captionDefines the text displayed as the caption (or title) above the range selector chart, providing context or a label for the chart’s content.string
Defines the text displayed as the caption (or title) above the range selector chart, providing context or a label for the chart’s content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const caption = el.xAxis[0].rangeSelector.caption;
colorSchemeDefines the color palette used by the range selector chart. The smartChart component supports 32 predefined color schemes, which can be specified by setting the palette value to a string from 'scheme01' to 'scheme32'. This determines the set of colors applied to chart elements such as bars, lines, or pie slices in the range selector."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"
Defines the color palette used by the range selector chart. The smartChart component supports 32 predefined color schemes, which can be specified by setting the palette value to a string from 'scheme01' to 'scheme32'. This determines the set of colors applied to chart elements such as bars, lines, or pie slices in the range selector.
Default value
scheme01Read the nested value:
const el = document.querySelector('smart-chart');
const colorScheme = el.xAxis[0].rangeSelector.colorScheme;
columnSeriesOverlapDetermines whether the columns in a series are allowed to overlap each other when displayed. When enabled, multiple column series can be rendered on top of one another instead of being positioned side by side. Disabling this option ensures that each column is shown separately with no visual overlap.boolean
Determines whether the columns in a series are allowed to overlap each other when displayed. When enabled, multiple column series can be rendered on top of one another instead of being positioned side by side. Disabling this option ensures that each column is shown separately with no visual overlap.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const columnSeriesOverlap = el.xAxis[0].rangeSelector.columnSeriesOverlap;
columnsGapPercentSpecifies the percentage-based spacing between adjacent columns within the same data series. This determines how much empty space appears between columns that belong to a single series in a grouped or clustered chart.number
Specifies the percentage-based spacing between adjacent columns within the same data series. This determines how much empty space appears between columns that belong to a single series in a grouped or clustered chart.
Default value
25Read the nested value:
const el = document.querySelector('smart-chart');
const columnsGapPercent = el.xAxis[0].rangeSelector.columnsGapPercent;
dataFieldSpecifies the exact field or property within the data source from which data will be retrieved or to which data will be mapped. This reference enables the application to access, display, or manipulate data associated with that particular field.string | null
Specifies the exact field or property within the data source from which data will be retrieved or to which data will be mapped. This reference enables the application to access, display, or manipulate data associated with that particular field.
Read the nested value:
const el = document.querySelector('smart-chart');
const dataField = el.xAxis[0].rangeSelector.dataField;
descriptionSpecifies the descriptive text displayed on the range selector chart, providing context or instructions to users regarding the chart's data or functionality.string
Specifies the descriptive text displayed on the range selector chart, providing context or instructions to users regarding the chart's data or functionality.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const description = el.xAxis[0].rangeSelector.description;
formatFunctionA callback function that formats input values before they are displayed or processed. This function receives each value as an argument and should return the formatted result. Use this to customize the appearance or structure of the data values.{(value?: any, index?: number, series?: any): string}
A callback function that formats input values before they are displayed or processed. This function receives each value as an argument and should return the formatted result. Use this to customize the appearance or structure of the data values.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].rangeSelector.formatFunction;
formatSettings "Configuration options for customizing the appearance and layout of charts, including settings for colors, axes, labels, gridlines, legends, and overall styling."any
"Configuration options for customizing the appearance and layout of charts, including settings for colors, axes, labels, gridlines, legends, and overall styling."
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].rangeSelector.formatSettings;
greyScaleSpecifies whether the range selector chart should be rendered using greyscale (black, white, and shades of gray) colors instead of the default color palette. When enabled, all chart elements within the range selector—such as lines, areas, and markers—will appear in greyscale to provide a neutral visual style.boolean | null
Specifies whether the range selector chart should be rendered using greyscale (black, white, and shades of gray) colors instead of the default color palette. When enabled, all chart elements within the range selector—such as lines, areas, and markers—will appear in greyscale to provide a neutral visual style.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const greyScale = el.xAxis[0].rangeSelector.greyScale;
gridLinesAn object that defines the properties and styling options for the grid lines displayed along the x-axis of the range selector chart. This includes settings such as line color, width, dash style, and visibility, allowing customization of the appearance and behavior of the x-axis grid lines within the chart.
Click for more details. Property object's options:
object
An object that defines the properties and styling options for the grid lines displayed along the x-axis of the range selector chart. This includes settings such as line color, width, dash style, and visibility, allowing customization of the appearance and behavior of the x-axis grid lines within the chart.
Properties
Possible values: true, false, 'custom'.
This option controls the visibility of the grid lines:
true: All grid lines are visible. false: No grid lines are displayed. 'custom': Only the grid lines specified in the gridLines.custom array are shown. Use the custom array to define which specific grid lines or offsets to display.Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.xAxis[0].rangeSelector.gridLines;
colorSpecifies the color used to display the grid lines. Accepts any valid CSS color value (e.g., hex, RGB, or color names).string
Specifies the color used to display the grid lines. Accepts any valid CSS color value (e.g., hex, RGB, or color names).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].rangeSelector.gridLines[0].color;
customAn array specifying the exact positions (values or offsets) where grid lines should be drawn on the chart or grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using the default automatic spacing. Each entry in the array determines a specific location for a grid line to appear.[] | null
An array specifying the exact positions (values or offsets) where grid lines should be drawn on the chart or grid. This property is only applicable when gridLines.visible is set to 'custom', allowing you to define custom grid line placement instead of using the default automatic spacing. Each entry in the array determines a specific location for a grid line to appear.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].rangeSelector.gridLines[0].custom;
dashStyleSpecifies the dash pattern for grid lines. Use a string of comma-separated numbers, such as '2,2', where each number represents the length (in pixels or SVG units) of dashes and gaps alternately. For example, '2,2' creates a pattern of 2 pixels dashed, 2 pixels space, repeated along the grid lines.string
Specifies the dash pattern for grid lines. Use a string of comma-separated numbers, such as '2,2', where each number represents the length (in pixels or SVG units) of dashes and gaps alternately. For example, '2,2' creates a pattern of 2 pixels dashed, 2 pixels space, repeated along the grid lines.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].rangeSelector.gridLines[0].dashStyle;
lineWidthSpecifies the thickness of the grid lines in pixels. This determines how wide each grid line appears, allowing you to control the visual prominence of the grid within the interface.number
Specifies the thickness of the grid lines in pixels. This determines how wide each grid line appears, allowing you to control the visual prominence of the grid within the interface.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].rangeSelector.gridLines[0].lineWidth;
stepSpecifies the spacing between grid lines by determining how many axis unit intervals occur between each grid line. For example, a value of 1 places a grid line at every axis interval, while a value of 2 places grid lines at every second axis interval. Use this setting to control the regularity and density of grid lines along the axis.number | null
Specifies the spacing between grid lines by determining how many axis unit intervals occur between each grid line. For example, a value of 1 places a grid line at every axis interval, while a value of 2 places grid lines at every second axis interval. Use this setting to control the regularity and density of grid lines along the axis.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].rangeSelector.gridLines[0].step;
unitIntervalSpecifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines appear. Adjusting this value will increase or decrease the interval at which the grid lines are drawn.number
Specifies the distance or spacing between adjacent grid lines, determining how frequently the grid lines appear. Adjusting this value will increase or decrease the interval at which the grid lines are drawn.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
This option controls the visibility of the grid lines:
true: All grid lines are visible. false: No grid lines are displayed. 'custom': Only the grid lines specified in the gridLines.custom array are shown. Use the custom array to define which specific grid lines or offsets to display.boolean | string
true, false, 'custom'.Possible values: true, false, 'custom'.
This option controls the visibility of the grid lines:
true: All grid lines are visible.false: No grid lines are displayed.'custom': Only the grid lines specified in the gridLines.custom array are shown. Use the custom array to define which specific grid lines or offsets to display.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.gridLines[0].visible;
labelsAn object that defines the properties and configuration options for the axis labels, such as font style, size, color, rotation, alignment, and formatting. This allows for customization of how the labels appear along the chart axis.
Click for more details. Property object's options:
object
An object that defines the properties and configuration options for the axis labels, such as font style, size, color, rotation, alignment, and formatting. This allows for customization of how the labels appear along the chart axis.
Properties
- dateFormat:string | null - Specifies an optional date format string used to control how Date objects are displayed. This property only has an effect when the value being rendered is a JavaScript Date object. If provided, the format string determines the output format (for example, 'YYYY-MM-DD', 'MM/DD/YYYY', etc.); if omitted, a default date format is used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or retain for numeric values.
- decimalSeparator:string | null - A character that separates the integer portion from the fractional portion in a numeric value (for example, the dot in 12.34 or the comma in 12,34, depending on locale). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring number formats align with user locale preferences.
- negativeWithBrackets:boolean - A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to display negative numbers in brackets, or false to use the standard minus sign notation.
- prefix:string - Specifies the text that will be added to the beginning of the value, appearing before any existing content.
- sufix:string - A string that will be added to the end of the current value. This text will appear directly after the existing value when displayed or processed.
- thousandsSeparator:string | null - Specifies the character used to separate groups of thousands in large numbers (e.g., "1,000,000" or "1.000.000"). This symbol helps improve the readability of numerical values by marking the boundary between thousands, millions, billions, and so on. By default, its value is inherited from localization.thousandsSeparator, allowing adaptation to different regional formatting conventions.
Possible values: true, false, 'custom'.
This option controls the visibility of labels:
true: All labels are visible. false: All labels are hidden. 'custom': Only labels specified in the custom array (provided separately) are displayed.When set to 'custom', you can define specific label values or offsets to display by populating the custom array.
Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.xAxis[0].rangeSelector.labels;
angleSpecifies the angle, in degrees, to rotate the text clockwise from its default horizontal orientation. Positive values rotate the text to the right; negative values rotate it to the left.number
Specifies the angle, in degrees, to rotate the text clockwise from its default horizontal orientation. Positive values rotate the text to the right; negative values rotate it to the left.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.xAxis[0].rangeSelector.labels[0].angle;
autoRotateSpecifies whether automatic rotation is enabled. This setting is a boolean value ('true' to enable, 'false' to disable) and is only applicable to polar and spider charts. When enabled, elements such as axis labels or data points will automatically rotate based on the chart’s configuration or data orientation.boolean
Specifies whether automatic rotation is enabled. This setting is a boolean value ('true' to enable, 'false' to disable) and is only applicable to polar and spider charts. When enabled, elements such as axis labels or data points will automatically rotate based on the chart’s configuration or data orientation.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.xAxis[0].rangeSelector.labels[0].autoRotate;
classSpecifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.string | null
Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.xAxis[0].rangeSelector.labels[0].class;
customAn array specifying the exact data values or axis offsets at which labels should appear on the chart. This property only takes effect when labels.visible is set to 'custom', allowing precise control over label placement. Each entry in the array determines a position where a label will be rendered.[] | null
An array specifying the exact data values or axis offsets at which labels should appear on the chart. This property only takes effect when labels.visible is set to 'custom', allowing precise control over label placement. Each entry in the array determines a position where a label will be rendered.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].rangeSelector.labels[0].custom;
formatFunctionA callback function that allows you to customize the formatting of labels before they are displayed. This function receives the original label value as an argument and should return the formatted label string to be shown in the UI.{(value?: any, index?: number, series?: any): string}
A callback function that allows you to customize the formatting of labels before they are displayed. This function receives the original label value as an argument and should return the formatted label string to be shown in the UI.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].rangeSelector.labels[0].formatFunction;
formatSettingsDetailed object specifying the configuration options for label formatting, including properties such as font style, size, color, alignment, and text formatting behavior. This object allows you to customize how labels are displayed in the interface.
Click for more details. Property object's options:
object
Detailed object specifying the configuration options for label formatting, including properties such as font style, size, color, alignment, and text formatting behavior. This object allows you to customize how labels are displayed in the interface.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].rangeSelector.labels[0].formatSettings;
dateFormatSpecifies an optional date format string used to control how Date objects are displayed. This property only has an effect when the value being rendered is a JavaScript Date object. If provided, the format string determines the output format (for example, 'YYYY-MM-DD', 'MM/DD/YYYY', etc.); if omitted, a default date format is used.string | null
Specifies an optional date format string used to control how Date objects are displayed. This property only has an effect when the value being rendered is a JavaScript Date object. If provided, the format string determines the output format (for example, 'YYYY-MM-DD', 'MM/DD/YYYY', etc.); if omitted, a default date format is used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or retain for numeric values.number | null
Specifies the number of decimal places to display or retain for numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorA character that separates the integer portion from the fractional portion in a numeric value (for example, the dot in 12.34 or the comma in 12,34, depending on locale). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring number formats align with user locale preferences.string | null
A character that separates the integer portion from the fractional portion in a numeric value (for example, the dot in 12.34 or the comma in 12,34, depending on locale). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring number formats align with user locale preferences.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to display negative numbers in brackets, or false to use the standard minus sign notation.boolean
A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to display negative numbers in brackets, or false to use the standard minus sign notation.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value, appearing before any existing content.string
Specifies the text that will be added to the beginning of the value, appearing before any existing content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].prefix;
sufixA string that will be added to the end of the current value. This text will appear directly after the existing value when displayed or processed.string
A string that will be added to the end of the current value. This text will appear directly after the existing value when displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].sufix;
thousandsSeparatorSpecifies the character used to separate groups of thousands in large numbers (e.g., "1,000,000" or "1.000.000"). This symbol helps improve the readability of numerical values by marking the boundary between thousands, millions, billions, and so on. By default, its value is inherited from localization.thousandsSeparator, allowing adaptation to different regional formatting conventions.string | null
Specifies the character used to separate groups of thousands in large numbers (e.g., "1,000,000" or "1.000.000"). This symbol helps improve the readability of numerical values by marking the boundary between thousands, millions, billions, and so on. By default, its value is inherited from localization.thousandsSeparator, allowing adaptation to different regional formatting conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].rangeSelector.labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentSpecifies the horizontal alignment of labels (e.g., left, center, or right) within their container. This setting determines how label text is positioned along the horizontal axis."left" | "center" | "right"
Specifies the horizontal alignment of labels (e.g., left, center, or right) within their container. This setting determines how label text is positioned along the horizontal axis.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.xAxis[0].rangeSelector.labels[0].horizontalAlignment;
offsetSpecifies the amount of spacing or displacement applied to labels relative to their default position. This can be used to adjust how far labels appear from the item or element they are associated with, improving visibility and layout. object
Specifies the amount of spacing or displacement applied to labels relative to their default position. This can be used to adjust how far labels appear from the item or element they are associated with, improving visibility and layout.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.xAxis[0].rangeSelector.labels[0].offset;
xSpecifies the horizontal offset value, determining how far an element is shifted along the X-axis from its default position. Positive values move the element to the right; negative values move it to the left.number
Specifies the horizontal offset value, determining how far an element is shifted along the X-axis from its default position. Positive values move the element to the right; negative values move it to the left.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.xAxis[0].rangeSelector.labels[0].offset.x;
ySpecifies the amount by which an element is shifted vertically from its original position. Positive values move the element downward, while negative values move it upward.number
Specifies the amount by which an element is shifted vertically from its original position. Positive values move the element downward, while negative values move it upward.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.xAxis[0].rangeSelector.labels[0].offset.y;
rotationPointSpecifies the reference point or anchor coordinates about which the text will be rotated. This determines the exact position in relation to which the rotation transformation is applied to the text."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the reference point or anchor coordinates about which the text will be rotated. This determines the exact position in relation to which the rotation transformation is applied to the text.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.xAxis[0].rangeSelector.labels[0].rotationPoint;
stepSpecifies the spacing between each label on the axis, measured in multiples of the axis unit interval. For example, a value of 2 places a label every 2 units, skipping one unit between each labeled point.number | null
Specifies the spacing between each label on the axis, measured in multiples of the axis unit interval. For example, a value of 2 places a label every 2 units, skipping one unit between each labeled point.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].rangeSelector.labels[0].step;
unitIntervalSpecifies the spacing between consecutive labels by defining the interval value. This determines how frequently labels are displayed along the axis, with a higher value resulting in fewer labels and a lower value showing labels more closely together.number
Specifies the spacing between consecutive labels by defining the interval value. This determines how frequently labels are displayed along the axis, with a higher value resulting in fewer labels and a lower value showing labels more closely together.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.labels[0].unitInterval;
verticalAlignmentSpecifies how labels are aligned vertically within their container (e.g., top, center, or bottom alignment)."top" | "center" | "bottom"
Specifies how labels are aligned vertically within their container (e.g., top, center, or bottom alignment).
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.xAxis[0].rangeSelector.labels[0].verticalAlignment;
visiblePossible values: true, false, 'custom'.
This option controls the visibility of labels:
true: All labels are visible. false: All labels are hidden. 'custom': Only labels specified in the custom array (provided separately) are displayed.When set to 'custom', you can define specific label values or offsets to display by populating the custom array.
boolean | string
true, false, 'custom'.'custom', you can define specific label values or offsets to display by populating the custom array.Possible values: true, false, 'custom'.
This option controls the visibility of labels:
true: All labels are visible.false: All labels are hidden.'custom': Only labels specified in the custom array (provided separately) are displayed.When set to 'custom', you can define specific label values or offsets to display by populating the custom array.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.labels[0].visible;
maxValueSpecifies the highest allowable value on the x-axis of the range selector chart, effectively defining the upper limit of the selectable data range displayed in the chart.any
Specifies the highest allowable value on the x-axis of the range selector chart, effectively defining the upper limit of the selectable data range displayed in the chart.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.xAxis[0].rangeSelector.maxValue;
minValueSpecifies the lowest allowable value on the xAxis of the range selector chart, effectively setting the starting point for the selectable range. This determines the minimum data value users can select or view within the chart’s range selector component.any
Specifies the lowest allowable value on the xAxis of the range selector chart, effectively setting the starting point for the selectable range. This determines the minimum data value users can select or view within the chart’s range selector component.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.xAxis[0].rangeSelector.minValue;
paddingDescribes the padding settings for the range selector chart, specifying the amount of space (in pixels or other units) between the chart’s content and its outer edges. This object allows developers to control the spacing on each side (top, right, bottom, and left) of the range selector, ensuring proper layout and visual separation within the chart area.
Click for more details. Property object's options:
object
Describes the padding settings for the range selector chart, specifying the amount of space (in pixels or other units) between the chart’s content and its outer edges. This object allows developers to control the spacing on each side (top, right, bottom, and left) of the range selector, ensuring proper layout and visual separation within the chart area.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.xAxis[0].rangeSelector.padding;
bottomSpecifies the amount of space added to the bottom edge of an element's content area, creating padding between the content and the element's bottom border.number
Specifies the amount of space added to the bottom edge of an element's content area, creating padding between the content and the element's bottom border.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.xAxis[0].rangeSelector.padding.bottom;
leftSpecifies the amount of space (padding) to be added to the left side of an element’s content. Adjusting this property increases or decreases the distance between the content and the element’s left edge.number
Specifies the amount of space (padding) to be added to the left side of an element’s content. Adjusting this property increases or decreases the distance between the content and the element’s left edge.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.xAxis[0].rangeSelector.padding.left;
rightApplies padding to the right side of an element, creating space between the element’s content and its right border. The value specifies the amount of space to add.number
Applies padding to the right side of an element, creating space between the element’s content and its right border. The value specifies the amount of space to add.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.xAxis[0].rangeSelector.padding.right;
topSets the amount of space (padding) between the top edge of an element and its content.number
Sets the amount of space (padding) between the top edge of an element and its content.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.xAxis[0].rangeSelector.padding.top;
positionDefines the position of the range selector chart within the component. This property allows you to specify where the range selector appears (e.g., top, bottom, left, or right) in relation to the main chart, enabling better layout customization and user interface control."bottom" | "top" | "left" | "right"
Defines the position of the range selector chart within the component. This property allows you to specify where the range selector appears (e.g., top, bottom, left, or right) in relation to the main chart, enabling better layout customization and user interface control.
Default value
leftRead the nested value:
const el = document.querySelector('smart-chart');
const position = el.xAxis[0].rangeSelector.position;
renderToSpecifies the external HTML element where the range selector chart will be rendered, instead of displaying it within the main chart container. This allows you to place the range selector in a custom location on the page outside of the primary chart area.HTMLElement | null
Specifies the external HTML element where the range selector chart will be rendered, instead of displaying it within the main chart container. This allows you to place the range selector in a custom location on the page outside of the primary chart area.
Read the nested value:
const el = document.querySelector('smart-chart');
const renderTo = el.xAxis[0].rangeSelector.renderTo;
rightToLeftGets or sets a boolean value that determines whether the layout of the range selector chart is displayed in a mirrored (reversed) orientation. When set to true, the chart's elements such as axes, labels, and data series are rendered as a mirror image of the default layout. When set to false, the standard layout is used.boolean | null
Gets or sets a boolean value that determines whether the layout of the range selector chart is displayed in a mirrored (reversed) orientation. When set to true, the chart's elements such as axes, labels, and data series are rendered as a mirror image of the default layout. When set to false, the standard layout is used.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const rightToLeft = el.xAxis[0].rangeSelector.rightToLeft;
seriesGapPercentSpecifies the percentage-based spacing between columns that represent different data series, ensuring visual separation between series in a grouped column or bar chart.number
Specifies the percentage-based spacing between columns that represent different data series, ensuring visual separation between series in a grouped column or bar chart.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const seriesGapPercent = el.xAxis[0].rangeSelector.seriesGapPercent;
seriesGroupsseriesGroups (Optional): This property defines the configuration of all data series that are displayed within the range selector chart. Each entry within seriesGroups specifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.
For comprehensive details—including a complete list of supported subproperties and configuration examples—please refer to the main documentation entry for seriesGroups.
[] | null
seriesGroups specifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.seriesGroups (Optional): This property defines the configuration of all data series that are displayed within the range selector chart. Each entry within seriesGroups specifies a group of series, including their types, data fields, rendering settings, and any group-specific options such as axes configuration or aggregation methods.
For comprehensive details—including a complete list of supported subproperties and configuration examples—please refer to the main documentation entry for seriesGroups.
Read the nested value:
const el = document.querySelector('smart-chart');
const seriesGroups = el.xAxis[0].rangeSelector.seriesGroups;
serieTypeSpecifies the chart type used for the range selector in smartChart. smartChart supports a wide variety of standard chart types, allowing you to visually represent different kinds of data. You can display multiple series with different types on the same chart by specifying a type for each series group. Choosing the appropriate chart type enables you to best convey your data's meaning.Below is a comprehensive list of supported chart types in smartChart:'Column and Bar Charts'- 'column': Displays simple vertical columns for each data point.- 'stackedcolumn': Stacked vertical columns representing cumulative values.- 'stackedcolumn100': Stacked columns where the height reflects percentage contributions (100%).- 'rangecolumn': Columns that float between two values, visualizing value ranges.'Line and Area Charts'- 'line': Connects data points with straight lines.- 'stackedline': Stacks multiple line series, showing cumulative totals.- 'stackedline100': Stacked line with percentage contributions.- 'spline': Connects data points with smooth, curved lines.- 'stackedspline': Stacked smooth lines for cumulative totals.- 'stackedspline100': Stacked smooth lines showing percentage contributions.- 'stepline': Step-like straight lines connecting data points.- 'stackedstepline': Stacked step lines for cumulative data.- 'stackedstepline100': Stacked step lines as percentages.'Area Charts'- 'area': Fills the area beneath straight lines connecting data points.- 'stackedarea': Areas are stacked to show cumulative values.- 'stackedarea100': Stacked areas scaled to 100% totals.- 'rangearea': Shows a floating area between pairs of value points.- 'splinearea': Fills the area beneath a smooth spline line.- 'stackedsplinearea': Stacked smooth areas for cumulative visualization.- 'stackedsplinearea100': Stacked smooth areas as percentages.- 'splinerangearea': Smooth, floating area between value pairs.- 'steparea': Step-like filled area.- 'stackedsteparea': Cumulative, stacked step areas.- 'stackedsteparea100': Stacked step areas scaled to 100%.- 'steprangearea': Step-shaped floating area between value pairs.'Waterfall Charts'- 'waterfall': Visualizes cumulative effects of sequential positive and negative values.- 'stackedwaterfall': Stacked waterfall series for multi-category measures.'Pie and Donut Charts'- 'pie': Circular chart divided into sectors, illustrating the relative proportions of each category.- 'donut': Similar to a pie chart, but with a hollow center, differentiating inner and outer radii.'Scatter and Bubble Charts'- 'scatter': Displays individual data points as unconnected dots.- 'stackedscatter': Stacked scatter points for cumulative values.- 'stackedscatter100': Scatter points stacked and scaled as percentages.- 'bubble': Represents data points as circles (bubbles) with varying sizes.- 'stackedbubble': Stacked bubble series.- 'stackedbubble100': Bubbles showing percentage stacking.'Stock Charts'- 'candlestick': Illustrates stock OHLC (open, high, low, close) data as candlesticks.- 'ohlc': Displays stock OHLC data as bars without color-filled bodies.'Notes:'- Each series group in your chart must specify its own type.- Selecting the correct chart type helps emphasize trends, patterns, or proportions relevant to your data.For more details, refer to the smartChart documentation on series types and their specific configurations."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"
Specifies the chart type used for the range selector in smartChart. smartChart supports a wide variety of standard chart types, allowing you to visually represent different kinds of data. You can display multiple series with different types on the same chart by specifying a type for each series group. Choosing the appropriate chart type enables you to best convey your data's meaning.
Below is a comprehensive list of supported chart types in smartChart:
'Column and Bar Charts'
- 'column': Displays simple vertical columns for each data point.
- 'stackedcolumn': Stacked vertical columns representing cumulative values.
- 'stackedcolumn100': Stacked columns where the height reflects percentage contributions (100%).
- 'rangecolumn': Columns that float between two values, visualizing value ranges.
'Line and Area Charts'
- 'line': Connects data points with straight lines.
- 'stackedline': Stacks multiple line series, showing cumulative totals.
- 'stackedline100': Stacked line with percentage contributions.
- 'spline': Connects data points with smooth, curved lines.
- 'stackedspline': Stacked smooth lines for cumulative totals.
- 'stackedspline100': Stacked smooth lines showing percentage contributions.
- 'stepline': Step-like straight lines connecting data points.
- 'stackedstepline': Stacked step lines for cumulative data.
- 'stackedstepline100': Stacked step lines as percentages.
'Area Charts'
- 'area': Fills the area beneath straight lines connecting data points.
- 'stackedarea': Areas are stacked to show cumulative values.
- 'stackedarea100': Stacked areas scaled to 100% totals.
- 'rangearea': Shows a floating area between pairs of value points.
- 'splinearea': Fills the area beneath a smooth spline line.
- 'stackedsplinearea': Stacked smooth areas for cumulative visualization.
- 'stackedsplinearea100': Stacked smooth areas as percentages.
- 'splinerangearea': Smooth, floating area between value pairs.
- 'steparea': Step-like filled area.
- 'stackedsteparea': Cumulative, stacked step areas.
- 'stackedsteparea100': Stacked step areas scaled to 100%.
- 'steprangearea': Step-shaped floating area between value pairs.
'Waterfall Charts'
- 'waterfall': Visualizes cumulative effects of sequential positive and negative values.
- 'stackedwaterfall': Stacked waterfall series for multi-category measures.
'Pie and Donut Charts'
- 'pie': Circular chart divided into sectors, illustrating the relative proportions of each category.
- 'donut': Similar to a pie chart, but with a hollow center, differentiating inner and outer radii.
'Scatter and Bubble Charts'
- 'scatter': Displays individual data points as unconnected dots.
- 'stackedscatter': Stacked scatter points for cumulative values.
- 'stackedscatter100': Scatter points stacked and scaled as percentages.
- 'bubble': Represents data points as circles (bubbles) with varying sizes.
- 'stackedbubble': Stacked bubble series.
- 'stackedbubble100': Bubbles showing percentage stacking.
'Stock Charts'
- 'candlestick': Illustrates stock OHLC (open, high, low, close) data as candlesticks.
- 'ohlc': Displays stock OHLC data as bars without color-filled bodies.
'Notes:'
- Each series group in your chart must specify its own type.
- Selecting the correct chart type helps emphasize trends, patterns, or proportions relevant to your data.
For more details, refer to the smartChart documentation on series types and their specific configurations.
Default value
areaRead the nested value:
const el = document.querySelector('smart-chart');
const serieType = el.xAxis[0].rangeSelector.serieType;
showBorderLineSpecifies whether a border line should be displayed around the range selector chart. When set to true, a visible border is rendered outlining the range selector; when set to false, no border is shown.boolean | null
Specifies whether a border line should be displayed around the range selector chart. When set to true, a visible border is rendered outlining the range selector; when set to false, no border is shown.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const showBorderLine = el.xAxis[0].rangeSelector.showBorderLine;
sizeDefines the dimensions (width and height) of the range selector chart, controlling how large or small the range selector appears within the user interface. Adjusting this setting allows you to customize the overall size to fit your layout requirements.number | null
Defines the dimensions (width and height) of the range selector chart, controlling how large or small the range selector appears within the user interface. Adjusting this setting allows you to customize the overall size to fit your layout requirements.
Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.xAxis[0].rangeSelector.size;
skipOverlappingPointsSpecifies whether overlapping data points should be visually displayed in column, OHLC, and candlestick series. When enabled, multiple data points that share the same position on the x-axis will be shown together, allowing for accurate representation of overlapping values in these chart types.boolean
Specifies whether overlapping data points should be visually displayed in column, OHLC, and candlestick series. When enabled, multiple data points that share the same position on the x-axis will be shown together, allowing for accurate representation of overlapping values in these chart types.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const skipOverlappingPoints = el.xAxis[0].rangeSelector.skipOverlappingPoints;
titlePaddingSpecifies the amount of padding (space) around the chart’s title (caption), controlling the distance between the title text and the chart’s edges. This property allows you to adjust the visual spacing to improve readability and appearance.
Click for more details. Property object's options:
object
Specifies the amount of padding (space) around the chart’s title (caption), controlling the distance between the title text and the chart’s edges. This property allows you to adjust the visual spacing to improve readability and appearance.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const titlePadding = el.xAxis[0].rangeSelector.titlePadding;
bottomSpecifies the amount of space added to the bottom of an element’s content, creating separation between the content and the element’s bottom edge. This property helps control the vertical spacing within containers for improved layout and readability.number
Specifies the amount of space added to the bottom of an element’s content, creating separation between the content and the element’s bottom edge. This property helps control the vertical spacing within containers for improved layout and readability.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.xAxis[0].rangeSelector.titlePadding.bottom;
leftSpecifies the amount of space (in pixels, ems, or other CSS units) added to the left side of an element’s content, creating padding between the content and the element’s left border.number
Specifies the amount of space (in pixels, ems, or other CSS units) added to the left side of an element’s content, creating padding between the content and the element’s left border.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.xAxis[0].rangeSelector.titlePadding.left;
rightAdds extra space to the right side of an element's content, typically used to ensure proper spacing and alignment within the layout.number
Adds extra space to the right side of an element's content, typically used to ensure proper spacing and alignment within the layout.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.xAxis[0].rangeSelector.titlePadding.right;
topAmount of space added to the top edge of an element’s content, separating it from the element’s border.number
Amount of space added to the top edge of an element’s content, separating it from the element’s border.
Default value
5Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.xAxis[0].rangeSelector.titlePadding.top;
unitIntervalSpecifies the amount of space or time between each individual unit, determining how far apart the units are from one another. This interval can be defined in various units (such as pixels, seconds, etc.) depending on the context, and directly affects the layout, spacing, or timing between consecutive units.number | null
Specifies the amount of space or time between each individual unit, determining how far apart the units are from one another. This interval can be defined in various units (such as pixels, seconds, etc.) depending on the context, and directly affects the layout, spacing, or timing between consecutive units.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.unitInterval;
valueAxisAn object that defines configuration options for the y-axis (value axis) of the range selector chart, including properties such as axis limits, scaling, labels, grid lines, and other display settings.
Click for more details. Property object's options:
object
An object that defines configuration options for the y-axis (value axis) of the range selector chart, including properties such as axis limits, scaling, labels, grid lines, and other display settings.
Properties
- 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.
- dateFormat:string | null - Specifies an optional string pattern for formatting dates. This property is used exclusively when rendering values of type Date, allowing you to customize how the date appears (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If not provided, a default date format will be used.
- decimalPlaces:number | null - Specifies the number of digits to display after the decimal point for numeric values.
- decimalSeparator:string | null - A character used to separate the integer portion of a numeric value from its fractional part (for example, the period in "123.45" or the comma in "123,45"). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring the format aligns with the current locale's numeric conventions.
- negativeWithBrackets:boolean - A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., "(123)" instead of "-123"). When set to true, negative values will appear with brackets; when set to false, the standard minus sign notation will be used.
- prefix:string - Specifies the text that will be added to the beginning of the value. This text appears before the existing content whenever the value is displayed or processed.
- sufix:string - Specifies the text string that will be added to the end of the current value. This appended text will appear immediately after the original value when displayed or processed.
- thousandsSeparator:string | null - A character or symbol used to separate groups of digits in large numbers, typically placed between thousands, millions, billions, and higher-order values for improved readability (e.g., "1,000,000"). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the user's regional or language settings.
- color:string - Specifies the color used to render the grid lines in the component. Accepts any valid CSS color format (e.g., hex, rgb, rgba, named colors).
- custom:[] | null - Specifies an array of custom values or offsets indicating the exact positions where grid lines should be rendered. This setting takes effect only when
gridLines.visibleis set to 'custom', allowing precise control over the placement of each grid line within the grid. - dashStyle:string - Specifies the dash pattern for grid lines using a string of comma-separated numbers. For example, '2,2' creates a dashed line with segments of 2 pixels filled, then 2 pixels of space. Adjust the numbers to customize the length of the dashes and gaps.
- lineWidth:number - Specifies the thickness of the grid lines in pixels. This determines how wide each grid line appears on the display.
- step:number | null - Specifies the number of unit intervals between each grid line. This determines how frequently grid lines are placed along the axis, with value 1 placing a line at every unit interval, value 2 at every second interval, and so on. The value should be an integer multiple of the axis unit interval.
- unitInterval:number - Specifies the distance or spacing between adjacent grid lines, determining how frequently the lines appear on the grid. Increasing this value will space the grid lines further apart, while decreasing it will make them closer together.
- visible:boolean | string -
Possible values:
true,false,'custom'.This property controls the visibility of grid lines in the component:
true: All grid lines are displayed.false: No grid lines are displayed.'custom': Only the grid lines specified in thegridLines.customarray are displayed. Use this option to define custom positions or offsets for visible grid lines.
- angle:number - Specifies the angle, in degrees, by which the text is rotated clockwise relative to its default horizontal orientation.
- autoRotate:boolean - Specifies whether automatic rotation is enabled (true or false). This setting applies exclusively to polar and spider charts, controlling whether elements such as axis labels or data points automatically rotate based on the chart's orientation.
- class:string | null - Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.
- custom:[] | null - An array specifying the exact values or offsets at which labels will be displayed along the axis. This property is only effective when labels.visible is set to 'custom', allowing you to manually define the positions of each label instead of using automatically calculated intervals.
- formatFunction:{(value?: any, index?: number, series?: any): string} - A callback function that customizes how labels are displayed by formatting their text or appearance. This function receives the label data as input and returns the formatted label, allowing you to control the content, style, or structure of each label dynamically.
- formatSettings:object - Object detailing the configuration options for label formatting, including properties such as font style, size, color, alignment, and other visual presentation settings.
- horizontalAlignment:string - Specifies the alignment of labels along the horizontal axis (e.g., left, center, or right). This determines how text labels are positioned horizontally within their container or relative to the associated element.
- offset:object - Specifies the amount of space (offset) between the labels and their associated elements, allowing you to adjust the labels’ position for better visual alignment or spacing within the layout.
- rotationPoint:string - Specifies the reference point or anchor position around which the text will be rotated. This determines the center of rotation for the text transformation.
- step:number | null - Specifies the number of axis unit intervals between each label placement. The value determines how many unit intervals to skip before placing the next label, allowing you to control the spacing of labels along the axis. For example, a value of 2 places a label at every second interval, increasing the distance between labels.
- unitInterval:number - Specifies the spacing or distance between consecutive labels, determining how often labels appear along the axis or within the component. Adjusting this value controls the frequency or gap between each label displayed.
- verticalAlignment:string - Aligns the position of labels vertically within their container, allowing you to specify whether labels are positioned at the top, center, bottom, or stretched to fill the available vertical space.
- visible:boolean | string -
Possible Values:
true,false,'custom'.Controls the visibility of labels:
true: All labels are visible.false: No labels are shown.'custom': Only specific labels are displayed, based on the custom array you provide. In this mode, the component will render labels only at the custom values or offsets specified in the custom array.
- color:string - Specifies the color used to render the axis line, allowing customization of the axis appearance to match the chart's design or branding. Accepts any valid CSS color value (e.g., hex, RGB, or color name).
- dashStyle:string - Specifies the pattern of dashes and gaps used to render the line, such as '2,2' for a sequence of 2-pixel dash followed by a 2-pixel gap. By default, this value is inherited from the gridLines configuration.
dashStyle - lineWidth:number - Specifies the width of the line, in pixels. By default, this value is inherited from the gridLines.lineWidth setting unless explicitly defined.
- visible:boolean - A Boolean value that specifies whether the axis line is displayed ('true') or hidden ('false') on the chart.
- bottom:number - Sets the amount of space (in pixels) added to the bottom of the chart when using a horizontal value axis. This padding ensures that chart elements do not touch or overlap the lower edge, improving readability and layout. This property applies only when the valueAxis is oriented horizontally.
- left:number - Amount of space added to the left side of the vertical value axis. This padding adjusts the distance between the axis and the edge of the chart, helping to improve readability and layout. Only applicable when configuring a vertical valueAxis.
- right:number - Specifies the amount of padding to add to the right side of the vertical value axis. This setting allows you to adjust spacing between the axis labels or line and the edge of the chart, improving readability and layout. Only applicable to vertical value axes.
- top:number - Top padding for the value axis, applied only when the axis orientation is horizontal. This setting adds space above the value axis to improve layout and readability.
valueAxis is set to horizontal), only 'top' and 'bottom' are valid positions. This property controls where the axis will be rendered relative to the chart area.- color:string - Specifies the color used to render the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex code, RGB, or color name).
- custom:[] | null - An array specifying the exact values or offsets at which tick marks should be displayed along the axis. This property is only relevant when tickMarks.visible is set to 'custom', allowing you to define custom tick mark positions instead of using automatically generated intervals.
- dashStyle:string - Specifies the dash pattern for tick marks using a string of numbers, such as '2,2'. Each number represents the length (in pixels) of dashes and gaps, alternating throughout the tick mark—for example, '2,2' creates a dashed line with 2 pixels of dash followed by 2 pixels of space, repeating along the tick.
- lineWidth:number - Specifies the thickness of the tick marks in pixels. This value determines how wide or narrow each tick mark will appear on the line or axis.
- size:number - Specifies the length of each tick mark in pixels, determining how long the tick marks appear on the axis or scale.
- step:number | null - Specifies the number of axis unit intervals between each tick mark; determines how frequently tick marks are placed along the axis (e.g., a value of 2 places tick marks at every second axis unit).
- unitInterval:number - Specifies the distance or value between consecutive tick marks on the axis. This determines how frequently tick marks appear, affecting the granularity and readability of the axis scale.
- visible:boolean | string - Possible values:
true,false,'custom'.
Controls the visibility of tick marks on the component:true: All default tick marks are displayed.false: No tick marks are displayed.'custom': Only tick marks specified in thetickMarks.customarray are displayed, allowing you to define your own custom values or positions for the tick marks.
- class:string | null - Specifies the CSS class name(s) to be applied to the title text element for custom styling.
- horizontalAlignment:string - Specifies the horizontal alignment of an element’s content, such as aligning text, images, or other components to the left, center, or right within its container.
- text:string - The main heading or title text that represents the content or subject of the page, section, or item.
- verticalAlignment:string - Specifies the vertical alignment of an element’s content within its container. This property determines whether the content appears at the top, middle, bottom, or a specified baseline of the container, affecting the overall layout and readability.
- visible:boolean - A boolean value that specifies whether the title should be visible (true) or hidden (false) in the user interface.
Read the nested value:
const el = document.querySelector('smart-chart');
const valueAxis = el.xAxis[0].rangeSelector.valueAxis;
alternatingBackgroundColorApplies alternating background colors to grid lines, creating a striped effect that improves readability and visually distinguishes each row or column within the grid.string
Applies alternating background colors to grid lines, creating a striped effect that improves readability and visually distinguishes each row or column within the grid.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor = el.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor;
alternatingBackgroundColor2Applies the second color option used for alternating background patterns, typically in lists, tables, or grids, to visually distinguish every other row or item. This provides contrast and improves readability by differentiating between adjacent elements.string
Applies the second color option used for alternating background patterns, typically in lists, tables, or grids, to visually distinguish every other row or item. This provides contrast and improves readability by differentiating between adjacent elements.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundColor2 = el.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundColor2;
alternatingBackgroundOpacityDefines the transparency level of the alternating background color, allowing you to adjust how visible or faded the alternating background appears. Accepts values from 0 (fully transparent) to 1 (fully opaque).number
Defines the transparency level of the alternating background color, allowing you to adjust how visible or faded the alternating background appears. Accepts values from 0 (fully transparent) to 1 (fully opaque).
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const alternatingBackgroundOpacity = el.xAxis[0].rangeSelector.valueAxis[0].alternatingBackgroundOpacity;
axisSizeSpecifies the length or dimension of the axis, determining how much space the axis occupies within the chart or graphical component. This setting affects the scale and visual layout of the axis in relation to other elements.number | string | null
Specifies the length or dimension of the axis, determining how much space the axis occupies within the chart or graphical component. This setting affects the scale and visual layout of the axis in relation to other elements.
Read the nested value:
const el = document.querySelector('smart-chart');
const axisSize = el.xAxis[0].rangeSelector.valueAxis[0].axisSize;
bandsDisplays optional color bands in the chart's plot area to highlight specific value ranges or regions. These bands can be used to emphasize particular data intervals or thresholds within the chart.
Click for more details. Property object's options:
[]
Displays optional color bands in the chart's plot area to highlight specific value ranges or regions. These bands can be used to emphasize particular data intervals or thresholds within the chart.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const bands = el.xAxis[0].rangeSelector.valueAxis[0].bands;
colorColor used to fill the area between the minValue and the maxValue.string | null
Color used to fill the area between the minValue and the maxValue.
Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].color;
dashStyleDash style of the band lines. The style is a series of numbers indicating line length followed by space length.string | null
Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].dashStyle;
lineColorBand line color.string | null
Band line color.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineColor = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineColor;
lineWidthBand line width.string | null
Band line width.
Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].lineWidth;
maxValueEnd value of the color band.any
End value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].maxValue;
minValueStart value of the color band.any
Start value of the color band.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].minValue;
opacityFraction indicating the fill opacity.number
Fraction indicating the fill opacity.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const opacity = el.xAxis[0].rangeSelector.valueAxis[0].bands[0].opacity;
baselineValueSpecifies the starting reference value from which the axis is measured. This baseline determines where the axis begins, influencing how data is displayed—such as where bars or lines originate on a chart.any
Specifies the starting reference value from which the axis is measured. This baseline determines where the axis begins, influencing how data is displayed—such as where bars or lines originate on a chart.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const baselineValue = el.xAxis[0].rangeSelector.valueAxis[0].baselineValue;
customDrawA boolean value that specifies whether the axis should be automatically rendered by the system ('true'), or if the user intends to handle axis rendering manually using provided APIs ('false').boolean
A boolean value that specifies whether the axis should be automatically rendered by the system ('true'), or if the user intends to handle axis rendering manually using provided APIs ('false').
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const customDraw = el.xAxis[0].rangeSelector.valueAxis[0].customDraw;
displayValueAxisIndicates whether the values axis (typically representing numerical data on a chart, such as the y-axis in a bar or line chart) is visible. Set this option to true to display the values axis, or false to hide it.boolean
Indicates whether the values axis (typically representing numerical data on a chart, such as the y-axis in a bar or line chart) is visible. Set this option to true to display the values axis, or false to hide it.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const displayValueAxis = el.xAxis[0].rangeSelector.valueAxis[0].displayValueAxis;
flipIndicates if the values should be presented in the opposite sequence from their original order. When set to true, the values will be displayed from last to first; when set to false, they will appear in their default, forward order.boolean
Indicates if the values should be presented in the opposite sequence from their original order. When set to true, the values will be displayed from last to first; when set to false, they will appear in their default, forward order.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const flip = el.xAxis[0].rangeSelector.valueAxis[0].flip;
formatFunctionA user-defined function that customizes how values are displayed along the chart axis, allowing you to control the formatting (such as number precision, currency symbols, date formats, or unit labels) of each axis tick label.{(value?: any, index?: number, series?: any): string}
A user-defined function that customizes how values are displayed along the chart axis, allowing you to control the formatting (such as number precision, currency symbols, date formats, or unit labels) of each axis tick label.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].rangeSelector.valueAxis[0].formatFunction;
formatSettingsSettings that control how values are formatted and displayed along the axis, such as number formatting, date and time representation, currency symbols, and custom display patterns.
Click for more details. Property object's options:
object
Settings that control how values are formatted and displayed along the axis, such as number formatting, date and time representation, currency symbols, and custom display patterns.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings;
dateFormatSpecifies an optional string pattern for formatting dates. This property is used exclusively when rendering values of type Date, allowing you to customize how the date appears (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If not provided, a default date format will be used.string | null
Specifies an optional string pattern for formatting dates. This property is used exclusively when rendering values of type Date, allowing you to customize how the date appears (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY'). If not provided, a default date format will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of digits to display after the decimal point for numeric values.number | null
Specifies the number of digits to display after the decimal point for numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalPlaces;
decimalSeparatorA character used to separate the integer portion of a numeric value from its fractional part (for example, the period in "123.45" or the comma in "123,45"). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring the format aligns with the current locale's numeric conventions.string | null
A character used to separate the integer portion of a numeric value from its fractional part (for example, the period in "123.45" or the comma in "123,45"). By default, this symbol is determined by the localization.decimalSeparator setting, ensuring the format aligns with the current locale's numeric conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., "(123)" instead of "-123"). When set to true, negative values will appear with brackets; when set to false, the standard minus sign notation will be used.boolean
A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., "(123)" instead of "-123"). When set to true, negative values will appear with brackets; when set to false, the standard minus sign notation will be used.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value. This text appears before the existing content whenever the value is displayed or processed.string
Specifies the text that will be added to the beginning of the value. This text appears before the existing content whenever the value is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].prefix;
sufixSpecifies the text string that will be added to the end of the current value. This appended text will appear immediately after the original value when displayed or processed.string
Specifies the text string that will be added to the end of the current value. This appended text will appear immediately after the original value when displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].sufix;
thousandsSeparatorA character or symbol used to separate groups of digits in large numbers, typically placed between thousands, millions, billions, and higher-order values for improved readability (e.g., "1,000,000"). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the user's regional or language settings.string | null
A character or symbol used to separate groups of digits in large numbers, typically placed between thousands, millions, billions, and higher-order values for improved readability (e.g., "1,000,000"). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the user's regional or language settings.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].rangeSelector.valueAxis[0].formatSettings[0].thousandsSeparator;
gridLinesDetailed description: Object specifying the configuration options for the grid lines displayed along the value axis. This includes properties that control the visibility, color, width, style (such as dashed or solid), and other visual aspects of the grid lines that run perpendicular to the value axis in the chart.
Click for more details. Property object's options:
object
Detailed description:
Object specifying the configuration options for the grid lines displayed along the value axis. This includes properties that control the visibility, color, width, style (such as dashed or solid), and other visual aspects of the grid lines that run perpendicular to the value axis in the chart.
Properties
gridLines.visible is set to 'custom', allowing precise control over the placement of each grid line within the grid.Possible values: true, false, 'custom'.
This property controls the visibility of grid lines in the component:
true: All grid lines are displayed. false: No grid lines are displayed. 'custom': Only the grid lines specified in the gridLines.custom array are displayed. Use this option to define custom positions or offsets for visible grid lines.Read the nested value:
const el = document.querySelector('smart-chart');
const gridLines = el.xAxis[0].rangeSelector.valueAxis[0].gridLines;
colorSpecifies the color used to render the grid lines in the component. Accepts any valid CSS color format (e.g., hex, rgb, rgba, named colors).string
Specifies the color used to render the grid lines in the component. Accepts any valid CSS color format (e.g., hex, rgb, rgba, named colors).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].color;
customSpecifies an array of custom values or offsets indicating the exact positions where grid lines should be rendered. This setting takes effect only when gridLines.visible is set to 'custom', allowing precise control over the placement of each grid line within the grid.[] | null
Specifies an array of custom values or offsets indicating the exact positions where grid lines should be rendered. This setting takes effect only when gridLines.visible is set to 'custom', allowing precise control over the placement of each grid line within the grid.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].custom;
dashStyleSpecifies the dash pattern for grid lines using a string of comma-separated numbers. For example, '2,2' creates a dashed line with segments of 2 pixels filled, then 2 pixels of space. Adjust the numbers to customize the length of the dashes and gaps.string
Specifies the dash pattern for grid lines using a string of comma-separated numbers. For example, '2,2' creates a dashed line with segments of 2 pixels filled, then 2 pixels of space. Adjust the numbers to customize the length of the dashes and gaps.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].dashStyle;
lineWidthSpecifies the thickness of the grid lines in pixels. This determines how wide each grid line appears on the display.number
Specifies the thickness of the grid lines in pixels. This determines how wide each grid line appears on the display.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].lineWidth;
stepSpecifies the number of unit intervals between each grid line. This determines how frequently grid lines are placed along the axis, with value 1 placing a line at every unit interval, value 2 at every second interval, and so on. The value should be an integer multiple of the axis unit interval.number | null
Specifies the number of unit intervals between each grid line. This determines how frequently grid lines are placed along the axis, with value 1 placing a line at every unit interval, value 2 at every second interval, and so on. The value should be an integer multiple of the axis unit interval.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].step;
unitIntervalSpecifies the distance or spacing between adjacent grid lines, determining how frequently the lines appear on the grid. Increasing this value will space the grid lines further apart, while decreasing it will make them closer together.number
Specifies the distance or spacing between adjacent grid lines, determining how frequently the lines appear on the grid. Increasing this value will space the grid lines further apart, while decreasing it will make them closer together.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].unitInterval;
visiblePossible values: true, false, 'custom'.
This property controls the visibility of grid lines in the component:
true: All grid lines are displayed. false: No grid lines are displayed. 'custom': Only the grid lines specified in the gridLines.custom array are displayed. Use this option to define custom positions or offsets for visible grid lines.boolean | string
true, false, 'custom'.Possible values: true, false, 'custom'.
This property controls the visibility of grid lines in the component:
true: All grid lines are displayed.false: No grid lines are displayed.'custom': Only the grid lines specified in the gridLines.custom array are displayed. Use this option to define custom positions or offsets for visible grid lines.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].gridLines[0].visible;
labelsAn object that defines the properties and styling options for the labels displayed along the axis, including text content, font size, color, alignment, rotation, and formatting options.
Click for more details. Property object's options:
object
An object that defines the properties and styling options for the labels displayed along the axis, including text content, font size, color, alignment, rotation, and formatting options.
Properties
- dateFormat:string | null - Specifies an optional format string used to display Date objects. This property is only relevant when the data type is a Date; it determines how the date will be presented (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.
- decimalPlaces:number | null - Specifies the number of decimal places to display or store for numeric values.
- decimalSeparator:string | null - Specifies the character used to separate the integer part from the fractional part of a number (for example, the decimal point or comma in 123.45 or 123,45). By default, this value is determined by localization.decimalSeparator, allowing the symbol to adapt to different regional formatting conventions.
- negativeWithBrackets:boolean - A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to use brackets for negative numbers; set to false to use the standard minus sign.
- prefix:string - Specifies the text that will be added to the beginning of the value before it is displayed or processed.
- sufix:string - Specifies the text that will be added to the end of the existing value. This appended text will appear immediately after the original value and can be used to supplement or modify the displayed content.
- thousandsSeparator:string | null - A character used to separate groups of thousands in large numbers for improved readability (e.g., "1,000,000" or "1.000.000"). The default value for this symbol is automatically inherited from localization.thousandsSeparator, allowing it to adapt based on the user's locale or language preferences.
Possible Values: true, false, 'custom'.
Controls the visibility of labels:
true: All labels are visible. false: No labels are shown. 'custom': Only specific labels are displayed, based on the custom array you provide. In this mode, the component will render labels only at the custom values or offsets specified in the custom array.Read the nested value:
const el = document.querySelector('smart-chart');
const labels = el.xAxis[0].rangeSelector.valueAxis[0].labels;
angleSpecifies the angle, in degrees, by which the text is rotated clockwise relative to its default horizontal orientation.number
Specifies the angle, in degrees, by which the text is rotated clockwise relative to its default horizontal orientation.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const angle = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].angle;
autoRotateSpecifies whether automatic rotation is enabled (true or false). This setting applies exclusively to polar and spider charts, controlling whether elements such as axis labels or data points automatically rotate based on the chart's orientation.boolean
Specifies whether automatic rotation is enabled (true or false). This setting applies exclusively to polar and spider charts, controlling whether elements such as axis labels or data points automatically rotate based on the chart's orientation.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const autoRotate = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].autoRotate;
classSpecifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.string | null
Specifies the CSS class or classes to be applied to the label elements, allowing for custom styling and consistent appearance across the user interface.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].class;
customAn array specifying the exact values or offsets at which labels will be displayed along the axis. This property is only effective when labels.visible is set to 'custom', allowing you to manually define the positions of each label instead of using automatically calculated intervals.[] | null
An array specifying the exact values or offsets at which labels will be displayed along the axis. This property is only effective when labels.visible is set to 'custom', allowing you to manually define the positions of each label instead of using automatically calculated intervals.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].custom;
formatFunctionA callback function that customizes how labels are displayed by formatting their text or appearance. This function receives the label data as input and returns the formatted label, allowing you to control the content, style, or structure of each label dynamically.{(value?: any, index?: number, series?: any): string}
A callback function that customizes how labels are displayed by formatting their text or appearance. This function receives the label data as input and returns the formatted label, allowing you to control the content, style, or structure of each label dynamically.
Read the nested value:
const el = document.querySelector('smart-chart');
const formatFunction = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatFunction;
formatSettingsObject detailing the configuration options for label formatting, including properties such as font style, size, color, alignment, and other visual presentation settings.
Click for more details. Property object's options:
object
Object detailing the configuration options for label formatting, including properties such as font style, size, color, alignment, and other visual presentation settings.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const formatSettings = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings;
dateFormatSpecifies an optional format string used to display Date objects. This property is only relevant when the data type is a Date; it determines how the date will be presented (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.string | null
Specifies an optional format string used to display Date objects. This property is only relevant when the data type is a Date; it determines how the date will be presented (e.g., "YYYY-MM-DD" or "MM/DD/YYYY"). If not provided, a default date format will be used.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or store for numeric values.number | null
Specifies the number of decimal places to display or store for numeric values.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalPlaces;
decimalSeparatorSpecifies the character used to separate the integer part from the fractional part of a number (for example, the decimal point or comma in 123.45 or 123,45). By default, this value is determined by localization.decimalSeparator, allowing the symbol to adapt to different regional formatting conventions.string | null
Specifies the character used to separate the integer part from the fractional part of a number (for example, the decimal point or comma in 123.45 or 123,45). By default, this value is determined by localization.decimalSeparator, allowing the symbol to adapt to different regional formatting conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to use brackets for negative numbers; set to false to use the standard minus sign.boolean
A boolean value that determines whether negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to use brackets for negative numbers; set to false to use the standard minus sign.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].negativeWithBrackets;
prefixSpecifies the text that will be added to the beginning of the value before it is displayed or processed.string
Specifies the text that will be added to the beginning of the value before it is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].prefix;
sufixSpecifies the text that will be added to the end of the existing value. This appended text will appear immediately after the original value and can be used to supplement or modify the displayed content.string
Specifies the text that will be added to the end of the existing value. This appended text will appear immediately after the original value and can be used to supplement or modify the displayed content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].sufix;
thousandsSeparatorA character used to separate groups of thousands in large numbers for improved readability (e.g., "1,000,000" or "1.000.000"). The default value for this symbol is automatically inherited from localization.thousandsSeparator, allowing it to adapt based on the user's locale or language preferences.string | null
A character used to separate groups of thousands in large numbers for improved readability (e.g., "1,000,000" or "1.000.000"). The default value for this symbol is automatically inherited from localization.thousandsSeparator, allowing it to adapt based on the user's locale or language preferences.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].formatSettings[0].thousandsSeparator;
horizontalAlignmentSpecifies the alignment of labels along the horizontal axis (e.g., left, center, or right). This determines how text labels are positioned horizontally within their container or relative to the associated element."left" | "center" | "right"
Specifies the alignment of labels along the horizontal axis (e.g., left, center, or right). This determines how text labels are positioned horizontally within their container or relative to the associated element.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].horizontalAlignment;
offsetSpecifies the amount of space (offset) between the labels and their associated elements, allowing you to adjust the labels’ position for better visual alignment or spacing within the layout. object
Specifies the amount of space (offset) between the labels and their associated elements, allowing you to adjust the labels’ position for better visual alignment or spacing within the layout.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const offset = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset;
xDistance to shift an element horizontally from its default or reference position, typically measured in pixels. Positive values move the element to the right; negative values move it to the left.number
Distance to shift an element horizontally from its default or reference position, typically measured in pixels. Positive values move the element to the right; negative values move it to the left.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const x = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.x;
ySpecifies the vertical offset value, indicating the distance to move an element up or down relative to its original position. This value is typically measured in pixels or another unit, and determines how far the element is shifted along the Y-axis.number
Specifies the vertical offset value, indicating the distance to move an element up or down relative to its original position. This value is typically measured in pixels or another unit, and determines how far the element is shifted along the Y-axis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const y = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].offset.y;
rotationPointSpecifies the reference point or anchor position around which the text will be rotated. This determines the center of rotation for the text transformation."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the reference point or anchor position around which the text will be rotated. This determines the center of rotation for the text transformation.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const rotationPoint = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].rotationPoint;
stepSpecifies the number of axis unit intervals between each label placement. The value determines how many unit intervals to skip before placing the next label, allowing you to control the spacing of labels along the axis. For example, a value of 2 places a label at every second interval, increasing the distance between labels.number | null
Specifies the number of axis unit intervals between each label placement. The value determines how many unit intervals to skip before placing the next label, allowing you to control the spacing of labels along the axis. For example, a value of 2 places a label at every second interval, increasing the distance between labels.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].step;
unitIntervalSpecifies the spacing or distance between consecutive labels, determining how often labels appear along the axis or within the component. Adjusting this value controls the frequency or gap between each label displayed.number
Specifies the spacing or distance between consecutive labels, determining how often labels appear along the axis or within the component. Adjusting this value controls the frequency or gap between each label displayed.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].unitInterval;
verticalAlignmentAligns the position of labels vertically within their container, allowing you to specify whether labels are positioned at the top, center, bottom, or stretched to fill the available vertical space."top" | "center" | "bottom"
Aligns the position of labels vertically within their container, allowing you to specify whether labels are positioned at the top, center, bottom, or stretched to fill the available vertical space.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].verticalAlignment;
visiblePossible Values: true, false, 'custom'.
Controls the visibility of labels:
true: All labels are visible. false: No labels are shown. 'custom': Only specific labels are displayed, based on the custom array you provide. In this mode, the component will render labels only at the custom values or offsets specified in the custom array.boolean | string
true, false, 'custom'.Possible Values: true, false, 'custom'.
Controls the visibility of labels:
true: All labels are visible.false: No labels are shown.'custom': Only specific labels are displayed, based on the custom array you provide. In this mode, the component will render labels only at the custom values or offsets specified in the custom array.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].labels[0].visible;
lineObject that defines the visual properties of the axis line, including attributes such as color, width, style (e.g., solid, dashed), and visibility. This configuration determines how the axis line is rendered on the chart.
Click for more details. Property object's options:
object
Object that defines the visual properties of the axis line, including attributes such as color, width, style (e.g., solid, dashed), and visibility. This configuration determines how the axis line is rendered on the chart.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const line = el.xAxis[0].rangeSelector.valueAxis[0].line;
colorSpecifies the color used to render the axis line, allowing customization of the axis appearance to match the chart's design or branding. Accepts any valid CSS color value (e.g., hex, RGB, or color name).string
Specifies the color used to render the axis line, allowing customization of the axis appearance to match the chart's design or branding. Accepts any valid CSS color value (e.g., hex, RGB, or color name).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].rangeSelector.valueAxis[0].line.color;
dashStyleSpecifies the pattern of dashes and gaps used to render the line, such as '2,2' for a sequence of 2-pixel dash followed by a 2-pixel gap. By default, this value is inherited from the gridLines configuration. dashStylestring
Specifies the pattern of dashes and gaps used to render the line, such as '2,2' for a sequence of 2-pixel dash followed by a 2-pixel gap. By default, this value is inherited from the gridLines configuration.
dashStyle
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].rangeSelector.valueAxis[0].line.dashStyle;
lineWidthSpecifies the width of the line, in pixels. By default, this value is inherited from the gridLines.lineWidth setting unless explicitly defined.number
Specifies the width of the line, in pixels. By default, this value is inherited from the gridLines.lineWidth setting unless explicitly defined.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].rangeSelector.valueAxis[0].line.lineWidth;
visibleA Boolean value that specifies whether the axis line is displayed ('true') or hidden ('false') on the chart.boolean
A Boolean value that specifies whether the axis line is displayed ('true') or hidden ('false') on the chart.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].line.visible;
logarithmicScaleSpecifies whether the scale should be displayed using a logarithmic transformation instead of a linear one. When enabled, data values are plotted according to a logarithmic scale, which can be useful for visualizing data with a wide range of values.boolean
Specifies whether the scale should be displayed using a logarithmic transformation instead of a linear one. When enabled, data values are plotted according to a logarithmic scale, which can be useful for visualizing data with a wide range of values.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScale = el.xAxis[0].rangeSelector.valueAxis[0].logarithmicScale;
logarithmicScaleBaseSpecifies the base value used for the logarithmic scale (e.g., 10 for log base 10). This determines how data values are scaled and displayed along the axis when a logarithmic scale is applied.number
Specifies the base value used for the logarithmic scale (e.g., 10 for log base 10). This determines how data values are scaled and displayed along the axis when a logarithmic scale is applied.
Default value
10Read the nested value:
const el = document.querySelector('smart-chart');
const logarithmicScaleBase = el.xAxis[0].rangeSelector.valueAxis[0].logarithmicScaleBase;
maxValueDefines the upper limit for the valueAxis, specifying the highest data value that will be displayed along the axis. Any data points exceeding this value will be capped at this maximum.any
Defines the upper limit for the valueAxis, specifying the highest data value that will be displayed along the axis. Any data points exceeding this value will be capped at this maximum.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const maxValue = el.xAxis[0].rangeSelector.valueAxis[0].maxValue;
minValueSpecifies the lowest numerical value displayed on the valueAxis. Data points with values below this threshold will not be shown on the axis.any
Specifies the lowest numerical value displayed on the valueAxis. Data points with values below this threshold will not be shown on the axis.
Default value
NaNRead the nested value:
const el = document.querySelector('smart-chart');
const minValue = el.xAxis[0].rangeSelector.valueAxis[0].minValue;
paddingObject that specifies the amount of space (in pixels) to add as padding around an axis, allowing you to control the distance between the axis line and surrounding chart elements. This object typically includes properties for defining padding on each side (e.g., top, bottom, left, right).
Click for more details. Property object's options:
object
Object that specifies the amount of space (in pixels) to add as padding around an axis, allowing you to control the distance between the axis line and surrounding chart elements. This object typically includes properties for defining padding on each side (e.g., top, bottom, left, right).
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const padding = el.xAxis[0].rangeSelector.valueAxis[0].padding;
bottomSets the amount of space (in pixels) added to the bottom of the chart when using a horizontal value axis. This padding ensures that chart elements do not touch or overlap the lower edge, improving readability and layout. This property applies only when the valueAxis is oriented horizontally.number
Sets the amount of space (in pixels) added to the bottom of the chart when using a horizontal value axis. This padding ensures that chart elements do not touch or overlap the lower edge, improving readability and layout. This property applies only when the valueAxis is oriented horizontally.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const bottom = el.xAxis[0].rangeSelector.valueAxis[0].padding.bottom;
leftAmount of space added to the left side of the vertical value axis. This padding adjusts the distance between the axis and the edge of the chart, helping to improve readability and layout. Only applicable when configuring a vertical valueAxis.number
Amount of space added to the left side of the vertical value axis. This padding adjusts the distance between the axis and the edge of the chart, helping to improve readability and layout. Only applicable when configuring a vertical valueAxis.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const left = el.xAxis[0].rangeSelector.valueAxis[0].padding.left;
rightSpecifies the amount of padding to add to the right side of the vertical value axis. This setting allows you to adjust spacing between the axis labels or line and the edge of the chart, improving readability and layout. Only applicable to vertical value axes.number
Specifies the amount of padding to add to the right side of the vertical value axis. This setting allows you to adjust spacing between the axis labels or line and the edge of the chart, improving readability and layout. Only applicable to vertical value axes.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const right = el.xAxis[0].rangeSelector.valueAxis[0].padding.right;
topTop padding for the value axis, applied only when the axis orientation is horizontal. This setting adds space above the value axis to improve layout and readability.number
Top padding for the value axis, applied only when the axis orientation is horizontal. This setting adds space above the value axis to improve layout and readability.
Default value
0Read the nested value:
const el = document.querySelector('smart-chart');
const top = el.xAxis[0].rangeSelector.valueAxis[0].padding.top;
positionDetermines the position of the axis on the chart. By default, for vertical axes, the available options are 'left' and 'right'. For horizontal axes (when valueAxis is set to horizontal), only 'top' and 'bottom' are valid positions. This property controls where the axis will be rendered relative to the chart area."left" | "right" | "top" | "bottom"
Determines the position of the axis on the chart. By default, for vertical axes, the available options are 'left' and 'right'. For horizontal axes (when valueAxis is set to horizontal), only 'top' and 'bottom' are valid positions. This property controls where the axis will be rendered relative to the chart area.
Default value
"left"Read the nested value:
const el = document.querySelector('smart-chart');
const position = el.xAxis[0].rangeSelector.valueAxis[0].position;
textRotationAngleSpecifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.number | null
Specifies the angle, in degrees, to rotate the text. A value of 0 displays the text normally, while positive or negative values rotate the text clockwise or counterclockwise, respectively.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.xAxis[0].rangeSelector.valueAxis[0].textRotationAngle;
textRotationPointDefines the reference point or anchor position around which the text will be rotated. This determines the center of rotation when applying a rotation transformation to the text, affecting how and where the text pivots on the screen or canvas."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Defines the reference point or anchor position around which the text will be rotated. This determines the center of rotation when applying a rotation transformation to the text, affecting how and where the text pivots on the screen or canvas.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.xAxis[0].rangeSelector.valueAxis[0].textRotationPoint;
tickMarksAn object that defines the properties and appearance of the tick marks displayed along the value axis, including attributes such as length, color, thickness, spacing, and visibility.
Click for more details. Property object's options:
object
An object that defines the properties and appearance of the tick marks displayed along the value axis, including attributes such as length, color, thickness, spacing, and visibility.
Properties
true, false, 'custom'.Controls the visibility of tick marks on the component: true: All default tick marks are displayed. false: No tick marks are displayed. 'custom': Only tick marks specified in the tickMarks.custom array are displayed, allowing you to define your own custom values or positions for the tick marks.
Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks;
colorSpecifies the color used to render the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex code, RGB, or color name).string
Specifies the color used to render the tick marks on the axis or scale. Accepts any valid CSS color value (e.g., hex code, RGB, or color name).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].color;
customAn array specifying the exact values or offsets at which tick marks should be displayed along the axis. This property is only relevant when tickMarks.visible is set to 'custom', allowing you to define custom tick mark positions instead of using automatically generated intervals.[] | null
An array specifying the exact values or offsets at which tick marks should be displayed along the axis. This property is only relevant when tickMarks.visible is set to 'custom', allowing you to define custom tick mark positions instead of using automatically generated intervals.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].custom;
dashStyleSpecifies the dash pattern for tick marks using a string of numbers, such as '2,2'. Each number represents the length (in pixels) of dashes and gaps, alternating throughout the tick mark—for example, '2,2' creates a dashed line with 2 pixels of dash followed by 2 pixels of space, repeating along the tick.string
Specifies the dash pattern for tick marks using a string of numbers, such as '2,2'. Each number represents the length (in pixels) of dashes and gaps, alternating throughout the tick mark—for example, '2,2' creates a dashed line with 2 pixels of dash followed by 2 pixels of space, repeating along the tick.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].dashStyle;
lineWidthSpecifies the thickness of the tick marks in pixels. This value determines how wide or narrow each tick mark will appear on the line or axis.number
Specifies the thickness of the tick marks in pixels. This value determines how wide or narrow each tick mark will appear on the line or axis.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].lineWidth;
sizeSpecifies the length of each tick mark in pixels, determining how long the tick marks appear on the axis or scale.number
Specifies the length of each tick mark in pixels, determining how long the tick marks appear on the axis or scale.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].size;
stepSpecifies the number of axis unit intervals between each tick mark; determines how frequently tick marks are placed along the axis (e.g., a value of 2 places tick marks at every second axis unit).number | null
Specifies the number of axis unit intervals between each tick mark; determines how frequently tick marks are placed along the axis (e.g., a value of 2 places tick marks at every second axis unit).
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].step;
unitIntervalSpecifies the distance or value between consecutive tick marks on the axis. This determines how frequently tick marks appear, affecting the granularity and readability of the axis scale.number
Specifies the distance or value between consecutive tick marks on the axis. This determines how frequently tick marks appear, affecting the granularity and readability of the axis scale.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.Controls the visibility of tick marks on the component: true: All default tick marks are displayed. false: No tick marks are displayed. 'custom': Only tick marks specified in the tickMarks.custom array are displayed, allowing you to define your own custom values or positions for the tick marks.
boolean | string
true: All default tick marks are displayed. false: No tick marks are displayed. 'custom': Only tick marks specified in the tickMarks.custom array are displayed, allowing you to define your own custom values or positions for the tick marks.Possible values: true, false, 'custom'.
Controls the visibility of tick marks on the component:
true: All default tick marks are displayed.
false: No tick marks are displayed.
'custom': Only tick marks specified in the tickMarks.custom array are displayed, allowing you to define your own custom values or positions for the tick marks.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].tickMarks[0].visible;
titleObject that defines the configuration options for the title displayed on the value axis, including properties such as the text content, font style, alignment, and other presentation settings.
Click for more details. Property object's options:
object
Object that defines the configuration options for the title displayed on the value axis, including properties such as the text content, font style, alignment, and other presentation settings.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.xAxis[0].rangeSelector.valueAxis[0].title;
classSpecifies the CSS class name(s) to be applied to the title text element for custom styling.string | null
Specifies the CSS class name(s) to be applied to the title text element for custom styling.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.xAxis[0].rangeSelector.valueAxis[0].title.class;
horizontalAlignmentSpecifies the horizontal alignment of an element’s content, such as aligning text, images, or other components to the left, center, or right within its container."left" | "center" | "right"
Specifies the horizontal alignment of an element’s content, such as aligning text, images, or other components to the left, center, or right within its container.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.xAxis[0].rangeSelector.valueAxis[0].title.horizontalAlignment;
textThe main heading or title text that represents the content or subject of the page, section, or item.string
The main heading or title text that represents the content or subject of the page, section, or item.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.xAxis[0].rangeSelector.valueAxis[0].title.text;
verticalAlignmentSpecifies the vertical alignment of an element’s content within its container. This property determines whether the content appears at the top, middle, bottom, or a specified baseline of the container, affecting the overall layout and readability."top" | "center" | "bottom"
Specifies the vertical alignment of an element’s content within its container. This property determines whether the content appears at the top, middle, bottom, or a specified baseline of the container, affecting the overall layout and readability.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.xAxis[0].rangeSelector.valueAxis[0].title.verticalAlignment;
visibleA boolean value that specifies whether the title should be visible (true) or hidden (false) in the user interface.boolean
A boolean value that specifies whether the title should be visible (true) or hidden (false) in the user interface.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].title.visible;
type"Value Axis Type" specifies the format or scale used for the value axis (y-axis) in a chart or graph. This setting determines how data values are represented and interpreted—options may include linear, logarithmic, or categorical scales, among others. Adjusting the value axis type affects how data trends and differences are visualized within the chart.string
"Value Axis Type" specifies the format or scale used for the value axis (y-axis) in a chart or graph. This setting determines how data values are represented and interpreted—options may include linear, logarithmic, or categorical scales, among others. Adjusting the value axis type affects how data trends and differences are visualized within the chart.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.xAxis[0].rangeSelector.valueAxis[0].type;
unitIntervalSpecifies the amount of space or time between individual units, determining how frequently or closely the units are placed or repeated within the sequence or layout.number | null
Specifies the amount of space or time between individual units, determining how frequently or closely the units are placed or repeated within the sequence or layout.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].rangeSelector.valueAxis[0].unitInterval;
valuesOnTicksDetermines if the axis values (labels) are positioned exactly at the tick marks along the axis. When enabled, each label will appear directly aligned with its corresponding tick mark; when disabled, labels may be placed between tick marks or follow a different alignment pattern.boolean
Determines if the axis values (labels) are positioned exactly at the tick marks along the axis. When enabled, each label will appear directly aligned with its corresponding tick mark; when disabled, labels may be placed between tick marks or follow a different alignment pattern.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.xAxis[0].rangeSelector.valueAxis[0].valuesOnTicks;
visibleControls the visibility of the value axis on the chart. When enabled, the value axis is displayed alongside the chart to indicate the scale of data values. When disabled, the axis is hidden from view.boolean
Controls the visibility of the value axis on the chart. When enabled, the value axis is displayed alongside the chart to indicate the scale of data values. When disabled, the axis is hidden from view.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.valueAxis[0].visible;
visibleDetermines whether the range selector component is visible or hidden on the interface. When enabled, users can select a specific range (such as dates or values) to filter or adjust the displayed data. Disabling this option will hide the range selector from view.boolean
Determines whether the range selector component is visible or hidden on the interface. When enabled, users can select a specific range (such as dates or values) to filter or adjust the displayed data. Disabling this option will hide the range selector from view.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].rangeSelector.visible;
textThe text label displayed on the x-axis.string
The text label displayed on the x-axis.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.xAxis[0].text;
textRotationAngleSpecifies the angle, in degrees, to rotate the text from its default horizontal orientation. Positive values rotate the text clockwise, while negative values rotate it counterclockwise.number | null
Specifies the angle, in degrees, to rotate the text from its default horizontal orientation. Positive values rotate the text clockwise, while negative values rotate it counterclockwise.
Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationAngle = el.xAxis[0].textRotationAngle;
textRotationPointSpecifies the reference point or anchor position around which the text will be rotated. This determines the exact location in relation to the text (such as its center, corner, or a custom coordinate) that serves as the axis of rotation."auto" | "left" | "center" | "right" | "topleft" | "topcenter" | "topright" | "bottomleft" | "bottomcenter" | "bottomright" | "centermiddle"
Specifies the reference point or anchor position around which the text will be rotated. This determines the exact location in relation to the text (such as its center, corner, or a custom coordinate) that serves as the axis of rotation.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const textRotationPoint = el.xAxis[0].textRotationPoint;
tickMarksObject that defines the properties and appearance of the tick marks displayed along the xAxis, including settings such as tick interval, length, color, formatting, and label options.
Click for more details. Property object's options:
object
Object that defines the properties and appearance of the tick marks displayed along the xAxis, including settings such as tick interval, length, color, formatting, and label options.
Properties
Possible values: true, false, 'custom'.
Controls the visibility and placement of tick marks on the axis:
true: All default tick marks are displayed. false: Tick marks are hidden. 'custom': Only specific tick marks, defined in the tickMarks.custom array, will be displayed at the specified values or offsets.Read the nested value:
const el = document.querySelector('smart-chart');
const tickMarks = el.xAxis[0].tickMarks;
colorSpecifies the color used to render the tick marks on the axis, grid, or scale. Accepts any valid CSS color value (e.g., HEX, RGB, or color names).string
Specifies the color used to render the tick marks on the axis, grid, or scale. Accepts any valid CSS color value (e.g., HEX, RGB, or color names).
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const color = el.xAxis[0].tickMarks[0].color;
customAn array specifying the exact numeric values or offsets at which tick marks will appear along the axis. This property is used only when tickMarks.visible is set to 'custom', allowing you to define precise positions for tick marks instead of relying on automatic or evenly spaced rendering. Each entry in the array determines the location of an individual tick mark.[] | null
An array specifying the exact numeric values or offsets at which tick marks will appear along the axis. This property is used only when tickMarks.visible is set to 'custom', allowing you to define precise positions for tick marks instead of relying on automatic or evenly spaced rendering. Each entry in the array determines the location of an individual tick mark.
Read the nested value:
const el = document.querySelector('smart-chart');
const custom = el.xAxis[0].tickMarks[0].custom;
dashStyleSpecifies the dash pattern for tick marks using a string of numbers. For example, '2,2' creates a dashed line with segments of 2 units long followed by 2 units of space. This allows customization of the tick mark appearance with different dash and gap lengths.string
Specifies the dash pattern for tick marks using a string of numbers. For example, '2,2' creates a dashed line with segments of 2 units long followed by 2 units of space. This allows customization of the tick mark appearance with different dash and gap lengths.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const dashStyle = el.xAxis[0].tickMarks[0].dashStyle;
lineWidthSpecifies the thickness, in pixels, of the tick marks displayed on the axis lines. This value determines how wide each tick mark appears.number
Specifies the thickness, in pixels, of the tick marks displayed on the axis lines. This value determines how wide each tick mark appears.
Default value
1Read the nested value:
const el = document.querySelector('smart-chart');
const lineWidth = el.xAxis[0].tickMarks[0].lineWidth;
sizeSpecifies the length of the tick marks in pixels, determining how long each tick appears along the axis or scale.number
Specifies the length of the tick marks in pixels, determining how long each tick appears along the axis or scale.
Default value
4Read the nested value:
const el = document.querySelector('smart-chart');
const size = el.xAxis[0].tickMarks[0].size;
stepDetermines the number of axis unit intervals between each tick mark, setting the spacing so that tick marks appear at every specified multiple of the base interval. For example, a value of 2 places a tick mark at every second axis unit interval.number | null
Determines the number of axis unit intervals between each tick mark, setting the spacing so that tick marks appear at every specified multiple of the base interval. For example, a value of 2 places a tick mark at every second axis unit interval.
Read the nested value:
const el = document.querySelector('smart-chart');
const step = el.xAxis[0].tickMarks[0].step;
unitIntervalSpecifies the distance or value difference between consecutive tick marks on the axis, determining how frequently tick marks appear and helping to control the scale's granularity.number
Specifies the distance or value difference between consecutive tick marks on the axis, determining how frequently tick marks appear and helping to control the scale's granularity.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].tickMarks[0].unitInterval;
visiblePossible values: true, false, 'custom'.
Controls the visibility and placement of tick marks on the axis:
true: All default tick marks are displayed. false: Tick marks are hidden. 'custom': Only specific tick marks, defined in the tickMarks.custom array, will be displayed at the specified values or offsets.boolean | string
true, false, 'custom'.Possible values: true, false, 'custom'.
Controls the visibility and placement of tick marks on the axis:
true: All default tick marks are displayed.false: Tick marks are hidden.'custom': Only specific tick marks, defined in the tickMarks.custom array, will be displayed at the specified values or offsets.Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].tickMarks[0].visible;
titleAn object that defines the properties and settings for the x-axis title, including the text to display, font style, alignment, and other appearance-related options.
Click for more details. Property object's options:
object
An object that defines the properties and settings for the x-axis title, including the text to display, font style, alignment, and other appearance-related options.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const title = el.xAxis[0].title;
classSpecifies the CSS class or classes to be applied to the title text element, allowing for custom styling and theme adjustments. Provide one or more class names as a string or array.string | null
Specifies the CSS class or classes to be applied to the title text element, allowing for custom styling and theme adjustments. Provide one or more class names as a string or array.
Read the nested value:
const el = document.querySelector('smart-chart');
const class = el.xAxis[0].title.class;
horizontalAlignmentSpecifies the horizontal alignment of content within its container, determining whether elements are aligned to the left, center, or right."left" | "center" | "right"
Specifies the horizontal alignment of content within its container, determining whether elements are aligned to the left, center, or right.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const horizontalAlignment = el.xAxis[0].title.horizontalAlignment;
textContains the text content to be displayed as the main title or heading.string
Contains the text content to be displayed as the main title or heading.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const text = el.xAxis[0].title.text;
verticalAlignmentSpecifies the vertical alignment of content within an element, allowing you to control whether content is positioned at the top, middle, bottom, or baseline relative to its container."top" | "center" | "bottom"
Specifies the vertical alignment of content within an element, allowing you to control whether content is positioned at the top, middle, bottom, or baseline relative to its container.
Default value
"center"Read the nested value:
const el = document.querySelector('smart-chart');
const verticalAlignment = el.xAxis[0].title.verticalAlignment;
visibleA boolean value that specifies whether the title should be visible ('true') or hidden ('false') in the user interface.boolean
A boolean value that specifies whether the title should be visible ('true') or hidden ('false') in the user interface.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].title.visible;
toolTipFormatFunctionA custom function that formats the xAxis values displayed in tooltips, enabling you to control how the x-axis data appears (e.g., date/time formatting, number precision, or adding custom labels) when users hover over chart elements.{(value?: any, index?: number, series?: any): string}
A custom function that formats the xAxis values displayed in tooltips, enabling you to control how the x-axis data appears (e.g., date/time formatting, number precision, or adding custom labels) when users hover over chart elements.
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatFunction = el.xAxis[0].toolTipFormatFunction;
toolTipFormatSettingsConfiguration options for formatting xAxis values specifically within tooltip displays. These settings determine how xAxis values appear when shown in tooltips, such as specifying number formats, date formats, or custom value formatting functions.
Click for more details. Property object's options:
object
Configuration options for formatting xAxis values specifically within tooltip displays. These settings determine how xAxis values appear when shown in tooltips, such as specifying number formats, date formats, or custom value formatting functions.
Properties
Read the nested value:
const el = document.querySelector('smart-chart');
const toolTipFormatSettings = el.xAxis[0].toolTipFormatSettings;
dateFormatSpecifies an optional string that defines the format in which Date objects are displayed. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. Use standard date formatting tokens to customize how the date appears in the UI.string | null
Specifies an optional string that defines the format in which Date objects are displayed. This property is only relevant when the value being rendered is a Date object; it has no effect for other data types. Use standard date formatting tokens to customize how the date appears in the UI.
Read the nested value:
const el = document.querySelector('smart-chart');
const dateFormat = el.xAxis[0].toolTipFormatSettings[0].dateFormat;
decimalPlacesSpecifies the number of decimal places to display or store for numeric values, controlling the precision of numbers in the application.number | null
Specifies the number of decimal places to display or store for numeric values, controlling the precision of numbers in the application.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalPlaces = el.xAxis[0].toolTipFormatSettings[0].decimalPlaces;
decimalSeparatorA character or symbol that separates the integer portion from the fractional portion of a numeric value (for example, the period in 123.45 or the comma in 123,45). By default, this value is determined by the localization.decimalSeparator setting, ensuring consistency with the user's locale or regional formatting conventions.string | null
A character or symbol that separates the integer portion from the fractional portion of a numeric value (for example, the period in 123.45 or the comma in 123,45). By default, this value is determined by the localization.decimalSeparator setting, ensuring consistency with the user's locale or regional formatting conventions.
Read the nested value:
const el = document.querySelector('smart-chart');
const decimalSeparator = el.xAxis[0].toolTipFormatSettings[0].decimalSeparator;
negativeWithBracketsA boolean value that determines if negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to show negative values in brackets, or false to use the standard minus sign.boolean
A boolean value that determines if negative numbers should be displayed enclosed in brackets (e.g., (123)) instead of using a minus sign (e.g., -123). Set to true to show negative values in brackets, or false to use the standard minus sign.
Default value
falseRead the nested value:
const el = document.querySelector('smart-chart');
const negativeWithBrackets = el.xAxis[0].toolTipFormatSettings[0].negativeWithBrackets;
prefixSpecifies a string that will be added to the beginning of the value before it is displayed or processed.string
Specifies a string that will be added to the beginning of the value before it is displayed or processed.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const prefix = el.xAxis[0].toolTipFormatSettings[0].prefix;
sufixThe string that will be added to the end of the current value. This text is appended directly after the existing value, extending it without altering the original content.string
The string that will be added to the end of the current value. This text is appended directly after the existing value, extending it without altering the original content.
Default value
""Read the nested value:
const el = document.querySelector('smart-chart');
const sufix = el.xAxis[0].toolTipFormatSettings[0].sufix;
thousandsSeparatorSpecifies the character used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's standard number formatting.string | null
Specifies the character used to separate groups of thousands in large numbers (e.g., 1,000,000 for one million). By default, this value is inherited from localization.thousandsSeparator, ensuring consistency with the locale's standard number formatting.
Read the nested value:
const el = document.querySelector('smart-chart');
const thousandsSeparator = el.xAxis[0].toolTipFormatSettings[0].thousandsSeparator;
typeDefines the axis type, determining how data is interpreted and displayed along the axis. Supported values include: 'auto' – Automatically detects the appropriate axis type based on the input data and switches to either 'basic', 'linear', or 'date'. This is the recommended default for versatility. 'date' – Configures the axis to handle and display date/time values, making it suitable for time series or chronological data. 'basic' – Displays all data points in their original, sequential order without interpreting their values, often used for categorical or nominal data. 'linear' – Arranges data points according to the numeric values provided in the xAxis data field, resulting in a proportionally spaced, numeric scale."auto" | "date" | "basic" | "linear"
Defines the axis type, determining how data is interpreted and displayed along the axis. Supported values include:
'auto' – Automatically detects the appropriate axis type based on the input data and switches to either 'basic', 'linear', or 'date'. This is the recommended default for versatility.
'date' – Configures the axis to handle and display date/time values, making it suitable for time series or chronological data.
'basic' – Displays all data points in their original, sequential order without interpreting their values, often used for categorical or nominal data.
'linear' – Arranges data points according to the numeric values provided in the xAxis data field, resulting in a proportionally spaced, numeric scale.
Default value
"auto"Read the nested value:
const el = document.querySelector('smart-chart');
const type = el.xAxis[0].type;
unitIntervalSpecifies the amount of time or distance that separates each unit, determining the spacing or frequency at which units occur within the sequence.number | null
Specifies the amount of time or distance that separates each unit, determining the spacing or frequency at which units occur within the sequence.
Read the nested value:
const el = document.querySelector('smart-chart');
const unitInterval = el.xAxis[0].unitInterval;
valuesOnTicksIndicates whether the axis values (labels) are positioned directly on the tick marks, ensuring that each label is aligned with its corresponding tick for improved readability and accurate data representation. If set to false, axis values may appear between tick marks instead of directly on them.boolean
Indicates whether the axis values (labels) are positioned directly on the tick marks, ensuring that each label is aligned with its corresponding tick for improved readability and accurate data representation. If set to false, axis values may appear between tick marks instead of directly on them.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const valuesOnTicks = el.xAxis[0].valuesOnTicks;
visibleControls the visibility of the x-axis on the chart. When enabled, the x-axis and its associated labels, ticks, and gridlines will be displayed; when disabled, the x-axis and all related elements will be hidden from view.boolean
Controls the visibility of the x-axis on the chart. When enabled, the x-axis and its associated labels, ticks, and gridlines will be displayed; when disabled, the x-axis and all related elements will be hidden from view.
Default value
trueRead the nested value:
const el = document.querySelector('smart-chart');
const visible = el.xAxis[0].visible;
Events
annotationClickThis event is triggered whenever a user clicks on an annotation element within the chart. It allows developers to respond to user interactions with chart annotations, such as displaying additional information, modifying the annotation, or performing custom actions based on the selected annotation.CustomEvent
This event is triggered whenever a user clicks on an annotation element within the chart. It allows developers to respond to user interactions with chart annotations, such as displaying additional information, modifying the annotation, or performing custom actions based on the selected 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.
Examples
Listen for annotationClick using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('annotationClick', (event) => {
// event handling code goes here.
})
annotationMouseenterThe event is triggered when the user positions the cursor over a chart annotation, such as a label, marker, or highlighted region, within the chart area. This event can be used to implement interactive features like displaying tooltips, highlighting the annotation, or providing additional contextual information related to the annotation being hovered.CustomEvent
The event is triggered when the user positions the cursor over a chart annotation, such as a label, marker, or highlighted region, within the chart area. This event can be used to implement interactive features like displaying tooltips, highlighting the annotation, or providing additional contextual information related to the annotation being hovered.
- 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.
Examples
Listen for annotationMouseenter using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('annotationMouseenter', (event) => {
// event handling code goes here.
})
annotationMouseleaveThis event is triggered when the user's cursor moves outside the boundaries of a chart annotation. It allows developers to detect when the cursor leaves an annotation area, enabling actions such as hiding tooltips, resetting highlight effects, or performing cleanup tasks related to annotation interactions.CustomEvent
This event is triggered when the user's cursor moves outside the boundaries of a chart annotation. It allows developers to detect when the cursor leaves an annotation area, enabling actions such as hiding tooltips, resetting highlight effects, or performing cleanup tasks related to annotation interactions.
- 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.
Examples
Listen for annotationMouseleave using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('annotationMouseleave', (event) => {
// event handling code goes here.
})
clickThe event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked series element.CustomEvent
The event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked 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.
Examples
Listen for click using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('click', (event) => {
// event handling code goes here.
})
mouseoutThis event is triggered when the user's cursor leaves or exits a specific series element within the chart. It can be used to detect when a user stops hovering over a particular data series, allowing you to perform actions such as hiding tooltips, resetting styles, or updating related interface elements.CustomEvent
This event is triggered when the user's cursor leaves or exits a specific series element within the chart. It can be used to detect when a user stops hovering over a particular data series, allowing you to perform actions such as hiding tooltips, resetting styles, or updating related interface elements.
- 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.
Examples
Listen for mouseout using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('mouseout', (event) => {
// event handling code goes here.
})
mouseoverThe event is triggered when the user's cursor hovers over a series element, such as a bar, line, or data point, within the chart. This event typically occurs as soon as the cursor enters the boundary of a specific series element, allowing you to respond to user interactions like highlighting the element, displaying tooltips, or updating related UI components.CustomEvent
The event is triggered when the user's cursor hovers over a series element, such as a bar, line, or data point, within the chart. This event typically occurs as soon as the cursor enters the boundary of a specific series element, allowing you to respond to user interactions like highlighting the element, displaying tooltips, or updating related UI components.
- 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.
Examples
Listen for mouseover using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('mouseover', (event) => {
// event handling code goes here.
})
rangeSelectionChangedThis event is triggered after the position of the chart's range selector has changed and the chart has finished rendering. It allows you to perform additional actions or updates in response to user interactions with the range selector, ensuring that any changes occur only after the chart rendering is complete.CustomEvent
This event is triggered after the position of the chart's range selector has changed and the chart has finished rendering. It allows you to perform additional actions or updates in response to user interactions with the range selector, ensuring that any changes occur only after the chart rendering is complete.
- 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.
Examples
Listen for rangeSelectionChanged using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('rangeSelectionChanged', (event) => {
// event handling code goes here.
})
rangeSelectionChangingThe event is triggered whenever the position of the chart's range selector is modified, occurring just before the chart begins its rendering process. This allows you to intercept and handle any changes to the range selector position prior to the chart's visual update.CustomEvent
The event is triggered whenever the position of the chart's range selector is modified, occurring just before the chart begins its rendering process. This allows you to intercept and handle any changes to the range selector position prior to the chart's visual update.
- 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.
Examples
Listen for rangeSelectionChanging using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('rangeSelectionChanging', (event) => {
// event handling code goes here.
})
refreshBeginThe event is triggered when the chart rendering process starts, indicating that the chart is about to be displayed but has not yet completed drawing. This event can be used to execute custom code or display a loading indicator at the beginning of the chart rendering sequence.CustomEvent
The event is triggered when the chart rendering process starts, indicating that the chart is about to be displayed but has not yet completed drawing. This event can be used to execute custom code or display a loading indicator at the beginning of the chart rendering sequence.
- 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.
Examples
Listen for refreshBegin using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('refreshBegin', (event) => {
// event handling code goes here.
})
refreshEndThis event is triggered when the chart has completed rendering all of its visual elements and is fully displayed in the browser. At this point, the chart is ready for user interaction or for further manipulation through scripts.CustomEvent
This event is triggered when the chart has completed rendering all of its visual elements and is fully displayed in the browser. At this point, the chart is ready for user interaction or for further manipulation through scripts.
- 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.
Examples
Listen for refreshEnd using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('refreshEnd', (event) => {
// event handling code goes here.
})
toggleThis event is triggered whenever a series in the chart is shown or hidden, either by a user clicking on the series label in the chart's legend or programmatically via an API call. The event allows you to respond to visibility changes of chart series, enabling custom behaviors or updates when users interact with the legend or when series visibility is modified through code.CustomEvent
This event is triggered whenever a series in the chart is shown or hidden, either by a user clicking on the series label in the chart's legend or programmatically via an API call. The event allows you to respond to visibility changes of chart series, enabling custom behaviors or updates when users interact with the legend or when series visibility is modified through code.
- 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.
Examples
Listen for toggle using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-chart')?.addEventListener('toggle', (event) => {
// event handling code goes here.
})
Methods
addColorScheme( schemeName: string, colorsArray: any[]): voidEnhances the application's color scheme functionality by allowing you to add a new color scheme. If a color scheme with the specified name already exists, this method updates its color values instead of creating a duplicate. This ensures seamless management and updating of color schemes within the application.
Enhances the application's color scheme functionality by allowing you to add a new color scheme. If a color scheme with the specified name already exists, this method updates its color values instead of creating a duplicate. This ensures seamless management and updating of color schemes within the application.
Arguments
schemeNamestring
The name of the custom color scheme.
colorsArrayany[]
An array of color values.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.addColorScheme("'myScheme'","['#1A6642', '#46C26F', '#F9B956', '#F38443', '#DE513D']");
Try a demo showcasing the addColorScheme method.
getColorScheme( schemeName: string): []Returns the list of colors associated with the specified color scheme name. If the specified scheme does not exist, the method returns undefined.
Returns the list of colors associated with the specified color scheme name. If the specified scheme does not exist, the method returns undefined.
Arguments
schemeNamestring
The name of the color scheme.
Returns[]
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-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 }Retrieves the on-screen (pixel) coordinates where a specific data point element is rendered within the visualization. This allows you to determine the exact position of the data point as displayed to the user.
Retrieves the on-screen (pixel) coordinates where a specific data point element is rendered within the visualization. This allows you to determine the exact position of the data point as displayed to the user.
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 }
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getItemCoord(0,1,5);
Try a demo showcasing the getItemCoord method.
getItemsCount( groupIndex: number, serieIndex: number): numberRetrieves the total count of items that have been rendered within a specified series. This includes only those items currently visible or present in the rendered output for the given series.
Retrieves the total count of items that have been rendered within a specified series. This includes only those items currently visible or present in the rendered output for the given series.
Arguments
groupIndexnumber
Series group index.
serieIndexnumber
Series index.
Returnsnumber
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getItemsCount(0,1);
Try a demo showcasing the getItemsCount method.
getValueAxisLabels( groupIndex: number): { offset: { x: number, y: number }, value: any }[]Retrieves the computed coordinates (positions) and corresponding values of the labels displayed along the valueAxis after rendering. This includes the exact pixel positions and the label values as they appear on the axis within the rendered chart, allowing for precise placement and manipulation of these labels in the UI.
Retrieves the computed coordinates (positions) and corresponding values of the labels displayed along the valueAxis after rendering. This includes the exact pixel positions and the label values as they appear on the axis within the rendered chart, allowing for precise placement and manipulation of these labels in the UI.
Arguments
groupIndexnumber
Series group index.
Returns{ offset: { x: number, y: number }, value: any }[]
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getValueAxisLabels(0);
Try a demo showcasing the getValueAxisLabels method.
getValueAxisRect( groupIndex: number): DOMRectRetrieves the pixel coordinates and dimensions (as a rectangle) of the value axis associated with a specified series group after rendering. This includes the axis's position (x, y) and size (width, height) within the chart area, enabling precise alignment, customization, or interaction with the value axis for the targeted series group.
Retrieves the pixel coordinates and dimensions (as a rectangle) of the value axis associated with a specified series group after rendering. This includes the axis's position (x, y) and size (width, height) within the chart area, enabling precise alignment, customization, or interaction with the value axis for the targeted series group.
Arguments
groupIndexnumber
Series group index.
ReturnsDOMRect
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getValueAxisRect(1);
Try a demo showcasing the getValueAxisRect method.
getValueAxisValue( offset: number, groupIndex: number): objectRetrieves the current value of the vertical axis (valueAxis), which represents the data values plotted along the y-axis of the chart.
Retrieves the current value of the vertical axis (valueAxis), which represents the data values plotted along the y-axis of the chart.
Arguments
offsetnumber
Vertical offset.
groupIndexnumber
Series group index.
Returnsobject
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getValueAxisValue(100,0);
Try a demo showcasing the getValueAxisValue method.
getXAxisLabels( groupIndex: number): { offset: { x: number, y: number }, value: any }[]Retrieves the calculated screen coordinates and corresponding values for each label displayed on the xAxis after rendering. This includes both the label text/value and its precise position within the rendered chart, enabling advanced positioning or custom interactions with the xAxis labels.
Retrieves the calculated screen coordinates and corresponding values for each label displayed on the xAxis after rendering. This includes both the label text/value and its precise position within the rendered chart, enabling advanced positioning or custom interactions with the xAxis labels.
Arguments
groupIndexnumber
Series group index.
Returns{ offset: { x: number, y: number }, value: any }[]
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getXAxisLabels(0);
Try a demo showcasing the getXAxisLabels method.
getXAxisRect( groupIndex: number): DOMRectRetrieves the rendered bounding rectangle coordinates (position and dimensions) of the x-axis associated with a specified series group. This includes properties such as top, left, width, and height, allowing precise placement and measurement of the x-axis within the chart layout.
Retrieves the rendered bounding rectangle coordinates (position and dimensions) of the x-axis associated with a specified series group. This includes properties such as top, left, width, and height, allowing precise placement and measurement of the x-axis within the chart layout.
Arguments
groupIndexnumber
Series group index.
ReturnsDOMRect
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getXAxisRect(1);
Try a demo showcasing the getXAxisRect method.
getXAxisValue( offset: number, groupIndex: number): objectRetrieves the current value or position of the xAxis (horizontal axis), representing the horizontal coordinate in the relevant context (such as a chart, graph, or UI component). This value typically corresponds to the data point's horizontal placement or the current state of the axis.
Retrieves the current value or position of the xAxis (horizontal axis), representing the horizontal coordinate in the relevant context (such as a chart, graph, or UI component). This value typically corresponds to the data point's horizontal placement or the current state of the axis.
Arguments
offsetnumber
Horizontal offset.
groupIndexnumber
Series group index.
Returnsobject
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
const result = document.querySelector('smart-chart')?.getXAxisValue(100,0);
Try a demo showcasing the getXAxisValue method.
hideSerie( groupIndex: number, serieIndex: number, itemIndex?: number): voidProgrammatically hides a chart series from view. This function produces the same effect as if the user manually unchecked the corresponding series in the chart's legend, making the series invisible on the chart without deleting its data.
Programmatically hides a chart series from view. This function produces the same effect as if the user manually unchecked the corresponding series in the chart's legend, making the series invisible on the chart without deleting its data.
Arguments
groupIndexnumber
Series group index.
serieIndexnumber
Series index.
itemIndex?number
Item (data point) index. Applicable to pie and donut series only.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.hideSerie(0,1,"NaN");
Try a demo showcasing the hideSerie method.
hideToolTip( hideDelay?: number): voidHides the currently displayed tooltip, if one is visible, by removing it from view and ensuring it is no longer accessible to the user.
Hides the currently displayed tooltip, if one is visible, by removing it from view and ensuring it is no longer accessible to the user.
Arguments
hideDelay?number
Hide delay.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.hideToolTip(1000);
Try a demo showcasing the hideToolTip method.
print(): voidGenerates a printer-friendly version of the current chart and sends it to the print dialog, allowing the user to print a physical copy or save it as a PDF.
Generates a printer-friendly version of the current chart and sends it to the print dialog, allowing the user to print a physical copy or save it as a PDF.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.print();
Try a demo showcasing the print method.
refresh(): voidAutomatically updates and redraws the chart element to reflect the latest changes made to its properties or data, ensuring the displayed information is current and accurate.
Automatically updates and redraws the chart element to reflect the latest changes made to its properties or data, ensuring the displayed information is current and accurate.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.refresh();
Try a demo showcasing the refresh method.
removeColorScheme( schemeName: string): voidRemoves a specified color scheme from the system. If the color scheme with the given identifier does not exist, this method performs no action and does not produce an error.
Removes a specified color scheme from the system. If the color scheme with the given identifier does not exist, this method performs no action and does not produce an error.
Arguments
schemeNamestring
The name of the custom color scheme.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.removeColorScheme("'myScheme'");
saveAsJPEG( fileName?: string): voidExports the current chart as a JPEG image file, capturing all visible chart elements and data in the image for easy sharing or saving.
Exports the current chart as a JPEG image file, capturing all visible chart elements and data in the image for easy sharing or saving.
Arguments
fileName?string
File name.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.saveAsJPEG("'myChart.jpeg'");
Try a demo showcasing the saveAsJPEG method.
saveAsPDF( fileName?: string, pageOrientation?: string): voidGenerates and exports the current chart content as a PDF file, preserving the chart’s layout, styles, and data for easy sharing or printing.
Generates and exports the current chart content as a PDF file, preserving the chart’s layout, styles, and data for easy sharing or printing.
Arguments
fileName?string
File name.
pageOrientation?string
PDF page orientation. Possible values: 'portrait' (default), 'landscape'.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.saveAsPDF("'myChart.pdf'","'landscape'");
Try a demo showcasing the saveAsPDF method.
saveAsPNG( fileName?: string): voidExports the current chart, including all visual elements and data, as a PNG image file. This allows users to save or download a snapshot of the chart in a widely supported image format for sharing, reporting, or offline use.
Exports the current chart, including all visual elements and data, as a PNG image file. This allows users to save or download a snapshot of the chart in a widely supported image format for sharing, reporting, or offline use.
Arguments
fileName?string
File name.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.saveAsPNG("'myChart.png'");
Try a demo showcasing the saveAsPNG method.
showSerie( groupIndex: number, serieIndex: number, itemIndex?: number): voidReveals a previously hidden chart series, making it visible on the chart. Calling this function programmatically has the same effect as a user manually selecting (checking) the corresponding legend item to display the series.
Reveals a previously hidden chart series, making it visible on the chart. Calling this function programmatically has the same effect as a user manually selecting (checking) the corresponding legend item to display the series.
Arguments
groupIndexnumber
Series group index.
serieIndexnumber
Series index.
itemIndex?number
Item (data point) index. Applicable to pie and donut series only.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.showSerie(0,1,"NaN");
Try a demo showcasing the showSerie method.
showToolTip( groupIndex: number, serieIndex: number, itemIndex: number, showDelay?: number, hideDelay?: number): voidDisplays a tooltip containing detailed information for a specific data point, typically when the user hovers over or selects that point on a chart or graph.
Displays a tooltip containing detailed information for a specific data point, typically when the user hovers over or selects that point on a chart or graph.
Arguments
groupIndexnumber
Series group index.
serieIndexnumber
Series index.
itemIndexnumber
Item (data point) index.
showDelay?number
Show delay.
hideDelay?number
Hide delay.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.showToolTip(0,1,5,1000,5000);
Try a demo showcasing the showToolTip method.
update(): voidEfficiently updates the values of the chart series in real-time without requiring a complete chart re-render. This method is ideal for animating and reflecting rapidly changing data, ensuring smooth visual transitions and better performance during frequent updates.
Efficiently updates the values of the chart series in real-time without requiring a complete chart re-render. This method is ideal for animating and reflecting rapidly changing data, ensuring smooth visual transitions and better performance during frequent updates.
On the custom element in the DOM (narrow the selector, e.g. to #my-chart, if you host multiple widgets):
document.querySelector('smart-chart')?.update();
Try a demo showcasing the update method.
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