> ## Documentation Index
> Fetch the complete documentation index at: https://docs.costory.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard Widgets and Chart Types

> Choose dashboard widgets and chart types for cloud cost dashboards, including bar charts, line charts, waterfall charts, doughnut charts, tables, KPI cards, budget trackers, and BigQuery SQL export.

Dashboard widgets are saved cost views. Each widget can use Explorer-style metrics, formulas, filters, group-bys, comparison periods, and event context.

## Widget types

| Widget         | Best for                                                                                        |
| -------------- | ----------------------------------------------------------------------------------------------- |
| Cost trend     | Showing spend over time with a line, area, or bar chart                                         |
| Cost breakdown | Showing how groups contribute to total spend by service, account, team, product, or environment |
| Waterfall      | Explaining which groups drove an increase or decrease between two periods                       |
| Doughnut       | Showing the proportional split of a selected period                                             |
| Table          | Reviewing sortable cost data and exact values                                                   |
| KPI card       | Displaying one number, such as total spend, cost per user, or Savings Plan coverage             |
| Budget tracker | Comparing actual spend with a [budget](/features/budgets) target                                |

## Chart types

Choose the chart type based on the question the widget should answer.

<Frame caption="Chart type selector with Line, Bar, Donut, Waterfall, and Table options">
  <img src="https://mintcdn.com/costory/oeRxBwpaIsrO1jb9/images/different%20chart%20types.png?fit=max&auto=format&n=oeRxBwpaIsrO1jb9&q=85&s=f4747bcc7b7df93d96c4ab3f2e242576" alt="Chart type selector showing Line, Bar, Donut, Waterfall, and Table visualization options in Costory" width="1631" height="730" data-path="images/different chart types.png" />
</Frame>

| Chart type      | Use it when                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------- |
| Bar chart       | You need to compare grouped spend over time and see how each group contributes to the total. |
| Line chart      | You need to compare trends across services, teams, or providers.                             |
| Area chart      | You need a trend view that emphasizes total spend volume.                                    |
| Doughnut chart  | You need a proportional split for one period, such as spend by provider or team.             |
| Waterfall chart | You need to explain what changed between the selected period and the reference period.       |
| Table           | You need exact values, sorting, or a top-cost breakdown.                                     |

## Waterfall charts

Waterfall charts show which services, accounts, teams, or products drove a cost increase or decrease between two periods. Use them during budget reviews, migration reviews, and cost-change explanations.

<Frame caption="Cost Waterfall shows which groups contributed most to a cost change">
  <img src="https://mintcdn.com/costory/oeRxBwpaIsrO1jb9/images/Waterfall.png?fit=max&auto=format&n=oeRxBwpaIsrO1jb9&q=85&s=0b06bfa7baf6f66bb6cc10818bb5edf1" alt="Cost Waterfall chart breaking down an AWS cost increase by service" width="1209" height="339" data-path="images/Waterfall.png" />
</Frame>

Pair waterfall charts with [events](/features/events) when you need to explain whether a deploy, migration, purchase, or business change happened near the cost movement.

## Doughnut charts

Doughnut charts show proportional spend for a selected period. Use them for high-level split views such as cost by provider, business unit, environment, or product.

## Tables

Table widgets show the data behind a chart. Use them when reviewers need exact values, sorting, or exportable cost breakdowns.

Tables can include:

* Selected-period cost
* Reference-period cost when comparison is enabled
* Absolute change
* Relative change
* Cost, usage, budget, or formula values

## Budget vs actual widgets

Use a budget widget when you want to compare an approved [<Tooltip tip="A spending target set for a team, project, or cloud account over a given period." cta="See Glossary" href="/docs/glossary#budget">budget</Tooltip>](/features/budgets) with actual spend.

<Steps>
  <Step title="Edit the dashboard widget">
    Open the dashboard, click the widget action menu, and select **Edit widget**.
  </Step>

  <Step title="Add the budget metric">
    Click **Add Metric**, open the **budget** tab, and choose the budget version you want to analyze.
  </Step>

  <Step title="Add related cost">
    Open the action menu for the budget metric and click **Add related cost**. Costory adds a cost metric scoped to the budget definition.
  </Step>

  <Step title="Break actual spend down">
    Set **Group By** on the related cost metric to the dimension you use for ownership, such as team, squad, or product line.
  </Step>

  <Step title="Save the widget">
    Click **Save**.
  </Step>
</Steps>

<Frame caption="A dashboard widget comparing a budget target with actual spend grouped by squad">
  <img src="https://mintcdn.com/costory/7OsIkzfpYdXuwrwn/images/budget-dashboard-actual-spend.png?fit=max&auto=format&n=7OsIkzfpYdXuwrwn&q=85&s=16e6ecb00e09b5687f9e32bea054e700" alt="Costory dashboard widget editor showing a budget metric with related actual cost grouped by squad" width="2866" height="1540" data-path="images/budget-dashboard-actual-spend.png" />
</Frame>

## Color palettes

Each chart widget can use one of four color palettes. Switch palettes to keep visuals readable across stacked bars, line charts, and grouped breakdowns. The setting lives in the widget editor's chart display options.

<Frame caption="Choose a chart color palette">
  <img src="https://mintcdn.com/costory/4RO_44YBsKyrvvT3/images/dashboard/choose-colors.png?fit=max&auto=format&n=4RO_44YBsKyrvvT3&q=85&s=df19db3395dd91905744e41c8647e4ba" alt="Chart color palette options in a dashboard" width="1919" height="945" data-path="images/dashboard/choose-colors.png" />
</Frame>

## Export widget SQL to BigQuery

BigQuery data exports let you query the same cost data shown in a dashboard widget from your own BigQuery project. Use this when you want to reuse dashboard logic in Looker, notebooks, dbt, or custom SQL without rebuilding filters.

<Frame caption="Copy SQL query from a dashboard widget">
  <img src="https://mintcdn.com/costory/1x7SbT2zUG6hiSyD/images/dashboard/export-to-sql.png?fit=max&auto=format&n=1x7SbT2zUG6hiSyD&q=85&s=9880738ba81e552b692d1208e09bb163" alt="Copy SQL query action on a dashboard widget" width="1651" height="699" data-path="images/dashboard/export-to-sql.png" />
</Frame>

<Steps>
  <Step title="Set up the BigQuery destination">
    Ask an **Organization Admin** to grant your BigQuery user or service account read access to the Costory export table under **Integrations > Destinations**. See [BigQuery Data Exports](/setup/destinations/bigquery) for setup.
  </Step>

  <Step title="Open the dashboard widget">
    Open the dashboard that contains the widget you want to query outside Costory.
  </Step>

  <Step title="Copy the SQL">
    Open the widget action menu and click **Copy SQL query**.
  </Step>

  <Step title="Run the query">
    Paste the SQL into BigQuery, Looker, or a notebook that can query BigQuery.
  </Step>
</Steps>

The copied SQL reflects the widget configuration, including metric, filters, group-by, and date range.

## Related links

<CardGroup cols={2}>
  <Card title="Create and organize dashboards" icon="table-columns" href="/features/dashboards/create-dashboard">
    Add widgets to dashboards and organize them for teams.
  </Card>

  <Card title="Dashboard templates" icon="copy" href="/features/dashboards/templates">
    Start with pre-built FinOps widgets.
  </Card>

  <Card title="Unit Economics" icon="calculator" href="/features/unit-economics">
    Add usage metrics and formulas to the queries behind widgets.
  </Card>

  <Card title="BigQuery Data Exports" icon="database" href="/setup/destinations/bigquery">
    Set up the destination used by SQL export.
  </Card>
</CardGroup>
