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
Quarterly Sales Chart
Tambo Conversations
Loading threads...
Installation
Component API
Graph
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Chart title displayed above the graph |
| description | string | - | Optional description text below the title |
| type | "bar" | "line" | "pie" | "bar" | Type of chart to render |
| labels | string[] | [] | Array of labels for the x-axis |
| datasets | Dataset[] | [] | Array of dataset configurations |
| variant | "solid" | "bordered" | "solid" | Visual style of the graph container |
| size | "small" | "medium" | "large" | "medium" | Height of the graph container |
| showLegend | boolean | true | Whether to display the legend |
| className | string | - | Additional CSS classes for customization |
Dataset
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Dataset label shown in the legend |
| data | number[] | [] | Array of data values |
| backgroundColor | string | string[] | - | Background color(s) for data points |
| borderColor | string | - | Border color for data points (line charts) |
| borderWidth | number | 1 | Border width for data points |