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…

Edit on GitHub

Last updated on

Line Chart

A line chart shows how values change across a continuous axis and is well suited for trends, forecasts, and performance tracking.

Radar Chart

A radar chart compares multiple values across the same set of dimensions, making it easy to spot balanced and uneven profiles.