---
title: "Stats with chart"
description: "A heading, a paragraph and two figures beside a card with the quarterly bar chart they're worked out from, and its caption."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/stats-with-chart
---

# Stats with chart

A heading, a paragraph and two figures beside a card with the quarterly bar chart they're worked out from, and its caption.

The left column carries the heading, a paragraph and two figures: the latest year's total and its change on the year before. Both are summed from the chart's own quarters, so they can't disagree with it. The card on the right draws eight quarters as bars, the latest year in ink and the year before in mid-grey that still holds 3:1, with a legend and a caption saying what's counted. The chart takes keyboard focus with a visible ring, arrow keys step through the quarters, and its label reads every value. Side by side from about 1024px wide, stacked below that; the heading and figures drop to title size on phones.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/stats-with-chart
```

## Dependencies
- npm: recharts@^3.8.0
- edbn: edbn-base, card, chart

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More stats blocks

All 3, with install commands: https://ui.edbn.me/docs/blocks/stats (Markdown: https://ui.edbn.me/docs/blocks/stats.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt