YourBanK logoYourBanK

DoughnutChart

A doughnut chart component for visualizing account balances.

Usage

1
2
3
4
5
6
7
8
9
10
11
import { DoughnutChart } from "@/components/bank/doughnut-chart"

export default function AccountBalances() {
  const accounts = [
    { name: "Checking", currentBalance: 5000 },
    { name: "Savings", currentBalance: 10000 },
    { name: "Investment", currentBalance: 15000 },
  ]

  return <DoughnutChart accounts={accounts} />
}

Props

accounts

Array of account objects with name and balance information.

Type: Array{<{ name: string, currentBalance: number }>

Features

Consistent Colors

Uses a predefined set of green shades for consistent branding.

Customizable Layout

Configurable cutout percentage and legend display options.

Interactive

Built-in tooltips and hover effects for better data exploration.