A pie chart with stacked sections for React

The inner Pie uses desktopData, dataKey desktop, and outerRadius 60. The outer Pie uses mobileData, dataKey mobile, innerRadius 70, and outerRadius 90. The outer ring starts 10px past the inner ring.

Both arrays set fill to var(--color-january) and the same pattern for February through May. config gives each month a color from --chart-1 through --chart-5 and a label such as January. A month uses that color on both rings.

ChartTooltipContent sets indicator to line, labelKey to visitors, and nameKey to month. labelFormatter is formatRingLabel, which reads the hovered dataKey and returns the Desktop or Mobile label from config.

nameKey is month, and each row's month is a key such as january. config labels that key January. The title from formatRingLabel says which ring you are on, Desktop or Mobile.

Both arrays run January through May, in the same order. Desktop is 186, 305, 237, 173, and 209. Mobile is 80, 200, 120, 190, and 130.

ChartContainer is mx-auto aspect-square max-h-[250px]. config also labels visitors as Visitors, which is the labelKey on the tooltip.