# Browser Usage block

> Browser usage donut chart card with 5D, 2W and 1M period tabs and total visitors KPI

Donut chart of visitor share across browsers with a 5D/2W/1M tab switcher, total visitors stat, trend badge and slice labels. Uses ReUI Frame and Badge plus shadcn Tabs, Item, Button and recharts Pie. For analytics dashboards and traffic widgets.

- Type: Pro block
- Category: [Pie Chart](https://reui.io/blocks/chart/pie-chart.md)
- Page: https://reui.io/blocks/chart/pie-chart/chart-27
- MCP: `get_block("chart-27")`
- Built with: Badge, Button, Frame, Item, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A donut with in slice visitor counts across 5 browser slices, a summed total, 5D, 2W and 1M tabs, an Export button and a footnote

## Agent notes

- Replace `browserData` in data.ts, one list per `PeriodKey`; each slice sets its own `fill`, and `PERIODS` names the tabs
- The Export `Button` has no onClick handler, and the +5.2% trend `Badge` is fixed text that never changes with `selectedPeriod`
- `CustomTooltip` prints the raw `browser` key in upper case, so store a display name there or map it through `chartConfig` labels

## When not to use

- A source split that needs an extra slice for the share left untracked: use [Inflows by Source](https://reui.io/blocks/chart/pie-chart/chart-13.md) (`get_block("chart-13")`)
- Inflow sources on a half ring with the total set inside the arc: use [Inflows Gauge](https://reui.io/blocks/chart/radial-chart/chart-12.md) (`get_block("chart-12")`)

## Install

```bash
npx shadcn@latest add @reui/chart-27
```

## About Pie Chart blocks

### When to use

- A share of a total split across a few sources, browsers or funds around a donut
- A donut with the total in its center and a legend row per segment under period tabs

### When not to use

- A single figure measured against a target on an arc gauge: use the [Radial Chart blocks](https://reui.io/blocks/chart/radial-chart.md)
- Shares across more than a handful of categories that need exact comparison: use the [Bar Chart blocks](https://reui.io/blocks/chart/bar-chart.md)

### Agent notes

- The donut hole is the `innerRadius` on `Pie`, and slice labels and colors come from `chartConfig`

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.