Statistic Share Of Total

FreeNew

A ranked list of statistics where each row shows its share of the total as a number and a thin bar, sorted largest first with a cap and an Other row.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

top1

prefix

Guide and examples

When to use it

Use this when you show where a total comes from: revenue by region, traffic by source, cost by team.

Do not use it when there are only two or three parts (use a Meter Group) or order matters more than size.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/statistic-share-of-total.json

It composes statistic, which the CLI installs for you.

Usage

import { StatisticShareOfTotal } from "@/components/statistic-share-of-total"

<StatisticShareOfTotal
  title="Revenue by region"
  prefix="$"
  top={5}
  rows={regions}
/>

Props

Prop	Type	Required	Description
`rows`	`ShareRow[]`	required	-
`title`	`string`	required	-
`top`	`number`	optional	Show this many rows, group the rest as "Other". Default 5.
`prefix`	`string`	optional	-

Accessibility

Shares are printed as numbers; the bars are aria-hidden decoration.
The list is an ordered list, largest first.
The Other row keeps the numbers adding up.

Testing

The pattern ships with a Testing Library test (statistic-share-of-total.test.tsx) that covers sorting with shares, grouping into Other, no Other when not needed and the zero total.