Radial Chart
Beautiful radial bar charts with full and semi-circle variants, gradient colors, and glow effects
Installation
Usage
import { EvilRadialChart } from "@/components/evilcharts/charts/radial-chart";const data = [
{ browser: "chrome", visitors: 275 },
{ browser: "safari", visitors: 200 },
{ browser: "firefox", visitors: 187 },
];
const chartConfig = {
chrome: {
label: "Chrome",
colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
},
safari: {
label: "Safari",
colors: { light: ["#10b981"], dark: ["#34d399"] },
},
firefox: {
label: "Firefox",
colors: { light: ["#f59e0b"], dark: ["#fbbf24"] },
},
} satisfies ChartConfig;Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilRadialChart
data={data}
dataKey="visitors"
nameKey="browser"
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selection) => {
if (selection) {
console.log("Selected:", selection.dataKey, "Value:", selection.value);
} else {
console.log("Deselected");
}
}}
/><EvilRadialChart
data={data}
dataKey="visitors"
nameKey="browser"
chartConfig={chartConfig}
/>Loading State
The radial chart supports loading state with a placeholder animation. You can pass the isLoading prop to the chart to show the loading state while your data is being fetched.
Examples
Below are some examples of the radial chart with different configurations. You can customize the variant, innerRadius, outerRadius, and other properties.
Semi-Circle Variant
Set variant="semi" to create a half-circle radial chart. This is useful for displaying progress or gauges in a more compact space.
Gradient Colors
Glowing Bars
Add a subtle glow effect to specific bars using glowingBars prop. Pass an array of bar names (the values from your nameKey field) to specify which bars should glow.
API Reference
Data used to display the chart. An array of objects where each object represents a radial bar.
type: TData[] where TData extends Record<string, unknown>
The key from your data objects to use for bar values (typically numeric values that determine bar size).
type: keyof TData & string
The key from your data objects to use for bar names (typically string values used for labels and legend).
type: keyof TData & string
Configuration object that defines the chart's bars. Each key should match a value from your nameKey field, with corresponding colors.
type: ChartConfig
Additional CSS classes to apply to the chart container.
type: string
The visual variant of the radial chart. "full" displays a full circle (360°), "semi" displays a half circle (180°).
type: "full" | "semi"
default: "full"
The inner radius of the radial bars. Can be a number (pixels) or percentage string.
type: number | string
default: "30%"
The outer radius of the radial bars. Can be a number (pixels) or percentage string.
type: number | string
default: "100%"
The border radius for the corners of each bar in pixels.
type: number
default: 5
The thickness of each radial bar in pixels.
type: number
default: 14
Whether to hide the tooltip on hover.
type: boolean
default: false
Controls the border-radius of the tooltip.
type: "sm" | "md" | "lg" | "xl"
default: "lg"
Controls the visual style of the tooltip.
type: "default" | "frosted-glass"
default: "default"
When set, the tooltip will be visible by default at the specified data point index.
type: number
The visual style variant for the legend indicators.
type: "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
Whether to hide the chart legend.
type: boolean
default: false
Background pattern variant to display behind the chart.
type: BackgroundVariant
Whether to hide the background bars (the unfilled portion of each bar).
type: boolean
default: false
Enables interactive clicking on bars to select/deselect them. Selected bars expand slightly and unselected bars dim.
type: boolean
default: false
Callback function that is called when a bar is selected or deselected. Receives an object with dataKey (bar name) and value (bar value), or null when deselected.
Note: This prop is only available when isClickable is set to true.
type: (selection: { dataKey: string; value: number } | null) => void
Shows a loading placeholder animation when data is being fetched.
type: boolean
default: false
Array of bar names (values from your nameKey field) that should have a glowing effect applied. Creates a smooth outer glow around the specified bars.
type: string[]
default: []
Additional props to pass to the underlying Recharts RadialBarChart component.
type: ComponentProps<typeof RadialBarChart>
Read the Recharts RadialBarChart documentation for available props.
Additional props to pass to the underlying Recharts RadialBar component.
type: Omit<ComponentProps<typeof RadialBar>, "dataKey">
Read the Recharts RadialBar documentation for available props.