Area Chart

A responsive area chart with gradient, solid, and no-fill modes. Supports stacked and percentage layouts, interactive legend with slider, custom tooltips, and click events on dots and categories. Powered by Recharts, inspired by Tremor.

Single Series

A basic single-category chart with a gradient fill and value formatter.

Multi-Series

Multiple categories rendered with distinct colors and a shared legend.

Stacked

Areas stacked on top of each other with solid fills to clearly show cumulative totals.

Percentage

Normalizes each data point to 100%, useful for showing proportional breakdown over time.

Data Point Labels

Shows formatted values directly on each data point. Enable showDataPointLabelBackground to add a rounded tinted pill behind each label.

Minimal (No Fill)

A clean line-only look with no fill, no legend, and no grid lines.

Interactive

Click a dot or legend item to highlight a category. The selected event is shown below.

AUM by Fund Category

Total assets under management (USD millions) across six fund categories over the trailing 12 months.

AreaChart

A responsive area chart with gradient, solid, and no-fill modes. Supports single and multi-series data, stacked and percentage layouts, interactive legend with optional slider, custom tooltips, and click events on dots and legend categories. Powered by Recharts, inspired by Tremor.

Usage

import { AreaChart } from "@/components/charts/area-chart"

// Single series with value formatter
<AreaChart
  data={revenueData}
  index="month"
  categories={["Revenue"]}
  valueFormatter={(v) => `$${v.toLocaleString()}`}
/>

// Multi-series stacked
<AreaChart
  data={trafficData}
  index="month"
  categories={["Organic", "Direct", "Referral"]}
  type="stacked"
  fill="solid"
/>

// Interactive with event handler
<AreaChart
  data={trafficData}
  index="month"
  categories={["Organic", "Direct", "Referral"]}
  onValueChange={(event) => console.log(event)}
/>

AreaChart Props

Prop	Type	Default	Description
data*	Record<string, any>[]	—	Array of data objects. Each object must include the index key and one key per category.
index*	string	—	The key in each data object to use as the X-axis label (e.g. "month", "date").
categories*	string[]	—	Array of keys from the data objects to render as separate area series.
colors	ChartColor[]	CHART_COLORS	Array of chart color names to use for each category, in order. Cycles if fewer colors than categories.
valueFormatter	(value: number) => string	v => v.toString()	Function to format Y-axis tick labels and tooltip values.
type	"default" \| "stacked" \| "percent"	"default"	Chart layout mode. "stacked" stacks areas; "percent" normalizes to 100%.
fill	"gradient" \| "solid" \| "none"	"gradient"	Fill style for the area under each line.
axisTextSize	"xs" \| "sm" \| "md" \| "lg" \| number	"xs"	Font size for X and Y axis tick labels. Named sizes map to 12/14/16/18px. Pass a number for a custom pixel size.
legendTextSize	"xs" \| "sm" \| "md" \| "lg" \| number	"xs"	Font size for legend item labels. Named sizes map to 12/14/16/18px. Pass a number for a custom pixel size.
dataPointTextSize	"xs" \| "sm" \| "md" \| "lg" \| number	"xs"	Font size for data point labels (requires showDataPointLabels). Named sizes map to 12/14/16/18px. Pass a number for a custom pixel size.
showDataPointLabels	boolean	false	When true, renders the formatted value as a label above each data point.
showDataPointLabelBackground	boolean	false	When true, each data point label gets a rounded background tinted with the series color. Requires showDataPointLabels.
dataPointLabelFormatter	(value: number) => string	—	Custom formatter for data point labels. Falls back to valueFormatter when omitted. Useful for compact notation (e.g. 1500000 → "1.5M").
showXAxis	boolean	true	Whether to render the X-axis with tick labels.
showYAxis	boolean	true	Whether to render the Y-axis with tick labels.
showGridLines	boolean	true	Whether to render horizontal grid lines.
showLegend	boolean	true	Whether to render the legend above the chart.
showTooltip	boolean	true	Whether to show the tooltip on hover.
legendPosition	"left" \| "center" \| "right"	"right"	Horizontal alignment of the legend.
enableLegendSlider	boolean	false	When true, the legend becomes horizontally scrollable with arrow buttons.
yAxisWidth	number	auto	Width in pixels reserved for the Y-axis. When omitted, the width is auto-inferred from the largest formatted value in the dataset.
autoMinValue	boolean	false	When true, the Y-axis minimum is set to "auto" rather than 0.
minValue	number	—	Explicit minimum value for the Y-axis domain.
maxValue	number	—	Explicit maximum value for the Y-axis domain.
allowDecimals	boolean	true	Whether Y-axis ticks may be decimal numbers.
startEndOnly	boolean	false	When true, only the first and last X-axis tick labels are shown.
intervalType	"preserveStartEnd" \| "equidistantPreserveStart"	"equidistantPreserveStart"	Recharts interval strategy for X-axis tick spacing.
tickGap	number	5	Minimum gap in pixels between adjacent X-axis tick labels.
connectNulls	boolean	false	When true, null data points are bridged rather than creating a gap.
xAxisLabel	string	—	Optional label rendered below the X-axis.
yAxisLabel	string	—	Optional label rendered to the left of the Y-axis, rotated 90 degrees.
onValueChange	(value: AreaChartEventProps) => void	—	Callback fired when a dot or legend category is clicked. Receives event details or null when deselected.
showTotalDataPointLabels	boolean	false	When true, renders a label above or below the top of the stacked area at each X-axis point showing the sum of all category values. Has no effect when type is "percent".
totalDataPointLabelPosition	"top" \| "bottom" \| "line"	"line"	Controls where total labels are placed. "line" floats the label above the top of the stack at each data point. "top" pins all labels to a fixed row at the top of the chart. "bottom" pins them just below the chart area, above the x-axis tick labels (shifts ticks down to make room). Requires showTotalDataPointLabels.
tooltipShowTotal	boolean	false	When true, appends a Total row at the bottom of the tooltip showing the sum of all category values for that data point. Useful for stacked charts.
tooltipCallback	(content: TooltipProps) => void	—	Side-effect callback invoked whenever the tooltip active state or label changes.
customTooltip	React.ComponentType<TooltipProps>	—	Custom React component to render in place of the default tooltip.
className	string	—	Additional CSS classes applied to the outer wrapper div (default height is h-80).