Chart Trend
Charts several series over time as lines, areas, or bars.
Throughput vs plan
Requests / sec
Configurations
Supported configurations for this component.
Configurations
4 examplesThree roles
Throughput vs plan
Requests / sec
With compare
Allocated vs used
Requests / sec
Single series
Actual throughput
Requests / sec
With threshold
Against ceiling
Requests / sec
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
TrendSeries
| Prop | Type | Default | Description |
|---|---|---|---|
| keyreq | string | - | Field in each data row holding this series' y-value. |
| labelreq | string | - | Display name shown in the tooltip and legend chip. |
| role | 'baseline'|'live'|'context'|'threshold'|'compare' | - | Colour role in the Andromeda charts hierarchy; threshold also renders dashed; compare is the orange series that must stand apart from live. |
| color | string | - | Explicit override; prefer `role`. |
TrendChart
| Prop | Type | Default | Description |
|---|---|---|---|
| datareq | object[] | - | Rows of chart data, one object per x-axis point. |
| seriesreq | TrendSeries[] | - | Series to plot, each bound to a data-row field by key. |
| xKey | string | 't' | Field in each data row plotted along the x-axis. |
| modes | Array<'line'|'area'|'bar'> | ['area','bar'] | Toggle appears when >1. |
| barLayout | 'stacked'|'grouped' | 'stacked' | How bar mode arranges multiple series. Use `grouped` when the series overlap rather than compose, so a stack would double-count. Grouped bars keep their ROLE colours; stacked bars take the single-hue depth ramp. |
| defaultMode | 'line'|'area'|'bar' | - | Render mode selected on mount; defaults to the first entry in modes. |
| title | string | - | Heading shown at the top-left of the header. |
| yLabel | string | - | Uppercase axis caption, top-left. |
| tooltipLabelFormatter | (label:any)=>string | - | Formats the x value shown as the tooltip heading. |
| valueFormatter | (value:any)=>string | - | Formats each series value shown in the tooltip. |
| xInterval | number | 4 | Number of x-axis ticks skipped between rendered labels. |
| showLegend | boolean | true | Render the toggleable legend row in the footer. |
| showYAxis | boolean | true | Reserve the left Y-axis tick gutter. Set false on compact cards where an external headline already states the magnitude, and the plot then fills its card content box edge-to-edge with no stray left inset (the Andromeda spacing rules). |
| domain | [number|string, number|string] | [0,'auto'] | Y-axis domain, passed through to recharts. The default zero baseline is the honest one for most series. Pass `['auto','auto']` (or explicit bounds) when the measurement has a floor far from zero — a satisfaction score that only moves between 3.8 and 4.3 is a flat sliver on a 0-based axis. In `bar` mode the zero floor is kept whatever is passed: only the upper bound is honoured, because a bar read against a truncated baseline misstates every difference it draws. |
| footerSlot | React.ReactNode | - | Right side of the footer (custom controls). |
| height | number|'fill' | 240 | Plot height in px, or 'fill' to grow into a flex parent. |
| className | string | - | Class applied to the root container element. |
| style | React.CSSProperties | - | Inline styles merged onto the root container element. |
AI Canvas