# Detail: Charts Widget

You can add charts to your Detail Layouts and Custom Pages to show data from your tables in a bar, line or donut chart.

Types of displays you can add to your layouts:

* Bar Chart
* Line Graph
* Donut Chart

## Add a chart widget <a href="#id-01h8006facm3a5wgvqf470hxbb" id="id-01h8006facm3a5wgvqf470hxbb"></a>

You can add three charts to each widget.

1. Click **Edit layout**
2. Select **Charts** widget
3. Click **Add Chart**
4. Choose the data source for your chart
5. Choose the chart type: [donut](#h_01H7ZZDBE4M5MYH8A5JYRE234E), [bar](#h_01H7ZZCXD1K3NKP3C76QR0PD0N) or [line chart](#h_01H7ZZD5B2CF2EDKH88R9RDBM8)
6. Choose how to group your data
7. Save your layout

## Set up Bar Charts <a href="#id-01h8d0crwc8pdpz7gga9e3x0ne" id="id-01h8d0crwc8pdpz7gga9e3x0ne"></a>

**Horizontal axis:** Choose which field you’d like to show on the x-axis from your selected data source.

**Vertical axis**: Choose an aggregate measure for the y-axis, e.g. record count, field sum, or field average.

**Group by:** Add an optional ‘Group by’ field. For example, you could create a *line chart to display the number of tickets every day for the past week, grouped by the teams assigned to each ticket.*

#### Display options <a href="#id-01h82pq2x51trz3xsc2b5f08rc" id="id-01h82pq2x51trz3xsc2b5f08rc"></a>

You can choose to:

* Show Horizontal or Vertical charts
* Hide labels and values
* Sort by label or values, and ascending or descending
* Round or Abbreviate long results
* Show a maximum number of items to appear on the chart

**Tip**

To show the colors of your single select or multi select fields choose the field in the "Group by" on the Bar Chart.

## Set up Line Chart <a href="#h_01h7zzd5b2cf2edkh88r9rdbm8" id="h_01h7zzd5b2cf2edkh88r9rdbm8"></a>

**Horizontal axis:** Choose a **date** or **datetime** field to display on the x-axis from your selected data source.

**Bucket values by:** Choose how you would like to group your records: Day, week, month, quarter, or year.

**Vertical axis**: Choose an aggregate measure for the y-axis: record count, field sum or field average.

**Group by:** Add an optional ‘Group by’ field, for example you could create a line chart to display the number of tickets every day for the past week, grouped by the teams assigned to each ticket.

#### Display options: <a href="#id-01h82p5tb6w6excychh2nrtdmn" id="id-01h82p5tb6w6excychh2nrtdmn"></a>

You can choose to:

* Hide labels and values
* Round or Abbreviate long results
* Show a maximum number of items to appear on the chart

## Set up Donut Chart <a href="#h_01h7zzdbe4m5myh8a5jyre234e" id="h_01h7zzdbe4m5myh8a5jyre234e"></a>

**Group by:** Choose which field to group by.

**Aggregate Measure**: Choose an aggregate measure for the y-axis: record count, field sum, or field average.

#### Display options <a href="#id-01h82prgkvfd16gevex7kevy1m" id="id-01h82prgkvfd16gevex7kevy1m"></a>

You can choose to:

* Hide labels and values
* Round or Abbreviate long results
* Show a maximum number of items to appear on the chart


---

# 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.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-charts-widget.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.