Skip to content
rdloom

Generated Chart

A bar or line chart an assistant produced, drawn without a chart library, always with a written summary and a View as table switch that shows the same numbers as a table.

AIv0.1.0experimentalWCAG 2.2 AAView spec

Bring your own model.

These components only show what you give them, in one message shape, and report what the person does. They never call a model or a server, so they work with any backend. They are built for how assistive technology handles streaming text, tool steps and approvals.

Revenue by monthRevenue grew every month except April, reaching $48K in June.
import { GeneratedChart } from "@rdloom/react";

export default function GeneratedChartBarExample() {
  return (
    <div className="w-[36rem] max-w-full">
      <GeneratedChart
        title="Revenue by month"
        summary="Revenue grew every month except April, reaching $48K in June."
        data={{
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
          series: [{ name: "Revenue", values: [21000, 26500, 31000, 29000, 41000, 48000] }],
          unit: "$",
        }}
      />
    </div>
  );
}

Installation

npx rdloom add generated-chart

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/generated-chart.json

Works, but without upgrade tracking.

Usage

import { GeneratedChart } from "@rdloom/react";

<div className="w-[36rem] max-w-full">
  <GeneratedChart
    title="Revenue by month"
    summary="Revenue grew every month except April, reaching $48K in June."
    data={{
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      series: [{ name: "Revenue", values: [21000, 26500, 31000, 29000, 41000, 48000] }],
      unit: "$",
    }}
  />
</div>

Line

Daily active usersLine chart of Users across 7 points. Users is highest at 1,320 (Fri) and lowest at 590 (Sun).
import { GeneratedChart } from "@rdloom/react";

export default function GeneratedChartLineExample() {
  return (
    <div className="w-[36rem] max-w-full">
      <GeneratedChart
        type="line"
        title="Daily active users"
        data={{
          labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          series: [{ name: "Users", values: [820, 940, 910, 1180, 1320, 640, 590] }],
        }}
      />
    </div>
  );
}

Multi series

Sign-ups by planLine chart of Free, Pro, Team across 4 points. Free is highest at 700 (Q4) and lowest at 400 (Q1).
  • Free
  • Pro
  • Team
import { GeneratedChart } from "@rdloom/react";

// Series differ by marker shape as well as color, and a legend names them.
export default function GeneratedChartMultiSeriesExample() {
  return (
    <div className="w-[36rem] max-w-full">
      <GeneratedChart
        type="line"
        title="Sign-ups by plan"
        data={{
          labels: ["Q1", "Q2", "Q3", "Q4"],
          series: [
            { name: "Free", values: [400, 520, 610, 700] },
            { name: "Pro", values: [120, 190, 260, 380] },
            { name: "Team", values: [30, 45, 80, 140] },
          ],
        }}
      />
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
datarequired

The labels along the bottom and one or more named series of values.

ChartDatanone
titlerequired

What the chart shows.

stringnone
summary

A sentence that tells the story of the chart. Defaults to the highest and lowest values of the first series.

stringnone
type

Bars or lines.

"bar" | "line""bar"

Accessibility

Role figure, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

  • Tab: moves to the View as table button
  • Arrow keys: move through the data table once it is shown

Screen readers announce

  • Announced as a figure named by the title, then the summary text
  • "View as table, toggle button, not pressed"
  • The table reads every value under its row and column headers

What your code must do

  • The drawing is decoration; the title, the written summary and the data table carry the meaning
  • View as table swaps in the same data as an accessible table (aria-pressed on the switch)
  • Series differ by marker shape or label as well as color, and a legend names them
  • Values are labelled directly when there are few bars
  • Empty data shows a message instead of an empty frame

Guidelines

Use it when

  • Showing trends or comparisons an assistant calculated

Avoid it when

  • Dashboards with many linked charts: use a charting library
  • Exact numbers matter most: show a GeneratedTable

Don't

  • A chart with no summary
  • Telling series apart by color only

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-text-default
  • --rd-color-text-muted
  • --rd-color-action-primary
  • --rd-color-feedback-info
  • --rd-color-feedback-success
  • --rd-color-feedback-warning
  • --rd-color-border-default
  • --rd-color-surface-default
  • --rd-color-focus-ring
  • --rd-radius-control