# Bar chart
> Pixel bar chart whose bars grow cell by cell and spring to new data; hover or the arrow keys show exact values in a tooltip.
- React: `import { PxBars } from "@/components/lumesec/px-bars"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-bars.json
- Page: https://elements.lumesec.ai/components/pixel-ui/bars



Live preview: https://elements.lumesec.ai/view/px-bars

Demo source:

```tsx
"use client";

import * as React from "react";

import { PxBars, type PxBarsDatum } from "@/components/lumesec/px-bars";

const WEEKS: Record<"week" | "last", PxBarsDatum[]> = {
  week: [
    { label: "Mon", value: 12 },
    { label: "Tue", value: 18 },
    { label: "Wed", value: 9 },
    { label: "Thu", value: 22 },
    { label: "Fri", value: 17 },
    { label: "Sat", value: 6 },
    { label: "Sun", value: 4 },
  ],
  last: [
    { label: "Mon", value: 8 },
    { label: "Tue", value: 11 },
    { label: "Wed", value: 15 },
    { label: "Thu", value: 13 },
    { label: "Fri", value: 20 },
    { label: "Sat", value: 9 },
    { label: "Sun", value: 3 },
  ],
};

const BUTTON =
  "h-[30px] rounded-lg border border-border bg-card px-[11px] text-[12.5px] font-medium hover:border-[color-mix(in_srgb,var(--lumesec)_50%,var(--border))]";

export default function PxBarsDemo() {
  const [week, setWeek] = React.useState<"week" | "last">("week");
  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <div className="grid w-[min(380px,100%)] gap-3.5">
        <PxBars data={WEEKS[week]} unit="runs" label="Runs per day" />
        <div className="flex flex-wrap justify-center gap-1.5">
          <button type="button" className={BUTTON} onClick={() => setWeek("week")}>
            This week
          </button>
          <button type="button" className={BUTTON} onClick={() => setWeek("last")}>
            Last week
          </button>
        </div>
      </div>
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-bars
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-bars.json
```

## Usage

React:

```tsx
import { PxBars } from "@/components/lumesec/px-bars";

export function Example() {
  return (
    <PxBars
      label="Runs per day"
      unit="runs"
      data={[
        { label: "Mon", value: 12 },
        { label: "Tue", value: 18 },
        { label: "Wed", value: 9 },
      ]}
    />
  );
}
```

## Behaviour

Bars stacked from pixel cells that grow in one after another and spring to new data. Hover or use the arrow keys for exact values.

## API reference

### Props

Also accepts every prop of `<div>` (`React.ComponentProps<"div">`), spread onto the root element.

| Prop     | Type                     | Default             | Description                                                                                             |
| -------- | ------------------------ | ------------------- | ------------------------------------------------------------------------------------------------------- |
| `data`   | `readonly PxBarsDatum[]` | `Mon to Sun sample` | The bars, left to right: `{ label: string; value: number }`. Bars spring to new values when it changes. |
| `max`    | `number`                 | `0`                 | Top of the value axis. With 0 the axis tops out at 110% of the largest value.                           |
| `label`  | `string`                 | `"Bar chart"`       | Start of the canvas `aria-label`, followed by every label and value.                                    |
| `unit`   | `string`                 | —                   | Unit shown after the value in the tooltip.                                                              |
| `height` | `number`                 | `170`               | Canvas height in pixels.                                                                                |

### Ref

`ref` points at the root `HTMLDivElement`.

## Keyboard

| Keys                   | Action                                                            |
| ---------------------- | ----------------------------------------------------------------- |
| ArrowRight / ArrowLeft | Highlight the next / previous bar and show its tooltip, wrapping. |

## Accessibility

* The canvas has `role="img"`, `tabindex="0"` and an `aria-label` listing every label and value, for example "Runs per day: Mon 12, Tue 18, …".
* The tooltip is visual only and is not announced; losing focus or the pointer hides it.
* Reduced motion: bars appear at their final height without the staggered spring.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--lumesec`, `--lumesec-shine`, `--foreground`, `--muted-foreground` and `--card`.

## Notes

* The sample data Mon 12, Tue 18, Wed 9, Thu 22, Fri 17, Sat 6, Sun 4 is drawn when `data` is not set.
* The value axis has five gridlines labelled from 0 to the axis maximum, in the monospace font.