Join our Discord community
shadcn.io
ComponentsTemplateTheme GeneratorEasingsColorsBlocksAwesome
Pie chart

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.

Powered by

Recharts

Recharts

Loading component...

Installation

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

Features

  • Month selection dropdown with Select component for choosing active data point
  • Active sector highlighting with double-ring enhanced visual feedback
  • Centered text display showing selected month's visitor count dynamically
  • Interactive state management using React hooks for month and index tracking
  • Custom header layout with title, description, and month selector
  • ChartStyle integration for consistent theming across chart elements

Use Cases

This free open source React component works well for:

  • Data exploration tools - Allow users to focus on specific time periods built with Next.js
  • Interactive dashboards - Provide dynamic data filtering with visual feedback using TypeScript and Tailwind CSS
  • Presentation interfaces - Enable real-time data selection during demonstrations
  • Educational platforms - Allow students to explore data interactively

API Reference

ChartPieInteractive

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the container

State Management

Component uses React hooks for interactivity:

const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)

const activeIndex = React.useMemo(
  () => desktopData.findIndex((item) => item.month === activeMonth),
  [activeMonth]
)

Interactive Elements

Select dropdown with colored indicators:

<Select value={activeMonth} onValueChange={setActiveMonth}>
  <SelectTrigger className="h-7 w-[130px] rounded-lg pl-2.5">
    <SelectValue placeholder="Select month" />
  </SelectTrigger>
  <SelectContent>
    {months.map((key) => (
      <SelectItem key={key} value={key}>
        <div className="flex items-center gap-2 text-xs">
          <span
            className="flex h-3 w-3 shrink-0 rounded-xs"
            style={{ backgroundColor: `var(--color-${key})` }}
          />
          {config?.label}
        </div>
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Enhanced Active Shape

Double-ring highlighting for selected sector:

activeShape={({
  outerRadius = 0,
  ...props
}: PieSectorDataItem) => (
  <g>
    <Sector {...props} outerRadius={outerRadius + 10} />
    <Sector
      {...props}
      outerRadius={outerRadius + 25}
      innerRadius={outerRadius + 12}
    />
  </g>
)}

Implementation Notes

  • State management tracks selected month and calculates active index
  • Dropdown shows color indicators matching chart segments
  • Active sector gets double-ring highlighting for enhanced visibility
  • Center text updates dynamically showing selected month's data
  • ChartStyle component ensures consistent theming
  • Custom layout uses flexbox for responsive header arrangement
  • Component designed without background for flexible integration

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.

Radar Chart

Visualize multivariate data with radar charts. Perfect for comparing multiple data points across different categories. Built for React applications with Next.js integration and TypeScript support.