shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartPieGradients } from "@/components/charts/chart-pie-gradients";<ChartPieGradients />API Reference
PieChart
dataPieData[]
The slices to draw, in order. Each item's value sets its share of the total, and its label is shown in the centre while the slice is hovered.
size?number
Chart width and height in pixels. Omit to fill the width of the parent element; the chart stays square.
innerRadius?number
Inner radius in pixels. 0 draws a solid pie; a positive value draws a donut and leaves room for PieCenter.
- Default
0
padAngle?number
Gap between neighbouring slices, in radians.
- Default
0
cornerRadius?number
Corner radius of each slice, in pixels.
- Default
0
startAngle?number
Angle where the first slice starts, in radians, clockwise from 12 o'clock (d3's convention): the default -Math.PI / 2 is 9 o'clock. bklit-ui's own comment calls the default "top", but its d3 arcs start at 9 o'clock too.
- Default
-Math.PI / 2
endAngle?number
Angle where the last slice ends, in radians. Together with startAngle this sets the sweep; the default is a full circle.
- Default
(3 * Math.PI) / 2
className?string
Extra class name for the chart container.
style?CSSProperties
Inline styles for the chart container, merged over the default sizing.
hoveredIndex?number | null
Index of the hovered slice, for controlled hover. Pass null for no hover; leave it undefined to let the chart manage hover itself.
- Type
number | null
onHoverChange?(index: number | null) => void
Called with the index of the hovered or keyboard-focused slice, or null when hover ends.
- Type
(index: number | null) => void
hoverOffset?number
Distance in pixels a hovered slice moves out (or grows by). The pie also reserves this much padding around its edge so a hovered slice is never clipped. A PieSlice can override it for its own slice.
- Default
10
childrenReactNode
PieSlice elements to configure individual slices, an optional PieCenter, and any pattern or gradient definitions that slices reference through fill.
enterTransition?PieEnterTransition
Transition for the slice entrance sweep, in the shape used by the motion library (type, duration in seconds, ease, and spring values). Defaults to a 1.1 second tween on the shared reveal curve.
enterStaggerScale?number
Multiplier for the delay between one slice's entrance and the next. 0 starts all slices together.
- Default
1
geometryScrubbing?boolean
Turns off hover effects, PieSlice overrides and the hover readout in PieCenter. Meant for live editors that redraw the geometry while a control is dragged; leave it off otherwise.
- Default
false
ariaLabel?string
Accessible name of the chart.
- Default
"Pie chart"
ariaDescription?string
Longer accessible description of the chart.
RadialGradient
cx?Length
Center x of the outer circle, as a fraction or a percentage.
- Default
0.5
cy?Length
Center y of the outer circle.
- Default
0.5
r?Length
Radius of the outer circle.
- Default
0.5
fx?Length
Focal point x. The focal point is the center when omitted.
fy?Length
Focal point y. The focal point is the center when omitted.
idstring
Id of the gradient, referenced as url(#id).
from?string
Color at the start of the gradient.
- Default
"currentColor"
to?string
Color at the end of the gradient.
- Default
"currentColor"
fromOffset?Length
Position of the start color, as a fraction (0.2) or a percentage ("20%").
- Default
0
toOffset?Length
Position of the end color, as a fraction or a percentage.
- Default
1
fromOpacity?Length
Opacity of the start color from 0 to 1.
- Default
1
toOpacity?Length
Opacity of the end color from 0 to 1.
- Default
1
rotate?number | string
Rotates the gradient direction by this many degrees.
- Type
number | string
transform?string
An SVG transform string. Only rotate(angle) is applied, and it takes precedence over rotate.
children?ReactNode
<stop> elements. When present they replace from and to.
PieSlice
indexnumber
Index of the slice this element configures, matching its position in the data array.
color?string
Colour of this slice's hover glow (showGlow). Defaults to the data item's color, then the palette. To paint the slice itself, set color on the PieData item, or use fill.
fill?string
Paint override for this slice, for example url(#patternId) for a pattern or gradient defined as a child of the chart. Takes precedence over the data item's color and fill.
animate?boolean
Play the entrance animation for this slice. Set false to draw it without animating.
- Default
true
showGlow?boolean
Glow while the slice is hovered or keyboard-focused: a 12 px drop shadow in the slice's color.
- Default
false
hoverEffect?PieSliceHoverEffect
How the slice reacts when hovered: "translate" moves it outward, "grow" extends its outer radius, "none" leaves it in place.
- Default
"translate"
hoverOffset?number
Distance in pixels for the hover effect. Defaults to the chart's hoverOffset.
- Default
the chart's `hoverOffset`
className?string
Accepted for bklit-ui compatibility; has no effect.
