Skip to content

Rose Pie Panel

Rose PiePreview
HousingFoodTransportUtilitiesOther

A Nightingale rose chart (also called a polar area chart) where both the angle and radius of each petal encode the expense amount. Larger spending categories have proportionally larger petals, making relative magnitude immediately visible.

What It Shows

Monthly expenses broken down by category. Each petal represents one expense category. The visual area of each petal is proportional to spending, so the biggest categories are obvious at a glance. Categories are sorted largest-first.

Key Features

  • Area-proportional petals -- both angle and radius scale with the value
  • Total expenses in header -- formatted as NZD
  • Bouncy entry animation -- petals bloom in with a staggered elastic effect on load
  • Connecting label lines -- smooth curves linking labels to their petals

Tooltip

Shows a colour dot, category name, NZD amount, and percentage of total expenses.

Interactivity

  • Hover -- tooltip with category colour swatch, name, amount, and percentage
  • Load animation -- each segment scales in with a bouncy elastic easing and a randomised delay

Empty State

Displays "No spending data" when there are no expenses recorded for the current month.