# Chart and table widgets

> Source: https://docs.clonepartner.com/reference/widgets/charts-and-table/

<!-- sources: src/dashboard/register-widget-types.ts, src/dashboard-parser.ts, ui/src/components/dashboard/widgets/DashboardChartWidget.vue, ui/src/components/dashboard/widgets/DashboardTableWidget.vue, references/envoy/dashboards.md -->

# Chart and table widgets

Read-only widgets that render arrays of records: `bar_chart`, `line_chart`, `pie_chart`, and `table`. All four require a `data` connector call; aggregate and limit server-side so the result stays bounded. Shared keys (`id`, `title`, `width`, `scope`, `refresh_interval_seconds`) are on the [Widgets overview](/reference/widgets/).

For large or interactive collections, use the [`explorer` widget](/reference/widgets/inputs-and-actions/) instead — it pages, filters, and exports server-side.

## `bar_chart`

| Key | Type | Required | Description |
|---|---|---|---|
| `data` | object or JSONata string | Yes | Read-only call config `{ connector, method, args? }` returning an array of objects. |
| `series_expr` | string | No | JSONata applied to the result. |

The renderer picks the label field from `label`, `name`, `key`, the first string field, or the first field; and the numeric value field from `value`, `count`, `n`, the first non-label number field, or the second field. Emit explicit `label` and `count` fields from your aggregation rather than relying on the fallbacks.

```yaml
- id: tickets_by_outcome
  type: bar_chart
  title: Tickets by outcome
  width: 2
  data:
    connector: mongo
    method: aggregate
    args:
      collection: zendesk_tickets
      pipeline:
        - { "$group": { "_id": "$outcome", "count": { "$sum": 1 } } }
        - { "$project": { "_id": 0, "label": "$_id", "count": 1 } }
        - { "$sort": { "count": -1 } }
```

Missing `data` fails parsing with `<path>.data is required for bar_chart`.

## `line_chart`

Identical configuration to `bar_chart` (`data` required, optional `series_expr`), rendered as a line chart. Suits ordered series such as counts per day — sort the aggregation server-side.

## `pie_chart`

Identical configuration to `bar_chart`, rendered as a pie chart. Keep the number of slices small with a `$group` plus `$sort`/`$limit` aggregation.

## `table`

A fixed, bounded result set with declared columns.

| Key | Type | Required | Description |
|---|---|---|---|
| `data` | object or JSONata string | Yes | Read-only call config returning rows. |
| `columns` | array | Yes | Non-empty array of column definitions. |

Each column:

| Field | Required | Description |
|---|---|---|
| `field` | Yes | Row field to display. |
| `label` | No | Header label. |
| `format` | No | `date`, `datetime`, `number`, or `truncate`. |

Formats are applied by the renderer: `date`/`datetime` parse the value and render locale date or date-time strings, `number` renders a locale-formatted number, and `truncate` clips long text. Empty and null values render as an em dash. The executor clamps table calls to 500 rows — apply your own `limit` and `sort` in the call args.

```yaml
- id: recent_errors
  type: table
  title: Recent errors
  data:
    connector: mongo
    method: find
    args:
      collection: migration_errors
      filter: { severity: error }
      limit: 50
      sort: { created_at: -1 }
  columns:
    - { field: created_at, label: Time, format: datetime }
    - { field: resource, label: Resource }
    - { field: message, label: Message, format: truncate }
```

Missing `data` fails with `<path>.data is required for table`; a missing or empty `columns` array fails with `<path>.columns must be a non-empty array`; each column requires `field`.

## Public share behavior

On the public share surface the connector call config (`data`) is stripped for all four types; `table` keeps its `columns` so the layout renders. See [Authoring dashboards](/building/authoring-dashboards/).

## Related

- [Widgets overview](/reference/widgets/) — shared keys and data binding
- [Input and action widgets](/reference/widgets/inputs-and-actions/) — `explorer` for large collections
- [Display widgets](/reference/widgets/display/) — stat and progress for single numbers