Join our Discord community
shadcn.io
ComponentsTemplateTheme GeneratorEasingsColorsBlocksAwesome
Pie chart

Stacked Pie Chart

Multiple pie charts with stacked data layers and custom tooltip formatting. Perfect for React applications requiring comparative data visualization with Next.js integration and TypeScript support.

Powered by

Recharts

Recharts

Loading component...

Installation

npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-10.json
npx shadcn@latest add https://www.shadcn.io/registry/pie-chart-10.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/pie-chart-10.json
bunx shadcn@latest add https://www.shadcn.io/registry/pie-chart-10.json

Features

  • Two data layers with desktop data in inner circle and mobile data in outer ring
  • Stacked visualization using different radius ranges for data separation
  • Custom tooltip formatting with dynamic label generation based on data key
  • Monthly data tracking showing January through May visitor statistics
  • Distinct radius configuration with inner chart at 60px and outer at 70-90px range
  • TypeScript support with proper data layer type definitions

Use Cases

This free open source React component works well for:

  • Comparative analytics - Show desktop vs mobile usage patterns built with Next.js
  • Multi-metric dashboards - Display related datasets in single visualization using TypeScript and Tailwind CSS
  • Performance comparisons - Present two related data categories simultaneously
  • Space-efficient reporting - Maximize data density with layered presentation

API Reference

ChartPieStacked

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the container

Data Layer Configuration

Two separate datasets for different metrics:

const desktopData = [
  { month: "january", desktop: 186, fill: "var(--color-january)" },
  // ... monthly data
]

const mobileData = [
  { month: "january", mobile: 80, fill: "var(--color-january)" },
  // ... monthly data  
]

Stacked Implementation

Two Pie components with different radius ranges:

<PieChart>
  <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
  <Pie
    data={mobileData}
    dataKey="mobile"
    innerRadius={70}
    outerRadius={90}
  />
</PieChart>

Custom Tooltip

Dynamic label formatting based on data key:

<ChartTooltip
  content={
    <ChartTooltipContent
      labelKey="visitors"
      nameKey="month"
      indicator="line"
      labelFormatter={(_, payload) => {
        return chartConfig[
          payload?.[0].dataKey as keyof typeof chartConfig
        ].label
      }}
    />
  }
/>

Implementation Notes

  • Inner layer shows desktop data up to 60px radius
  • Outer layer shows mobile data from 70px to 90px radius
  • Gap between layers provides visual separation
  • Tooltip dynamically shows "Desktop" or "Mobile" based on active layer
  • Both layers use same month-based color scheme for consistency
  • Component designed without background for flexible integration

Centered Text Donut Chart

Donut chart with centered text displaying total value and dynamic calculations. Perfect for React applications requiring data summaries with Next.js integration and TypeScript support.

Interactive Pie Chart

Interactive donut chart with month selection dropdown, active sector highlighting, and centered text display. Perfect for React applications requiring dynamic data exploration with Next.js integration and TypeScript support.