dashboardcn
1

Trend Chart

PreviousNext

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 = [

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/trend-chart.json

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.

Top Products
Units sold this quarter
"use client"

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