AreaChart

A responsive area chart component built on Recharts for visualizing data trends and comparisons over time.

Install Dependencies

npx quickcode-ui add AreaChart

pnpm dlx quickcode-ui add AreaChart

yarn dlx quickcode-ui add AreaChart

bunx quickcode-ui add AreaChart

Examples

Basic

Basic Area Chart

Linear

Linear Area Chart

Step

Step Area Chart

Stacked

Stacked Area Chart

With Legend

Area Chart with Custom Legend

Desktop

Mobile

import { 
  AreaChart, 
  Area, 
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  CartesianGrid,
  XAxis,
  type ChartConfig 
} from '@/components/ui/AreaChart'
import { Monitor, Smartphone } from 'lucide-react'

const data = [
  {
    "month": "Jan",
    "desktop": 8000,
    "mobile": 4000
  },
  {
    "month": "Feb",
    "desktop": 12000,
    "mobile": 7000
  },
  {
    "month": "Mar",
    "desktop": 9000,
    "mobile": 6000
  },
  {
    "month": "Apr",
    "desktop": 15000,
    "mobile": 10000
  },
  {
    "month": "May",
    "desktop": 13000,
    "mobile": 9000
  },
  {
    "month": "Jun",
    "desktop": 18000,
    "mobile": 12000
  }
]

const config: ChartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
}

const CustomLegend = () => {
  return (
    <div className="flex justify-center gap-6 mt-4">
      <div className="flex items-center gap-2">
        <Monitor className="w-4 h-4" style={{ color: 'var(--chart-1)' }} />
        <span className="text-sm text-muted-foreground">Desktop</span>
      </div>
      <div className="flex items-center gap-2">
        <Smartphone className="w-4 h-4" style={{ color: 'var(--chart-2)' }} />
        <span className="text-sm text-muted-foreground">Mobile</span>
      </div>
    </div>
  )
}

export function LegendAreaChart() {
  return (
    <div>
      <ChartContainer config={config} className="h-[300px]">
        <AreaChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
          <XAxis dataKey="month" stroke="var(--muted-foreground)" />
          <ChartTooltip content={ChartTooltipContent} />
          <Area
            dataKey="mobile"
            stackId="1"
            type="monotone"
            fill="var(--color-mobile)"
            fillOpacity={0.6}
            stroke="var(--color-mobile)"
            strokeWidth={0}
          />
          <Area
            dataKey="desktop"
            stackId="1"
            type="monotone"
            fill="var(--color-desktop)"
            fillOpacity={0.8}
            stroke="var(--color-desktop)"
            strokeWidth={0}
          />
        </AreaChart>
      </ChartContainer>
      <CustomLegend />
    </div>
  )
}

Props

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	—	Configuration object defining chart colors and labels
`children`	`ReactNode`	—	Chart components to render
`className`	`string`	—	Additional CSS classes

AreaChart

Prop	Type	Default	Description
`data`	`any[]`	—	Array of data objects to visualize
`margin`	`object`	—	Chart margins configuration
`className`	`string`	—	Additional CSS classes

ChartTooltipContent

Prop	Type	Default	Description
`indicator`	`'line' \| 'dot' \| 'dashed'`	`'dot'`	Visual indicator style
`hideLabel`	`boolean`	`false`	Hide the tooltip label
`hideIndicator`	`boolean`	`false`	Hide the visual indicator
`className`	`string`	—	Additional CSS classes