Core

Radar Chart

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

Example

Usage

Features

  • Good for multi-metric comparison.
  • Works well for skill, benchmark, and profile views.
  • Uses the shared LibravelUI palette and tooltip.
  • Supports custom angle and radius axes.
  • Keeps series styling lightweight and consistent.

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/radar-chart.tsx
npx libravelui@latest add radar-chart

Anatomy

import { RadarChart } from "@/components/ui/core/charts/radar-chart";
<RadarChart
  data={data}
  dataKey="subject"
  config={{
    desktop: { label: "Desktop" },
    mobile: { label: "Mobile" },
  }}
/>

Props

Loading types…

Edit on GitHub

Last updated on

Pie Chart

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

Radial Bar Chart

A radial bar chart presents values on a circular scale and works well for progress-style or compact comparison dashboards.