Skip to content

Interactive Answers

Chart Card

A chart the agent answers with — bar, line, area or donut, with tooltips, legend toggles and animated data.

4 variantsMIT

Preview

Weekly signups

Self-serve vs. sales-led · last 8 weeks

4,987
0200400600800Sep 8Sep 15Sep 22Sep 29Oct 6Oct 13Oct 20Oct 27
Weekly signups
LabelSelf-serveSales-led
Sep 841296
Sep 15468104
Sep 2243188
Sep 29520131
Oct 6588120
Oct 13610142
Oct 20654150
Oct 2740271

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/chart-card.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { ChartCard } from "@/components/ui/chart-card";

// Render a chart when a tool returns a time series.
export function SignupsAnswer({ result }: { result: SignupsResult }) {
  return (
    <ChartCard
      type="bar"
      title="Weekly signups"
      subtitle="Self-serve vs. sales-led"
      total={result.total.toLocaleString()}
      partialLast // the current week isn't over
      data={{
        labels: result.weeks,
        series: [
          { id: "self", label: "Self-serve", values: result.selfServe },
          { id: "sales", label: "Sales-led", values: result.salesLed },
        ],
      }}
      onSelect={(index) => console.log(result.weeks[index])}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ labels: string[]; series: ChartSeries[] }—One label per point and up to four series. Series keep their color when others are toggled off.
type"bar" | "line" | "area" | "donut""bar"Grouped bars, lines, filled areas, or a donut where each series is one slice.
title*string—Header title, also the chart's accessible name.
subtitlestring—Secondary line under the title.
totalstring—Headline value in the header; rolls when it changes.
format(value: number) => string—Formats axis ticks, tooltip values and the donut center. Defaults to 1.2k / 3.4M.
partialLastbooleanfalseStripes the last bar, for a period that is still in progress.
onSelect(index: number) => void—Called when a point or slice is hovered, clicked or reached with the arrow keys.
classNamestring—Extra classes for the root element.
type ChartSeries = {
  id: string;
  label: string;
  values: number[]; // one per label; a donut slice is their sum
  color?: string;   // defaults to blue, teal, purple, ochre by position
};

// Keyboard: focus the chart, then ← → Home End move between points, Esc clears.
// Screen readers get a summary label and a hidden data table.