Stepline Chart

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.

You can find a more in depth explanation about the stepline on this page: https://apexcharts.com/docs/chart-types/line-chart/

Step Line Chart

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	A set of predefined color values for the chart groups. (palette1, palette2, palette3, palette4, palette5, palette6, palette7, palette8).
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)