SimpleBarChart

The SimpleBarChart widget is a lightweight bar chart that draws a list of values as vertical bars, so you can compare sizes across categories at a glance.
It shows positive and negative values together, and each bar takes its own color and width.

Definition and role

The SimpleBarChart widget draws bars side by side, each with a height proportional to its value. Give every bar its own color and width, and pick a baseline style to change where positive and negative bars sit.

• Category: Contents
• Palette item name: SimpleBar

Features

Feature	Description
Bar data	Fill series with a list of bars, each carrying a value, color, and width. A script can populate it too.
Baseline style	Use baseStyle to put the zero line at the bottom (zero), the middle (centerzero), or the lowest value (min).
Zero line	Turn on drawZeroLine to draw the baseline as a horizontal line.
Entrance animation	Turn on useAnimation to play an animation of the bars growing from zero.
Spacing and corners	Set the gap between bars with spacing, and round the two ends of each bar with radius and baseRadius.
Drawing insets	Set the top and bottom drawing insets (%) with topInset and bottomInset.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the SimpleBar item onto the canvas.
3. In the properties panel on the right, add bar data to series — or call setListData or setStringData from a script to fill in the values.
4. Adjust the look with baseStyle, spacing, radius, and more as needed.

note

Screenshot needed: dragging the SimpleBar item from the Contents category of the left widget palette onto the canvas

Properties

Property	Description	Default	Value / type
series	List of bars. Each item has a value, a color, and a width.	Empty list	List of bar data
baseStyle	Baseline (zero line) style	zero	zero, centerzero, min
drawZeroLine	Show the baseline as a horizontal line	false	true / false
useAnimation	Play an animation of the bars growing on appearance	false	true / false
spacing	Gap between bars	5	Number (0 or greater)
radius	Corner rounding at the value end of each bar	Not set	Number (0 or greater)
baseRadius	Corner rounding at the baseline end of each bar	Not set	Number (0 or greater)
topInset	Top drawing inset (%)	Not set	Number (0~100)
bottomInset	Bottom drawing inset (%)	Not set	Number (0~100)

Notes and tips

warning

When series is empty, the editor shows a 'SimpleBarChart' notice box and the running screen draws no bars. Add data to make the chart appear.

tip

Set either radius or baseRadius and the bars get rounded corners. Leave both unset and they draw as sharp rectangles.

Learn more

tip

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