Graph
A versatile data visualization component that supports bar charts, line charts, and pie charts with customizable styles. Perfect for displaying analytics, trends, and comparative data.
Examples
This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).
Quarterly Sales Chart
Tambo Conversations
Loading threads...
Installation
Component API
Graph
| Prop | Type | Default | Description |
|---|---|---|---|
| data | GraphData | - | Data object containing chart type, labels, and datasets |
| title | string | - | Chart title displayed above the graph |
| showLegend | boolean | true | Whether to display the legend |
| variant | "default" | "solid" | "bordered" | "default" | Visual style of the graph container |
| size | "default" | "sm" | "lg" | "default" | Height of the graph container |
| className | string | - | Additional CSS classes for customization |
GraphData
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "bar" | "line" | "pie" | - | Type of chart to render |
| labels | string[] | - | Array of labels for the x-axis |
| datasets | { label: string; data: number[]; color?: string }[] | - | Array of dataset objects with label, data points, and optional color |