Icon Area Chart

Stacked area visualization with icon-enhanced legend display. Built for React applications requiring visual data indicators with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { TrendingDown, TrendingUp } from "lucide-react"import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "An area chart with icons"const chartData = [  { month: "January", desktop: 186, mobile: 80 },  { month: "February", desktop: 305, mobile: 200 },  { month: "March", desktop: 237, mobile: 120 },  { month: "April", desktop: 73, mobile: 190 },  { month: "May", desktop: 209, mobile: 130 },  { month: "June", desktop: 214, mobile: 140 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",    icon: TrendingDown,  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",    icon: TrendingUp,  },} satisfies ChartConfigexport function ChartAreaIcons() {  return (    <ChartContainer config={chartConfig} className="h-[250px] w-full">      <AreaChart        accessibilityLayer        data={chartData}        margin={{          left: 12,          right: 12,        }}      >        <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="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"        />        <ChartLegend content={(props) => <ChartLegendContent payload={props.payload} verticalAlign={props.verticalAlign} />} />      </AreaChart>    </ChartContainer>  )}

Installation

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

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

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

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

Features

Icon-enhanced legend with trending indicators for each data series
Stacked area visualization combining desktop and mobile visitor data
Directional trend icons using TrendingUp and TrendingDown for context
Interactive legend display with color-coded series and visual indicators
TypeScript support with complete type definitions including icon configuration
shadcn/ui integration using Chart components and Lucide React icons

Use Cases

This free open source React component works well for:

Performance dashboards - Display metrics with trend direction indicators built with Next.js
Analytics reporting - Show traffic sources with visual trend context using TypeScript and Tailwind CSS
Business intelligence - Present KPIs with directional performance indicators
Financial tracking - Visualize revenue streams with growth/decline indicators

API Reference

ChartAreaIcons

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

Chart Configuration with Icons

The component uses enhanced chart configuration with icon support:

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
    icon: TrendingDown,
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
    icon: TrendingUp,
  },
} satisfies ChartConfig

Implementation Notes

Legend automatically displays icons alongside series labels and colors
Icons provide additional context for data interpretation (trends, categories)
Uses stacked areas with shared stackId="a" for proper layering
Mobile area renders first for bottom layer positioning
Line tooltip indicators show precise values for both series
Icons are fully customizable through the chart configuration object

Reactarea-chart-08