# Chart With Key Metrics Dashboard Widget

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MWxmksjxmetX4osEl8B%2F-MWxuWRhlkRkgdUUaGo_%2Fpiechart.png?alt=media\&token=867c6908-3aa5-494f-ac4b-0c9010c3c4ca)

The block includes a Bubble chart and a legend.

## 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 Main chart** contains a standard Bubble chart element for displaying graphs
  * **Group Inner legend** contains various text elements for displaying information about the chart
* This block also includes two reusable elements that you can customize:
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters)
  * [**menufocus\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/menufocusgroup-or-menu-options)

## How to set up

* Clone and replace, or hide the **menufocus\_template** element 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).
* Modify the text element data sources
* Update the color conditional statements on the shape elements to match the colors in the chart

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MWxmksjxmetX4osEl8B%2F-MWxwsZxY-3nNbVbOWdv%2FScreen%20Shot%202021-03-29%20at%205.25.19%20AM.png?alt=media\&token=8f096794-c234-478e-b6b7-44bf2bb5fa4b)

* Update the data source for **Line/BarChart**
* Hide any UI elements that you are not using by unchecking the element's box for This element is visible on page load