> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/modules/3-column-dashboard-widgets.md).

# 3-Column Dashboard Widgets

## Overview

The block includes three common dashboard widgets for displaying metrics, a chart, and a table of recent activities.

![](/files/-LvMmvCh3Eub40TWr3jC)

![](/files/-LvMcWcU9Gq1vr3BwvY-)

## Structure

* When this block is added to a page, it is placed within a group called ***Blocks container 860 (do not rename)*** on the page. This group contains the responsive settings for all blocks.
* This block contains three groups:
  * ***Group Inner metric*** contains a formatted text element for displaying numbers,  dollar amounts ($100.3k, $2.5m, and $12.23B), or star ratings
    * ***Dropdown month*** is hidden by default. You should use the dropdown if you want to display data from different time periods
    * ***Text number*** displays the amount increase or decrease from a defined time period
    * **Group Inner star rating** is hidden by default and contains a star icon. You should use this when you want to display overall star rating instead of dollar amounts
    * ***Text rating*** is hidden by default and displays the star rating increase or decrease from a defined time period
  * ***Group Inner chart*** contains a Bubble chart element for displaying graphs
  * ***Group Inner feed*** contains a table for displaying recent activities
    * ***RepeatingGroup Table*** displays the content (set to Dummy data for now)
* ***Button Add*** is hidden by default. To unhide it, you can remove the hiding rule on ***Group Inner header button*** from the Bubble responsive editor.

## How to set up the numbers widget

* Update the data source of ***Group Inner metrics content\_number*** (type: number). 
* To format the main display text as a number, remove both conditional statements

![](/files/-LvMdiZFj49cbqUNswR-)

* To format the main display text as a dollar amount, remove the first conditional statement for *This url is empty*
* To format the display text as a star rating, remove the second conditional statement and modify the first statement to *This url is not empty*
  * Hide ***Text number***
  * Unhide ***Text rating*** and ***Group Inner star rating***

## How to set up the chart widget

* Update the data source of the Bubble chart element

![](/files/-LvMnAJ1_RudYZ6-T2yt)

## How to set up the table widget

* Update the data source of ***RepeatingGroup Table***

![](/files/-LvMnM5FNwvKF9DopqKs)