---
title: "Show cards, charts, tables, maps and diagrams in chat"
description: "Add display power-ups so your bot can show results as cards, charts, tables, maps or Mermaid diagrams in the web chat, instead of plain text."
canonical_url: "https://chatthing.ai/docs/power-ups/displays"
last_updated: "2026-09-25"
---

# Show cards, charts, tables, maps and diagrams in chat

**Available on:** Basic, Standard, Pro, Enterprise plans.

Add display power-ups so your bot can show information visually in the chat, for example a carousel of products, a revenue chart or a comparison table, instead of a long text reply.

**Who can do this:** [team owners and admins](https://chatthing.ai/docs/account/teams#what-each-role-can-do).

Display power-ups don't fetch any data. The bot fills them with what it already has: the conversation, its [knowledge](https://chatthing.ai/docs/knowledge) and results from other power-ups. It then calls the display power-up to show that content.

> **Displays or display modes?**
>
> **Display power-ups** (this page) are separate power-ups the bot can choose to use for any content. A **display mode** is a setting on another power-up, such as **API request**, that always turns *that* power-up's result into a display. See [Show a power-up's results visually](https://chatthing.ai/docs/power-ups/display-modes).

## The display power-ups

| Power-up | Best for | Setting |
| --- | --- | --- |
| **Display cards** | Products, listings, team members, search results: anything people browse. | None. The bot chooses a horizontal carousel or a vertical list each time. |
| **Display chart** | Numbers across categories or time. | **Chart type**: the default type (**Bar**, **Line**, **Pie** or **Doughnut**). The bot can use a different type when it suits the data better. |
| **Display table** | Comparing several fields across several items. | None. |
| **Display map** | Locations, routes and areas, like store finders or delivery zones. | **Map style**: **Auto** follows the chat's light or dark theme. **Light** and **Dark** force a style. |
| **Display Mermaid** | Processes, flowcharts, sequences and relationships. | None. |

## Where displays appear

Displays appear in the website widget, when you test your bot in the dashboard, and in [API](https://chatthing.ai/docs/developers/chat-api) responses. On Slack, WhatsApp, Telegram, email and other channels that can't show them, display power-ups aren't offered to the bot, so it replies in text instead.

## Steps

1. Open your bot, go to the **Power-ups** tab and click **New power-up**.
2. Choose a display power-up, for example **Display cards**, and click **Create power-up**.
3. Edit the **Description** to say when the bot should use it. This is the most important setting. For example: "Use this to show products whenever the user is browsing or comparing items."
4. For **Display chart** and **Display map**, choose the default **Chart type** or **Map style**.
5. Click **Save**.
6. Repeat for any other display types you want.

## What each display shows

### Cards

Each card has a **title** and a short **description**, and optionally a **subtitle** (such as a price or status), an **image** (a direct image URL) and a **url** that opens when the card is clicked. The bot only adds the optional fields when it has real values.

Cards appear either as a horizontal, swipeable carousel (good for skimming several items) or as a vertical list (better when each card has more to read).

![A horizontal carousel of three cards, each with a title, year, photo and short description](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776262545/docs/cards-horizontal.png)

![Five cards shown as a vertical list, each with a photo, title, year and a short description](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776262550/docs/cards-vertical-layout.png)

### Charts

A chart has category or time **labels** and one or more **datasets**, each with a name and a list of numbers. It can also have a **title** and axis labels. Use bar charts to compare categories, line charts for trends over time, and pie or doughnut charts for parts of a whole with only a few slices.

![A bar chart titled Quarterly Revenue Data for 2025 comparing three revenue streams across four quarters](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776348204/docs/chart-bar-chat.png)

![A doughnut chart titled Browser Market Share splitting usage between Chrome, Safari, Firefox, Edge and other browsers](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776348461/docs/chart-doughnut-chat.png)

### Tables

A table has **columns**, each with a label and a type, and **rows** of cells. Column types are **text**, **image** (shows a thumbnail from a URL) and **link** (shows a clickable link).

![A table of quarterly revenue with a column for each revenue stream](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776348809/docs/table-chat.png)

### Maps

A map shows points (single locations), lines (routes) and polygons (areas). Each one can have a title, subtitle, description, image and link, which appear when someone selects it on the map. The bot needs coordinates to place things, so maps work best when your data includes them.

![A dark-style map titled UK Cities Map with markers for several UK cities](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272098/docs/displaymodes-map-chat.png)

### Mermaid diagrams

The bot writes [Mermaid](https://mermaid.js.org/) syntax, such as a flowchart, sequence diagram, entity-relationship diagram, Gantt chart or state diagram, and the chat draws it. You can steer the diagram type in the **Description** or your bot's prompt.

![A Mermaid flowchart titled Customer Support Ticket Lifecycle drawn in the chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272099/docs/displaymodes-mermaid-chat.png)

## Tips

- **Give the bot real content to show.** Displays work best with a data source or power-up that provides concrete items (products, listings, figures), so the bot doesn't have to invent them.
- **Steer from the prompt.** A line in your bot's [prompt](https://chatthing.ai/docs/bot-settings/instructions) such as "When showing several items to compare, use the display power-ups instead of a bulleted list" is often enough to change the bot's default behaviour.
  ![A bot prompt telling the bot to use the Display Cards power-up instead of a bulleted list when comparing items](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776262551/docs/cards-system-prompt.png)
- **Keep displays short.** Short titles and descriptions read better in a chat window, especially on mobile. If the bot writes long card descriptions, say so in the **Description**.
- **The bot knows what it showed.** After a display appears, the bot won't normally repeat the same items in its text reply. Visitors can still ask it to compare, filter or explain what's on screen.

## Check it works

1. In the dashboard, chat with your bot and ask for something that should use the display, for example "Show me three of your products".
2. Check that the display appears below the power-up label.

## Troubleshooting

### The bot replies in text instead of using a display

Make the power-up's **Description** clearer about when to use it, or add a rule to your bot's prompt. If you're testing in Slack, WhatsApp or another channel that can't show displays, text is expected.

### The bot repeats information already shown in the display

1. Add a rule to your bot's prompt, for example: "Don't repeat items you've already shown as cards, charts or other displays."
2. Try a more capable [model](https://chatthing.ai/docs/bot-settings/models). Less capable models are more likely to repeat themselves.

## Related

- [Show a power-up's results visually](https://chatthing.ai/docs/power-ups/display-modes): Turn on a display mode so a power-up's results, such as an API response or search results, appear as cards, a chart, a table, a map or a diagram.
- [How power-ups work](https://chatthing.ai/docs/power-ups/how-power-ups-work): What power-ups are, how to add, edit, turn off and delete them, how your bot decides to use one, and what visitors see in the chat.