Chart Trend

Charts several series over time as lines, areas, or bars.

Throughput vs plan
Requests / sec

Configurations

Supported configurations for this component.

Three rolesWith compareSingle seriesWith threshold

Configurations

4 examples
Three 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

PropTypeDefaultDescription
keyreqstring-Field in each data row holding this series' y-value.
labelreqstring-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.
colorstring-Explicit override; prefer `role`.

TrendChart

PropTypeDefaultDescription
datareqobject[]-Rows of chart data, one object per x-axis point.
seriesreqTrendSeries[]-Series to plot, each bound to a data-row field by key.
xKeystring't'Field in each data row plotted along the x-axis.
modesArray<'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. Bars keep their ROLE colours in either layout. A `threshold` series is never a bar in either layout: it draws as a line over the plot in its role colour instead of being added into a total that never happened.
defaultMode'line'|'area'|'bar'-Render mode selected on mount; defaults to the first entry in modes.
titlestring-Heading shown at the top-left of the header.
yLabelstring-Uppercase axis caption, top-left.
formatX(x:any)=>string-Labels the x value on the axis ticks AND as the tooltip heading, e.g. `(d) => 'Sep ' + d`. Without it both show the raw `xKey` value, so pass it whenever that value is an index or a bare number.
tooltipLabelFormatter(label:any)=>string-Overrides `formatX` for the tooltip heading only.
valueFormatter(value:any)=>string-Formats each series value shown in the tooltip.
xIntervalnumber4Number of x-axis ticks skipped between rendered labels.
showLegendbooleantrueRender the toggleable legend row in the footer.
showYAxisbooleantrueReserve 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.
footerSlotReact.ReactNode-Right side of the footer (custom controls).
heightnumber|'fill'240Plot height in px, or 'fill' to grow into a flex parent.
classNamestring-Class applied to the root container element.
styleReact.CSSProperties-Inline styles merged onto the root container element.

More Andromeda Pro components

Gauge

Displays a single bounded reading as a radial arc.

4 variants

Heat Grid

Displays a single bounded reading as a matrix of cells that fill as it rises.

6 variants

Icon Button

Triggers an action with an icon alone, for controls whose glyph reads as the label.

6 variants8 states