SimpleLineChart

The SimpleLineChart widget is a lightweight line chart that plots a list of numbers as a connected line to visualize a trend.
Use it to show movement at a glance, such as a stock price or a changing metric.

Definition and role

The SimpleLineChart widget takes a list of data values (dataList) and draws a line that connects each value as a point. Render it as straight segments or as a smooth spline curve. It also supports filling the area under the line, highlighting the minimum and maximum points, and an entrance animation.

• Category: Contents
• Palette item name: SimpleLine
• Default size: 300 wide × 150 tall
• With no data, the editor shows a placeholder box labeled SimpleLineChart.

Features

Feature	Description
Line drawing	Connects the values in dataList into a line. Set its color and thickness with lineColor and lineWidth.
Curve or straight	Turn on isSpline for a smooth curve, or leave it off for straight segments. (A curve needs 4 or more points.)
Area fill	Set areaColor or areaGradient to fill the area under the line.
Min and max markers	Turn on showMinMax to mark the lowest and highest data points with a dot and text (minText, maxText).
Entrance animation	Turn on useAnimation and the graph unfolds from a horizontal center line.
Range and insets	Set the vertical axis range with min and max, and the top and bottom insets with topInset and bottomInset.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the SimpleLine item onto the canvas.
3. In the properties panel on the right, enter the numbers to plot in dataList.
4. Adjust the line with lineColor, lineWidth, and isSpline as needed.
5. Turn on highlights and animation with showMinMax and useAnimation.

Properties

Property	Description	Default	Value / type
dataList	List of numbers to plot. Each value becomes one point on the line.	Empty list	List of numbers
useAnimation	Whether to play the entrance animation	false	true / false
showMinMax	Whether to highlight the minimum and maximum points	false	true / false
minText	Text shown at the minimum point	Not set	String
minColor	Color of the dot and text at the minimum point	Not set (shown in blue)	Color
maxText	Text shown at the maximum point	Not set	String
maxColor	Color of the dot and text at the maximum point	Not set (shown in red)	Color
isSpline	Whether to draw a spline curve	false	true / false
lineWidth	Line thickness	1.0	Number (0.1~10.0)
lineColor	Line color	#FF0000 (red)	Color
lineGradient	Gradient applied to the line — used instead of lineColor when set	Not set	Gradient
areaColor	Fill color for the area under the line	Not set	Color
areaGradient	Fill gradient for the area under the line	Not set	Gradient
topInset	Top inset, as a % of the chart height	Not set	Number (0~100)
bottomInset	Bottom inset, as a % of the chart height	Not set	Number (0~100)
min	Lowest value on the vertical axis — falls back to the lowest data value when unset	Not set	Number
max	Highest value on the vertical axis — falls back to the highest data value when unset	Not set	Number

Notes and tips

warning

When dataList is empty, no line is drawn. The editor shows only the SimpleLineChart placeholder box.

tip

Leave min and max unset and the vertical axis adjusts automatically to the lowest and highest data values. An isSpline curve only applies with 4 or more points — with fewer, the chart draws straight segments.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) for scripting this widget, visit SimpleLineChart Widget Control.