Chart
A chart the model draws to answer a question about numbers, with hover values and a legend.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/chart-bar.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/chart-bar.json
Usage & API
Example
import { StackedBarChart } from "@/components/ai/chart-bar"
<StackedBarChart
title="…"
series={[]}
data={[]}
/>Props StackedBarChart
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
subtitle | string | Optional |
series | Series[] | Required |
data | BarDatum[] | Required |
height | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Stacked bar is titled, in the sample, Monthly signups by channel, with the subtitle January to October 2026. The series are Organic, Referral and Paid. Months run from Jan through Oct, Organic climbing from 820 to 1420, Referral from 210 to 610, and Paid drifting from around 400 down toward 330. The header figure is October's total and the percent versus September. Hovering a month, or focusing the plot and using the arrow keys, opens a tooltip labelled with that month and 2026, one row per channel and a total. Other months dim. The legend lists the three channels. The plot is a figure with a summary that includes every month's total and names the highest month.
Example
import { LineChart } from "@/components/ai/chart-line"
<LineChart
title="…"
labels={[]}
series={[]}
/>Props LineChart
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
subtitle | string | Optional |
labels | string[] | Required |
series | LineSeries[] | Required |
height | number | Optional |
format | (n: number) => string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Line is titled Weekly active users, subtitle Last 12 weeks, compared with the same weeks in 2025. Labels run from Aug 4 to Oct 20. This year is the first series, drawn with the gradient and the fill, from 8420 to 11890. Last year is dashed and grey, from 6210 to 7610. The header shows the latest this-year value and the percent across the 12 weeks. Moving the pointer draws a vertical guide and a dot on each series, and the tooltip reads Week of plus the label and both values. Arrow keys step the same selection. Every other x label is drawn so the axis stays readable. The legend uses a gradient dash for the first series and a short dash for the comparison.
Example
import { DonutChart } from "@/components/ai/chart-donut"
<DonutChart
title="…"
slices={[]}
/>Props DonutChart
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
subtitle | string | Optional |
slices | Slice[] | Required |
unit | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Donut is titled Where Q3 signups came from, subtitle July to September 2026. The slices are Organic search 3920, Referrals 2110, Paid social 1630, Newsletter 1150 and Other 760. The ring starts empty and draws in. The centre begins as the total with the unit signups, which is the default. Hovering a slice or a legend row swaps the centre to that slice's percent, its label and its count, dims the other arcs, and highlights the row. Leaving clears it. Each legend button's accessible name includes the label, the count, the unit and the percent. There is no separate tooltip. The centre and the row are the readout.
Choosing a layout
Use a chart when the sentence is about shape. A stacked bar answers how the mix changed by month. A line answers whether this stretch beat the one before it. A donut answers which source is the large share. Put the exact rows in a data table beside it, or instead of it, when the person will sort, scan one record, or download CSV. The chart tooltip is a readout for one point. It is not a table, and it does not export.
Weather is the better fit for a forecast, which has a place, a condition and a few days, not an arbitrary series. A product spec table is the better fit when the columns are products and the cells are attributes. Test results already have their own bar, split into passed, failed and skipped, and should stay that card when the numbers are a run. Keep these three charts for computed results the model is explaining. Pick the drawing from the question, not from how many colours you have.
Can the bar and line charts be read without a pointer?
Yes. The plot is focusable. Arrow Right and Arrow Left move the active point, starting at the first or the last point if nothing is selected yet, and Escape clears it. Blur and a pointer leaving the plot also clear it. The donut has no arrow-key mode. Its legend rows are buttons, so tabbing to a row selects that slice the same way a hover does.
Does the line header handle a series that fell?
The number is the real change from the first point of the first series to the last, rounded. The sign printed in front of it is always a plus, including when the change is negative, which would read as a plus and then a minus. The bar chart is different: its header percent uses a plus or a minus from the sign of the last step. Pass a rising series to the line, or treat that caption as sample copy rather than a general formatter.