Stepline Chart
Last updated
Was this helpful?
Last updated
Was this helpful?
In a step-line chart, points are connected by horizontal and vertical line segments, looking like steps of a staircase. Step line charts are used when it is necessary to highlight the irregularity of changes: for example, when changes in tax rates or interest rates are visualized.
Properties of Stepline Chart
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
X axis category
Text
Expression
Text categories displayed on x-axis.
Y axis value
Number
Expression
Numeric values displayed on y-axis.
Series
Text
Expression
This field is used to create different groups from the same data source.
It's not required.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position. (Use true or false)
Min scale value
Number
Expression
Minimum value for the scale.
Max scale value
Number
Expression
Maximum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Show markers
Boolean
Boolean expression to show dots at multiple points in the chart.
Marker size
Number
Expression
The size of each marker on the chart.
Marker shape
Text
Dropdown
The shape of the markers. (circle, rect, square).
Marker colors
Text
Expression
The main color of the markers.
Marker stroke colors
Text
Expression
Color for the perimeter of the marker.
Marker stroke width
Number
Expression
Numeric amount for the width of the perimeter line that wraps up the marker.
Height
Text
Expression
Can be set to auto, percentage of container or pixels.
Width
Text
Expression
Can be set to a percentage of container or pixels.
Tooltip
Boolean
Expression
Enables tooltip, shows details of the info when you hover over it.
Label Decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart. (light, dark).
Template
Text
Dropdown
Lines Width
Number
Expression
Width/thickness of the lines of the chart.
Back ground color
Number
Expression
hange the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Show Grid
Boolean
Boolean to activate grid lines options.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid. (use true or false).
Grid lines vertical
Boolean
Expression
Display vertical lines on the grid. (use true or false).
Grid lines color
Text
Expression
Display vertical lines on the grid.
Legend Size
Number
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font Size
Number
Expression
Change font size of the legend.
Legend Position
Text
Dropdown
Change position of the legend. (bottom, top, left, right).
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show Animation
Display animation on render. (True or false)
(palette1, palette2, palette3, palette4, palette5, palette6, palette7, palette8).
