Chart

Display interactive data visualizations.

Monthly Revenue

Revenue vs Expenses (2024)

<Chart  id="chart-example"  type="bar"  title="Monthly Revenue"  description="Revenue vs Expenses (2024)"  data={[      {          "month": "Jan",          "revenue": 4000,          "expenses": 2400      },      {          "month": "Feb",          "revenue": 3000,          "expenses": 1398      },      {          "month": "Mar",          "revenue": 5000,          "expenses": 3200      },      {          "month": "Apr",          "revenue": 2780,          "expenses": 3908      },      {          "month": "May",          "revenue": 1890,          "expenses": 4800      },      {          "month": "Jun",          "revenue": 2390,          "expenses": 3800      }  ]}  xKey="month"  series={[      {          "key": "revenue",          "label": "Revenue"      },      {          "key": "expenses",          "label": "Expenses"      }  ]}  colors={[      "#14B8A6",      "#F87171"  ]}  showLegend  showGrid/>

"How did I spend money this week?" is a question best answered visually. Chart renders bar or line visualizations inline in the conversation. You pass data, an x-axis key, and one or more series. The assistant can show spending breakdowns, revenue trends, or performance over time without describing the numbers in prose.

Role: Information. For displaying data the user reads. See Design Guidelines for how component roles work.

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/chart

Render Chart in your UI with tool-compatible props.

import { Chart } from "@/components/tool-ui/chart";<Chart  id="monthly-revenue"  type="bar"  title="Monthly Revenue"  description="2024 YTD"  data={[    { month: "Jan", revenue: 4000, expenses: 2400 },    { month: "Feb", revenue: 3000, expenses: 1398 },    // ...  ]}  xKey="month"  series={[    { key: "revenue", label: "Revenue" },    { key: "expenses", label: "Expenses" },  ]}  showLegend  showGrid/>;

<Chart  id="clickable"  type="line"  data={data}  xKey="time"  series={[{ key: "value", label: "Value" }]}  onDataPointClick={(point) => {    console.log("Clicked:", point.xValue, point.yValue);  }}/>