Balance Chart

Plot each period's income and expenses on either side of one zero axis: income bars grow up, expense bars grow down, so the periods that ran at a loss stand out at a glance. On entry the bars grow out of the axis one after another, then the net line draws in. Hover any column, or focus the chart and use the arrow keys, and that column gets a light band while the others fade back; the tooltip lists income, expenses and a net figure that tweens from its previous value. It defaults to a dark panel, and surface="auto" follows the site's light/dark mode instead. Pure hand-drawn SVG, no chart library.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<BalanceChart/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/balance-chart.en.json

Usage

import { BalanceChart } from "@/components/ui/balance-chart";

const data = [
  { label: "1月", income: 168000, expense: 142500 },
  { label: "2月", income: 121000, expense: 133800 },
  { label: "3月", income: 152400, expense: 139600 },
];

<BalanceChart
  title="本季收支"
  data={data}
  currency="NT$"
  onActiveIndexChange={(i) => console.log(i === null ? "清除" : data[i].label)}
/>

Props

BalanceDatum

CSS variables

How it works

• Symmetric domain: the largest income or expense across all periods is rounded up to a multiple of 1, 2, 2.5, 5 or 10, with two grid segments on each side; tick values use the compact notation of Intl.NumberFormat (for example "200K").
• Bars grow out of the zero axis with scaleY (income from its bottom edge, expenses from their top edge) on cubic-bezier(0.22,1,0.36,1); the net line draws in over 600ms via pathLength once every bar has landed, and the net dots appear along it in order.
• The entrance fires once through useInView when the chart enters the viewport (margin -10% 0px); width is measured with ResizeObserver, using a 560px fallback during SSR and snapping to the container after mount.
• The active column's band and the tooltip slide between columns on a spring (stiffness 400, damping 32); the tooltip sits on the far side of the column and is clamped inside the container, so it never covers the bars or overflows.
• When columns are too narrow for every X label, labels are thinned out automatically; the active period is always labelled and bolded.

Accessibility

• The plot is a focusable role="group": ← → switch periods, Home / End jump to the ends, Esc clears; a focus-visible ring shows while focused
• The svg is role="img" with an aria-label summarising the period count, total net and the highest / lowest periods
• An sr-only <table> carries the data (period, income, expenses, net) and is linked to the plot through aria-describedby
• Switching periods announces that period's income, expenses and net through an sr-only aria-live="polite" region; the visual tooltip is hidden from assistive tech to avoid duplication
• When the user's system has reduce motion turned on, bar growth and the line draw jump straight to their end state, the band and tooltip stop sliding and the net figure no longer tweens; hover and keyboard readouts still work