Radial Bars

A circular bar chart component that displays data in a radial pattern, with bars extending from an inner circle. Perfect for showing part-to-whole relationships in a visually striking way.

Usage

import RadialBars from '@/components/RadialBars';

export default function MyPage() {
  // Data for the radial bar chart
  const data = [
    { name: 'Category A', value: 30 },
    { name: 'Category B', value: 50 },
    { name: 'Category C', value: 20 },
    { name: 'Category D', value: 40 },
    { name: 'Category E', value: 35 }
  ];

  return (
    <RadialBars 
      width={500}
      height={500}
      data={data}
      colors={['#3b82f6', '#60a5fa', '#93c5fd']}
    />
  );
}

Examples

Basic Radial Bars

A simple radial bar chart with default styling.

const data = [
  { name: 'Category A', value: 30 },
  { name: 'Category B', value: 50 },
  { name: 'Category C', value: 20 },
  { name: 'Category D', value: 40 },
  { name: 'Category E', value: 35 }
];

<RadialBars 
  width={400}
  height={400}
  data={data}
/>

Custom Colors

A radial bar chart with custom color scheme.

<RadialBars 
  width={400}
  height={400}
  data={data}
  colors={['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe']}
/>

Interactive Controls

Radial bars with interactive rotation and sorting controls.

Rotate0°

Sort barsAlphabeticallyBy value

const salesData = [
  { name: 'Mobile', value: 40 },
  { name: 'Desktop', value: 30 },
  { name: 'Tablet', value: 15 },
  { name: 'Smart TV', value: 10 },
  { name: 'Other', value: 5 }
];

<RadialBars 
  width={400}
  height={400}
  data={salesData}
  colors={['#10b981', '#34d399', '#6ee7b7', '#a7f3d0', '#d1fae5']}
  showControls={true}
/>

Custom Inner Radius

Radial bars with a larger inner circle.

<RadialBars 
  width={400}
  height={400}
  data={data}
  innerRadiusRatio={0.5}
  colors={['#f97316', '#fb923c', '#fdba74', '#fed7aa', '#ffedd5']}
/>