Core

Pie Chart

A pie chart displays part-to-whole relationships and is useful when the goal is to compare proportional contributions.

Example

Usage

Features

  • Great for composition and distribution views.
  • Supports donut mode through innerRadius.
  • Uses the default LibravelUI chart palette.
  • Built-in tooltip and legend support.
  • Can be used with labels or label-free slices.

Installation

Copy the shared chart utilities and the chart component you need into your project.

components/ui/core/charts/chart-shell.tsx
components/ui/core/charts/chart-tooltip.tsx
components/ui/core/charts/pie-chart.tsx
npx libravelui@latest add pie-chart

Anatomy

import { PieChart } from "@/components/ui/core/charts/pie-chart";
<PieChart
  data={data}
  dataKey="value"
  nameKey="name"
  innerRadius={60}
/>

Props

Loading types…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs