# 2-Column Progress Bar Chart Dashboard Widgets

## Overview

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

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MX19f5aDkwHn_6-CrLF%2F-MX1AMLh2utcIGqfxwfC%2Fimage.png?alt=media\&token=04713dfa-1e27-4afe-b9e2-8f183e4875cf)

## 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: 

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MX19f5aDkwHn_6-CrLF%2F-MX1Bs_jA4At_D72LUax%2Fprogress-bar.png?alt=media\&token=c94620f2-af84-4e06-b0ca-7081fff164cc)

* 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])

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MX19f5aDkwHn_6-CrLF%2F-MX1EhEObiGetVW0jnCu%2Fimage.png?alt=media\&token=81e07939-3765-4186-a7cc-0f345476f701)

{% 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.