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.

Example

Quarterly Sales Chart

Quarterly Sales

Interactive Demo

Use natural language to generate and modify charts in real time. This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).

AI-Generated Chart

Tambo Conversations

Installation

npx tambo add graph

Try It Yourself

1. Install the component

npx tambo add graph

2. Register with Tambo

tsx

import { Graph, graphSchema } from "@/components/tambo/graph";
import { MessageThreadFull } from "@/components/tambo/message-thread-full";
import { useTambo } from "@tambo-ai/react";
import { useEffect } from "react";

export function App() {
  const { registerComponent } = useTambo();

  useEffect(() => {
    registerComponent({
      name: "Graph",
      description: "A versatile data visualization component.",
      component: Graph,
      propsSchema: graphSchema,
    });
  }, [registerComponent]);

  return <MessageThreadFull />;
}

3. Send a prompt

Try these example prompts:

→ "Create a bar chart of monthly revenue for Q1"
→ "Show a line chart comparing signups vs activations over 6 months"
→ "Make a pie chart of traffic sources: organic, paid, and referral"

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