Trend Chart

The canonical multi-series time-series chart. One configurable component that renders as line, area, or bar with a built-in mode toggle, custom tooltip, and toggleable legend. Series colour follows the multi-series hierarchy (baseline / live / context / threshold). Scroll-gated reveal.

Throughput vs plan
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/andromeda-trend-chart
2

For dark mode, add the dark class to your <html> element:

Optional
<html class="dark">

More Andromeda components