Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Interactive Area Chart

Three months of daily desktop and mobile visitors as stacked gradient areas, with a select for the last 90, 30 or 7 days. For React.

Framework
Charting library

Preview

Preview width

About

This is the dashboard chart: a long daily series where the reader picks the window. Use it when one view has to serve both the quarter and the last week. For two series people compare one at a time, the Interactive Bar Chart switches between them instead.

Desktop and mobile stack as smooth curves with gradient fills, under date labels spaced so they don't collide. A select in the header filters to the last 90, 30 or 7 days, the tooltip shows the date, and a legend sits under the plot.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartAreaInteractive } from "@/components/charts/chart-area-interactive";
<ChartAreaInteractive />

Customize

  • useState("90d") holds the range; chartData.filter keeps the days after June 30, 2024 minus 90, 30 or 7.
  • <XAxis dataKey="date" minTickGap={32}> skips crowded labels, and its tickFormatter prints Apr 10.
  • labelFormatter on ChartTooltipContent formats the hovered date the same way.
  • The gradients are <linearGradient>s in <defs>; the legend is <ChartLegend content={<ChartLegendContent />} />.
  • ChartContainer has aspect-auto h-[250px] w-full, so the height stays fixed as the card widens.

FAQ

How does the range filter work?

The rows run from April 1 to June 30, 2024. The select's value (90d, 30d or 7d) sets how many days to count back from June 30, and only the rows from that date on reach the chart. With live data, count back from today or ask your API for the range.

Does it animate when the range changes?

Yes: Recharts animates the areas to the new data. Set isAnimationActive={false} on each <Area> to turn it off.

Why does the select disappear on phones?

Its trigger has hidden sm:flex, as in shadcn/ui's original, so below the sm breakpoint the chart shows the full 90 days. Remove hidden to keep the select on small screens.

How do I plot my own dates?

Give each row an ISO date (2024-04-01) and the two values. The label formatters parse it with new Date(), which reads a day-only date as midnight UTC: format with timeZone: "UTC" or readers west of UTC see the day before.

How do the date labels avoid overlapping?

minTickGap={32} on <XAxis>: Recharts drops a label when it would sit closer than 32 pixels to the last one. tickFormatter prints Apr 10, and labelFormatter on ChartTooltipContent formats the hovered date.

Can I use it without a mouse?

Yes. The select is keyboard-operable, and Recharts 3 turns on accessibilityLayer by default, so Tab and the arrow keys move the tooltip day by day.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts