v0.1.0

<PxBars />ReactNavigation & dataFree

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.

View as Markdown

<PxBars />· loading

Playground

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

Loading <PxBars />

Props

maxlive

heightlive

unitlive

React

<PxBars label="Runs per day" unit="runs" max={0} height={170} />

Installation

pnpm dlx shadcn@latest add @lumesec/px-bars

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-bars.json

Usage

px-bars-example.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.

dataTypereadonly PxBarsDatum[]DefaultMon to Sun sample

The bars, left to right: { label: string; value: number }. Bars spring to new values when it changes.

maxTypenumberDefault0

Top of the value axis. With 0 the axis tops out at 110% of the largest value.

labelTypestringDefault"Bar chart"

Start of the canvas aria-label, followed by every label and value.

unitTypestring

Unit shown after the value in the tooltip.

heightTypenumberDefault170

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.

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.

<px-tabs>

Tabspx-tabs

<px-pagination>

Paginationpx-pagination

<px-nav>

Sidebar navpx-nav

<px-accordion>

Accordionpx-accordion

Was this page helpful?

Related