Pie Chart
Simple static & beautifully designed pie charts with donut, gradient, and glow effects
Installation
Usage
import { EvilPieChart } from "@/components/evilcharts/charts/pie-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:
<EvilPieChart
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");
}
}}
/><EvilPieChart
data={data}
dataKey="visitors"
nameKey="browser"
chartConfig={chartConfig}
/>Loading State
The pie 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 pie chart with different configurations. You can customize the innerRadius, paddingAngle, cornerRadius, and other properties.
Gradient Colors
Donut Chart
Set innerRadius to a value greater than 0 to create a donut chart. The inner radius creates the hole in the center of the pie.
Padded Sectors
Use paddingAngle to add space between sectors and cornerRadius to round the corners of each sector. Combine with innerRadius for a modern donut look.
Use a negative paddingAngle to create overlapping sectors with a high cornerRadius for a petal-like effect. Combine with innerRadius for a flower-shaped donut chart.
Labels
Enable showLabels to display labels on each sector. You can customize the label with labelKey to show different data, and use labelListProps for additional customization.
Glowing Sectors
Add a subtle glow effect to specific sectors using glowingSectors prop. Pass an array of sector names (the values from your nameKey field) to specify which sectors should glow.
API Reference
Data used to display the chart. An array of objects where each object represents a sector.
type: TData[] where TData extends Record<string, unknown>
The key from your data objects to use for sector values (typically numeric values that determine sector size).
type: keyof TData & string
The key from your data objects to use for sector names (typically string values used for labels and legend).
type: keyof TData & string
Configuration object that defines the chart's sectors. 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 inner radius of the pie. Set to a value greater than 0 to create a donut chart. Can be a number (pixels) or percentage string.
type: number | string
default: 0
The outer radius of the pie. Can be a number (pixels) or percentage string.
type: number | string
default: "80%"
The border radius for the corners of each sector in pixels.
type: number
default: 0
The angle of padding between sectors in degrees.
type: number
default: 0
The starting angle of the pie chart in degrees (0 is 3 o'clock, 90 is 12 o'clock).
type: number
default: 0
The ending angle of the pie chart in degrees. Set to less than 360 for a partial pie.
type: number
default: 360
Whether to display labels on each sector.
type: boolean
default: false
The key from your data objects to use for label text when showLabels is enabled. If not provided, uses the dataKey value.
type: keyof TData & string
Additional props to customize the label list appearance and behavior.
type: Omit<ComponentProps<typeof LabelList>, "dataKey">
Read the Recharts LabelList documentation for available props.
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
Enables interactive clicking on sectors to select/deselect them. Selected sectors expand slightly and unselected sectors dim.
type: boolean
default: false
Callback function that is called when a sector is selected or deselected. Receives an object with dataKey (sector name) and value (sector 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 sector names (values from your nameKey field) that should have a glowing effect applied. Creates a smooth outer glow around the specified sectors.
type: string[]
default: []
Additional props to pass to the underlying Recharts PieChart component.
type: ComponentProps<typeof PieChart>
Read the Recharts PieChart documentation for available props.
Additional props to pass to the underlying Recharts Pie component.
type: Omit<ComponentProps<typeof Pie>, "data" | "dataKey" | "nameKey">
Read the Recharts Pie documentation for available props.