Core

Radial Bar Chart

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

Example

Usage

Features

  • Useful for progress and status visualizations.
  • Supports semicircle and full-circle layouts.
  • Uses LibravelUI chart colors by default.
  • Composed tooltip and legend are already included.
  • Can be customized with start and end angles.

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

Anatomy

import { RadialBarChart } from "@/components/ui/core/charts/radial-bar-chart";
<RadialBarChart
  data={data}
  nameKey="name"
  valueKey="value"
  config={{
    label: "Progress",
  }}
/>

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