Percentage Area Chart

Percentage-based stacked area visualization with three data series. Perfect for React applications showing proportional data with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A stacked area chart with expand stacking"const chartData = [  { month: "January", desktop: 186, mobile: 80, other: 45 },  { month: "February", desktop: 305, mobile: 200, other: 100 },  { month: "March", desktop: 237, mobile: 120, other: 150 },  { month: "April", desktop: 73, mobile: 190, other: 50 },  { month: "May", desktop: 209, mobile: 130, other: 100 },  { month: "June", desktop: 214, mobile: 140, other: 160 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",  },  other: {    label: "Other",    color: "var(--chart-3)",  },} satisfies ChartConfigexport function ChartAreaStackedExpand() {  return (    <ChartContainer config={chartConfig} className="h-[250px] w-full">      <AreaChart        accessibilityLayer        data={chartData}        margin={{          left: 12,          right: 12,          top: 12,        }}        stackOffset="expand"      >        <CartesianGrid vertical={false} />        <XAxis          dataKey="month"          tickLine={false}          axisLine={false}          tickMargin={8}          tickFormatter={(value) => value.slice(0, 3)}        />        <ChartTooltip          cursor={false}          content={<ChartTooltipContent indicator="line" />}        />        <Area          dataKey="other"          type="natural"          fill="var(--color-other)"          fillOpacity={0.1}          stroke="var(--color-other)"          stackId="a"        />        <Area          dataKey="mobile"          type="natural"          fill="var(--color-mobile)"          fillOpacity={0.4}          stroke="var(--color-mobile)"          stackId="a"        />        <Area          dataKey="desktop"          type="natural"          fill="var(--color-desktop)"          fillOpacity={0.4}          stroke="var(--color-desktop)"          stackId="a"        />      </AreaChart>    </ChartContainer>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/area-chart-07.json

npx shadcn@latest add https://www.shadcn.io/registry/area-chart-07.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/area-chart-07.json

bunx shadcn@latest add https://www.shadcn.io/registry/area-chart-07.json

Features

Expanded stacking with stackOffset="expand" normalizing values to 100% at each point
Three data series showing desktop, mobile, and other traffic sources
Percentage visualization displaying proportional relationships rather than absolute values
Variable opacity styling with different fill opacity levels for visual hierarchy
TypeScript support with complete type definitions for multi-series percentage data
shadcn/ui integration using Chart components and three-color design tokens

Use Cases

This free open source React component works well for:

Market share analysis - Display relative proportions of different segments built with Next.js
Budget allocation - Show spending distribution across categories using TypeScript and Tailwind CSS
Resource utilization - Visualize percentage usage of system resources over time
Survey data - Present response distributions as proportional areas

API Reference

ChartAreaStackedExpand

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the card container

Chart Configuration

The component supports three data series with different styling:

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
  other: {
    label: "Other",
    color: "var(--chart-3)",
  },
} satisfies ChartConfig

Implementation Notes

Uses stackOffset="expand" to normalize all stacks to 100% height
Areas render in specific order: other (bottom), mobile (middle), desktop (top)
Other area uses lower opacity (0.1) for subtle background presence
Chart height normalized regardless of actual data values
Perfect for showing changing proportions over time rather than absolute growth