Skip to main content

Stats Box

A Stat Box widget shows and highlights essential statistics related to the application. The widget comes pre-built with a default layout which can change as per application requirements

How to use Stat Box Widget

Stats Box widget

Stats Box widgets are a class of widgets used to show application information. Following are the Stats Box widgets Appsmith supports -

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties allow you to edit the widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
VisibleControls the visibility of the widget.
Animate LoadingAllows you to control a widget’s animation on the page load.
Scroll ContentsEnables scrolling for content inside the widget.
HeightIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.

Binding properties

These properties help you share values between widgets and also allow you to easily access the widget property within Queries or JS functions.

PropertyDescriptionCode Snippet
isVisibleThis property indicates whether the widget is visible or not.{{Statbox1.isVisible}}

Styles

Style properties allow you to change the look and feel of the widget.

PropertyDescription
backgroundColorControl Stats Box container background color.
Border ColorControls the color of the border, you can use an HTML color name, HEX, RGB, or RGBA value.
Border WidthSets the value for border width.
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.