> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Widgets
> Explore the widget types and visualization options in Twenty.
export const ChartIcon = ({icon, size = 20}) => {
const icons = {
'database': ,
'filter': ,
'axis-x': ,
'axis-y': ,
'sum': ,
'chart-pie': ,
'chart-line': ,
'calendar': ,
'arrows-sort': ,
'filters': ,
'chart-bar-popular': ,
'math-min': ,
'math-max': ,
'color-swatch': ,
'gizmo': ,
'stack-2': ,
'badge-2k': ,
'text-caption': ,
'eye-off': ,
'caret-left': ,
'caret-right': ,
'number-123': ,
'frame': ,
'align-box-left-top':
};
const selectedIcon = icons[icon];
if (!selectedIcon) {
return null;
}
return selectedIcon;
};
## Available Widgets
Twenty provides various widget types to visualize your CRM data.
### Bar Charts
Display data as horizontal or vertical bars.
**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
**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).
### Pie Charts
Show proportions of a whole.
**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
### Line Charts
Display trends over time.
**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
### Aggregate Charts
Display single key values prominently.
**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.
### iFrames
Embed external tools and content directly in your dashboard.
**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
### Rich Text
Add formatted text and content directly to your dashboard.
**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
**Coming soon**: Gauge charts and tables are not yet available but are on our roadmap.
### Duplicating Widgets
1. Click on the widget
2. Open **Options**
3. Click **Duplicate widget**
**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
**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
### 
**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
### 
**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.
### 
**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
### 
**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