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…

Edit on GitHub

Last updated on