Files
upstream-twenty/packages/twenty-docs/user-guide/dashboards/capabilities/widgets.mdx
upstream-mirror e7da97194a
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s
snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
2026-09-17 23:28:13 +05:00

160 lines
4.7 KiB
Plaintext

---
title: Widgets
description: Explore the widget types and visualization options in Twenty.
---
import { ChartIcon } from '/snippets/chart-icon.mdx';
## Available Widgets
Twenty provides various widget types to visualize your CRM data.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Bar Charts</span>
Display data as horizontal or vertical bars.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Bar chart" />
</Frame>
**Best for:**
- Comparing values across categories
- Showing rankings
- Tracking metrics by time period
**Example uses:**
- Deals by stage
- Revenue by sales rep
- Contacts added per month
<Note>
**Display limits**: Bar charts can show a maximum of 100 bars, and 50 groups per bar when using Group By. If you see the warning "Undisplayed data: max X bars per chart", add filters to narrow down your data or change the grouping (e.g., group by week instead of days).
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Pie Charts</span>
Show proportions of a whole.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Pie chart" />
</Frame>
**Best for:**
- Showing composition or distribution
- Comparing parts to whole
- Highlighting major segments
**Example uses:**
- Deal distribution by source
- Contact breakdown by industry
- Pipeline composition by owner
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Line Charts</span>
Display trends over time.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Line chart" />
</Frame>
**Best for:**
- Tracking changes over time
- Identifying trends
- Comparing multiple metrics
**Example uses:**
- Monthly deal count trend
- Revenue growth over quarters
- Activity levels over time
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Aggregate Charts</span>
Display single key values prominently.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Aggregate chart" />
</Frame>
**Best for:**
- Highlighting KPIs
- Showing totals or averages
- Quick status checks
**Example uses:**
- Total pipeline value
- Number of open opportunities
- Conversion rate
**Advanced options:**
- **Ratio**: For Select fields, calculate ratios between values. Go to **Data on display** → select your field → enable the **Ratio** option.
- **Prefix & Suffix**: Add custom text before or after the number (e.g., "$" prefix or "%" suffix) for better readability.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
Embed external tools and content directly in your dashboard.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-table.png" alt="Table chart"/>
</Frame>
**Best for:**
- Searching individual items
- Checking exact values
- Auditing or reference
**Example uses:**
- Deals closing this month
- New leads this week
- Overdue invoices
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="table" />Table</span>
See filtered records directly in your dashboard.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
</Frame>
**Best for:**
- Displaying external reports or dashboards
- Integrating third-party sales tools
- Showing live content from other systems
**Example uses:**
- Metrics from your Support tool
- Metrics from your dialer
- Live content from your Sales sequence tool
#### Editing records
Dashboard table and kanban widgets are read-only by default. To let users edit records from a widget:
1. Edit the dashboard
2. Select the widget
3. Turn on **Allow editing** in the widget settings
For tables, this enables cell editing. For kanban boards, it enables editing cards, moving them between columns, and creating records. Role permissions still apply.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Rich Text</span>
Add formatted text and content directly to your dashboard.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Rich text" />
</Frame>
**Best for:**
- Adding context or instructions
- Dashboard descriptions
- Notes and annotations
**Features:**
- Rich text formatting (bold, italic, lists, etc.)
- Image and file uploads
- Markdown-style editing
<Note>
**Coming soon**: Gauge charts are not yet available but are on our roadmap.
</Note>
### Duplicating Widgets
1. Click on the widget
2. Open **Options**
3. Click **Duplicate widget**