> 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/modules/3-column-dashboard-widgets.md).

# 3-Column Dashboard Widgets

## Overview

The block includes six common dashboard widgets for displaying metrics, a chart, progress, and recent activities.

![](/files/-MXYQSC703Pm0f0GEh2v)

## 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 six widget groups:
  * **Group main progress bar tile** contains progress bars with labels
  * **Group main chart tile** contains a Bubble chart element for displaying graphs
  * **Group main table tile** contains a 3-row repeating group to display an activity feed or a list of related transactions
  * **Group main progress bar with images tile** contains progress bars with images and labels
  * **Group main metric with breakdown tile** and **Group main metrics tile** both contain various text elements for displaying metrics
* This block also includes a reusable element that you can customize:
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters)

## How to set up progress bar widgets

* All progress bar elements are Bubble elements that can dynamically display a percentage:

![](/files/-MXYTo-h3INdJSCpWsGi)

* For example, if you would like to display which percentage of revenue comes from a specific source (e.g., Shopify), you can set that progress bar's "Percentage" data source to be that dynamic expression (e.g., \[Shopify Revenue numeric value]/\[Total Revenue numeric value])

![](/files/-MXYTzkL3R5mk1B0a9CS)

## How to set up the chart widget

* Update the data source of the Bubble chart element

![](/files/-MXYUSw1Ei69beDluMnP)

## How to set up the table widget

* Update the data source of **RepeatingGroup Dummy**
* Update the text elements in the repeating group so they are referencing current cell's data's \[field]

![](/files/-MXYUsnETdgAnuABNuI5)

## How to set up the metrics widgets

* Update the data sources of all text elements within the group

![](/files/-MXYVdQo-jYLBCUGxwm6)

## Other updates

* Each widget group includes a primary action button
* To use, please remember to add a workflow to the button.
* To hide, please select **Group responsive primary action container** and uncheck the box for This element is visible on page load.

![](/files/-MXYWXCgY29BEXIXydut)