# Charts & Data Visualization

Ask a question about your data and the AI doesn't just return a table — it renders an interactive chart right in the conversation. Hover for tooltips, click legend items to toggle series, and explore the visualization to fit your analysis workflow.

Note
The AI selects chart type, axis mapping, and color palette automatically based on your data and request. Charts are generated as self-contained HTML files and rendered in the file viewer — no external services are called. You can always ask for a different chart type if the AI's initial choice doesn't fit your analysis. On Mobile, charts are viewable in the HTML file viewer but chart generation requires a Web or Desktop session.

## Objective

Understand the chart types available in Studio, how data flows from queries to visualizations, how to interact with rendered charts, and how to build multi-cell dashboards for comprehensive analysis.

## Prerequisites

- Signed in to Treasure AI Studio ([Getting Started](/products/ai-studio/getting-started))
- Familiarity with the chat interface ([AI Chat Interface](/products/ai-studio/chat/chat))
- At least one database with queryable data in your Treasure AI account


## Why Charts Matter in an AI Workflow

Tables show you the numbers. Charts show you the story. When the AI returns query results alongside a chart, you can:

- **Spot patterns instantly** — Trend lines, outliers, and distributions are visible at a glance
- **Validate AI reasoning** — See whether the data supports the AI's summary or recommendation
- **Iterate faster** — Ask "now show this as a funnel" or "break it down by region" and get a new chart in seconds
- **Share with stakeholders** — Charts in dashboards communicate findings without requiring SQL literacy


## Common Chart Types

The AI can generate a variety of chart types depending on your data and request. Common types include:

| Chart Type | Best For | Example Use Case |
|  --- | --- | --- |
| **Bar** | Comparing categories | Revenue by product line |
| **Horizontal Bar** | Long category labels | Top 20 pages by session count |
| **Stacked Bar** | Part-to-whole by category | Conversions by channel and device type |
| **Line** | Trends over time | Daily active users over 90 days |
| **Area** | Volume trends over time | Cumulative revenue by month |
| **Pie** | Proportions of a whole | Traffic source distribution |
| **Scatter** | Correlation between variables | Session duration vs. page views |
| **Radar** | Multi-dimensional comparison | Feature adoption scores across segments |
| **Sankey** | Flow and transitions | User journey from landing page to checkout |
| **Treemap** | Hierarchical proportions | Storage usage by database and table |
| **Funnel** | Sequential drop-off | Signup-to-purchase conversion stages |


Pro Tip
You don't need to memorize chart types. Describe what you want to understand — "show me how users flow through the checkout" — and the AI selects the appropriate chart type (Sankey in this case). If you want a specific type, name it explicitly: "show this as a funnel chart."

## How Charts Are Generated

When you ask a question that benefits from visualization, the AI follows this sequence:

1. **Query execution** — The AI writes and runs a Trino query to retrieve data (see [Query Execution](/products/ai-studio/query/query-execution))
2. **Chart type selection** — Based on the data shape and your request, the AI selects a chart type
3. **Data mapping** — The AI maps query columns to chart axes, series, and labels
4. **File generation** — The AI generates a self-contained HTML file with embedded chart logic and opens it in the file viewer


You see each step in the chat stream — the query as a tool call, then the chart rendering — so you can verify the data before trusting the visualization.

### Example Conversation


```
You: Show me daily signups for the last 30 days

AI: [Runs Trino query with td_interval(-30d)]
    [Renders line chart: x-axis = date, y-axis = signup count]

    Signups have been trending upward, with a notable spike on March 15
    that correlates with the product launch announcement.
```

## Interacting with Charts

### Web & Desktop

Charts rendered as HTML support standard web interactions:

| Action | Behavior |
|  --- | --- |
| **Hover** | Tooltip displays exact values for the data point under your cursor |
| **Click legend** | Toggle a data series on or off to focus on specific metrics |
| **Theme sync** | Charts automatically switch between light and dark mode with your Studio theme |


### Reading the Chart in Context

Charts appear in the **file panel** (right side of the screen). In the chat stream, you see a file notification card with the chart filename — click it to open the chart in the file viewer.

## Color Palette and Theming

The AI typically applies a consistent color palette when generating charts, drawing from the Treasure AI design system. Colors may vary depending on the charting library the AI uses in the generated HTML.

The palette adapts to your theme:

- **Light mode** — Dark axis labels, light grid lines, light tooltip background
- **Dark mode** — Light axis labels, subtle grid lines, dark tooltip background


## Grid Dashboards

Coming Soon
Grid dashboards are a planned feature. The capabilities described in this section are not yet available in the current release.

For comprehensive analysis, the AI will be able to build **grid dashboards** — multi-cell layouts combining charts, tables, KPIs, and other visualizations on a single page.

### Planned Cell Types

| Cell Type | What It Shows | Use Case |
|  --- | --- | --- |
| **Chart** | Any supported chart type | Trend lines, comparisons, distributions |
| **Table** | Sortable data table | Detailed records, top-N lists |
| **KPI** | Single metric with trend indicator | Revenue total, conversion rate, DAU |
| **Gauge** | Semi-circle meter with threshold | SLA compliance, quota progress |
| **Scores** | Labeled progress bars | Feature adoption, health scores |
| **Markdown** | Rich text content | Section headers, explanatory notes |


### Requesting a Dashboard

Ask the AI to build a dashboard by describing what you want to see:


```
You: Build a dashboard showing:
     - Total revenue and MoM growth as KPIs
     - Revenue by region as a bar chart
     - Daily revenue trend as a line chart
     - Top 10 customers as a table
```

The AI generates a multi-cell layout as an HTML file and displays the result in the file viewer. Each cell is independently scrollable and themed.

### Multi-Page Dashboards

Dashboards will support multiple pages. A **page selector dropdown** at the top lets you switch between views — for example, "Overview," "Regional Breakdown," and "Customer Detail."

## Data Format Reference

Understanding how the AI structures chart data helps you make more specific requests:

### Cartesian Charts (Bar, Line, Area, Stacked Bar, Horizontal Bar)

The AI maps your data to:

- **Labels** — Category or time axis (x-axis)
- **Datasets** — One or more data series, each with a label and values


**Example:** "Revenue and costs by quarter" produces:

- Labels: Q1, Q2, Q3, Q4
- Dataset 1: Revenue — [100, 150, 200, 250]
- Dataset 2: Costs — [60, 80, 90, 110]


### Pie and Funnel Charts

Each slice or stage maps to:

- **Name** — Category label
- **Value** — Numeric amount


### Scatter Charts

Each point maps to:

- **X** — Horizontal position
- **Y** — Vertical position
- **Series** — Group label (for multi-series scatter plots)


### Sankey Charts

Flow data maps to:

- **Nodes** — Named entities (pages, stages, categories)
- **Links** — Connections between nodes with flow values


### Treemap Charts

Hierarchical data maps to:

- **Name** — Category label
- **Value** — Area proportion


## Verification

After reading this guide, you can:

- [ ] Request a chart from query results and understand how the AI selects the chart type
- [ ] Interact with a rendered chart using hover tooltips and legend toggles
- [ ] Request a specific chart type by name when the AI's default choice doesn't fit
- [ ] Ask the AI to build a multi-cell grid dashboard with mixed visualization types
- [ ] Explain the difference between a Sankey chart and a funnel chart


## Troubleshooting

| Issue | Solution |
|  --- | --- |
| Chart appears empty | Check the underlying query — expand the tool call in the chat to verify data was returned |
| Wrong chart type | Ask explicitly: "Show this as a bar chart instead" |
| Chart too small | Ask the AI for a "full-width" visualization or regenerate at a larger size |
| Colors hard to distinguish | Switch between light and dark mode — the palette adapts to improve contrast |
| Dashboard cells overlap | Ask the AI to regenerate with a different grid layout (e.g., "use a 2-column layout") |


## Next Steps

- [Query Execution](/products/ai-studio/query/query-execution) — Understand how queries feed data into charts
- [Query Result Tables](/products/ai-studio/query/query-results) — Work with tabular data alongside charts
- [File Output](/products/ai-studio/files/artifacts) — Export charts and dashboards as files (PPTX, PDF)
- [TDX Commands](/products/ai-studio/query/tdx-commands) — Run CLI commands for data exploration before charting