Trend Chart

Area, line, or bar chart over time with tooltips and legend, built on shadcn's chart primitives.

import { TrendChart } from "@/components/ui/trend-chart"

const data = [

The trend chart is the time-series chart for shadcn/ui dashboards. It renders area, line, or bar series through shadcn's chart wrapper, so tooltips, legends, and colors come from your theme, and it handles stacking, grouping, horizontal layouts, and dot-grid fills without dropping down to Recharts.

Installation

pnpm dlx shadcn@latest add @dashboardcn/trend-chart

Also installs chart from shadcn/ui if missing.

Usage

import { TrendChart } from "@/components/ui/trend-chart"

<TrendChart
  data={data}
  xKey="date"
  series={[
    { key: "desktop", label: "Desktop" },
    { key: "mobile", label: "Mobile" },
  ]}
  showLegend
/>

Examples

Line

Set type to "line" and show the y-axis with a unit formatter.

"use client"

import { TrendChart } from "@/components/ui/trend-chart"

Dot grid

Set fill to "dots" to render the area as a dot grid that fades out toward the line.

"use client"

import { TrendChart } from "@/components/ui/trend-chart"

Stacked bars

Bars stack when stacked is set. Series stack bottom-up in the order given; negative values stack below zero.

"use client"

import { TrendChart } from "@/components/ui/trend-chart"

Grouped pill bars

Unstacked series sit side by side. Set barRadius to "full" and a small barSize for pills, and place the legend with legendPosition and legendAlign.

Weekly Orders

This week vs last week

"use client"

import { TrendChart } from "@/components/ui/trend-chart"

Horizontal bars

Set layout to "horizontal" to run bars left to right with categories down the side. Works with any number of series, stacked or not.