# Chart widget

> The Chart widget draws a bar, line, area, pie or donut chart from a view. Learn how to set up measures, grouping, time series and display options.

A Chart widget draws one chart from a [view](/docs/views). Use it to show how a value changes over time, compare categories, or show the share of a whole.

## Choose a chart type

Under **Chart Type**, pick one of:

| Chart type | Use it for |
| --- | --- |
| **Bar** | Comparing categories, such as jobs per technician. |
| **Line** | A value over time, such as revenue by month. |
| **Area** | A value over time, with the volume emphasized. |
| **Pie** | The share of a whole, such as orders by status. |
| **Donut** | The same as Pie, with a hole in the middle. |

## Create a chart

1. On the dashboard, choose **Add Widget**.
2. Enter a title, for example `Revenue by month`.
3. Under **Widget Type**, choose **Chart**.
4. Under **Data Source**, select the view to read from.
5. Pick a **Chart Type**.
6. Under **Measures**, set what to calculate.
7. Group the data by a field, or by date under **Time Series**.
8. Check the **Live Preview** and choose **Create**.

## Measures

A measure is the value you plot. Each measure has a **Field** and a **Method**:

- **Sum**, **Average**, **Minimum** or **Maximum** of a number field.
- **Count** of rows. Choose **All rows (count)** as the field to count records.

Bar, line and area charts can have up to five measures, so you can plot revenue and cost side by side.

### Series options

Open a measure's options to fine-tune it:

- **Series Label**: the name in the legend. Left empty, it is generated for you.
- **Series Type**: draw this measure as a bar, line or area. This lets one chart mix bars and a line.
- **Axis**: plot the measure on the **Left** or **Right** axis. Use the right axis when two measures have very different scales.
- **Series Color**: a fixed color for this measure. Otherwise a color from the palette is used.
- **Conditional Colors**: up to five rules that change the color based on the value. For example, color a bar red when it is greater than 100.

## Group the data

### Group by a field

Under **Group By (categories)**, add one or more fields, such as Status, Technician or Region. Each value becomes a category on the chart. You can add up to five fields.

For **Pie** and **Donut** charts, the field is called **Split By** and is required. Each value becomes a slice.

### Group by date

Under **Time Series**, choose a date field. Then pick a **Granularity**: minute, hour, day, month or year. Each period becomes a point on the chart.

## Filters

Under **Filters**, add conditions to limit which rows the chart uses, then choose **Apply filters**. For example, only include orders where Status is Done.

This filter defines what the chart shows. It is applied on top of the view, and the view's [access filter](/docs/base-views) still applies.

## Colors and labels

- **Color Palette**: choose **Default**, **Ocean**, **Sunset**, **Forest**, **Berry**, **Mono**, **Pastel** or **Vivid**.
- **X Axis Label**, **Left Y Axis Label** and **Right Y Axis Label**: optional labels for the axes.

## Display options

- **Legend**: place it at the **Top**, **Bottom**, **Left** or **Right**, or choose **Hidden**.
- **Always show legend**: keep the legend visible at all times.
- **Stacked**: stack bars on top of each other instead of side by side. Available for bar charts.
- **Show totals**: show the total above each stacked bar.
- **Show values**: print each value on the chart.

## Examples

| Question | Chart type | Grouping | Measure |
| --- | --- | --- | --- |
| Revenue by month | Line | Time Series on Invoice date, by month | Sum of Amount |
| Jobs per technician | Bar | Group By Technician | Count |
| Orders by status | Donut | Split By Status | Count |
| Revenue and cost by month | Bar with a line series | Time Series on Date, by month | Sum of Revenue, Sum of Cost |

## Related

  - [Widgets](/docs/widgets): Compare all widget types.
  - [KPI widget](/docs/widgets/kpi): Show a single number.
  - [Dashboards](/docs/dashboards): Create and arrange dashboards.

---

Source: https://community.sapugo.app/docs/widgets/chart