# 2-Column Progress Bar Chart Dashboard Widgets

## Overview

This block includes two dashboard widgets for displaying progress bar charts with metrics:

![](/files/-MX1AMLh2utcIGqfxwfC)

## 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 two groups:
  * **Group Responsive chart 1** contains two progress bar metric groups with labels for each metric
  * **Group Responsive chart 2** contains three progress bar metric groups without logos for each metric

## How to set up the progress bar elements within each chart

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

![](/files/-MX1Bs_jA4At_D72LUax)

* 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/-MX1EhEObiGetVW0jnCu)

{% hint style="info" %}
For more information on using hidden variables, please visit [this section](https://docs.airdev.co/canvas/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup) of the Canvas Manual. 
{% endhint %}

## How to set up the title, menufocus, and button elements

* Clone and replace, or hide the **menufocus\_template** elements depending on whether the the app needs to associate more actions with this table (e.g., Edit, Delete). For more information about how to best use **menufocus\_template** within your application, please [click here](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/menufocusgroup-or-menu-options).
* Update the title and description above the **Group Inner Large Title container** groups, or hide the groups if they are not needed.
* Modify or hide the **Group Secondary action** elements.
* Modify or hide the **Group Primary action** elements.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/modules/2-column-progress-bar-chart-dashboard-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.