Components
Loading preview...
Radial bar chart
npx shadcn@latest add https://21st.dev/r/airbnb/radial-bar// src/demos/RadialBarsDemo.tsx
import React from 'react';
import { Component as RadialBarsComponent } from '@/components/ui/radial-bar';
import { letterFrequency, LetterFrequency } from '@visx/mock-data';
import { cn } from "@/lib/utils";
const chartData = letterFrequency.slice(0, 15);
const getCategoryAccessor = (d: LetterFrequency): string => d.letter;
const getValueAccessor = (d: LetterFrequency): number => Number(d.frequency) * 100;
const DemoOne = () => {
return (
<div className={cn("flex w-full min-h-screen justify-center items-center p-4 bg-slate-200")}>
<div className="bg-white rounded-lg shadow-xl overflow-hidden">
<div className="p-4 border-b border-gray-200">
<h1 className="text-xl font-semibold text-center text-gray-700">
Radial Bar Chart (Letter Frequency)
</h1>
</div>
<RadialBarsComponent<LetterFrequency>
width={600}
height={600}
data={chartData}
getCategory={getCategoryAccessor}
getValue={getValueAccessor}
showControls={true}
barColor="#88d8b0"
/>
</div>
</div>
);
};
export { DemoOne };