Pie

Give ChartContainer a fixed height and the PieChart fills its width, with a label on each slice and colors from each row's fill.

Set paddingAngle to open a gap between slices and cornerRadius to round their ends, on a thin ring drawn with innerRadius.

Set startAngle to 180 and endAngle to 0, and move cy to the bottom edge, to draw the pie as a half circle.

Stack two Pie elements with different radii to show regions on the inside and the cities that make them up on an outer ring.

Add a LabelList with position set to center, inside or outside to place a label in the hole, on the slice or beside it.

Pass a function to label to print each slice's percent on it, and a shape that fades the other slices while one is hovered.

Return a Sector from shape to color each slice by index, one of them with a pattern fill, and color its outside LabelList to match.

Pass activeShape to draw the hovered slice with an outer ring, a leader line and its value and percent beside it.

Fill each slice from a shape that draws a radial gradient from the center outward, and outlines the hovered slice with it.

Draw a second half Pie over the first with an activeShape that renders a needle pointing at the active slice, like a gauge.

Place several ChartContainer elements in a CSS grid, spanning rows and columns, and each pie resizes to fill its cell.