Barcode Bar Chart React component
A week of hours as a barcode: one thin line per hour, brighter when busier. A lens opens under the pointer, and the lines can rise into a regular bar chart.
About the Barcode Bar Chart component
Barcode Bar Chart fits a whole week of hours into one strip. Each hour is a thin line that gets brighter as it gets busier, so working days, quiet nights and weekends show up at a glance, like a barcode of how your team works.
Point at the strip and a lens opens the lines around you so you can read a single hour. A switch raises the lines into a regular bar chart when you want exact heights.
When to use it
Use it for dense time series like deploys, orders, alerts or support tickets, where the rhythm matters more than any one value.
With fewer than about 30 values, a normal bar chart gives each one more room.
Installation
Add the Barcode Bar Chart component to your project with the shadcn CLI. It lands in components/barcode-bar-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/barcode-bar-chartProps
<BarcodeBarChart /> accepts 12 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Deploys by hour" |
| subtitle | string | "One line per hour. Point at the week to open it up." |
| data | { label: string; value: number }[] | DEFAULT_DATA |
| groupSize Slots in each group, used for the labels underneath. | number | 24 |
| groups One label per group. | string[] | WEEK |
| defaultMode | "barcode" | "bars" | "barcode" |
| lens How much wider the bars get under the pointer. | number | 3 |
| color Colour of the busiest slots. | string | — |
| height Height of the plot, in px. | number | 200 |
| unit Words after the value in the readout. | [singular: string, plural: string] | ["deploy", "deploys"] |
| formatValue | (value: number) => string | FORMAT |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Deploys by hour"
- subtitlestringDefault: "One line per hour. Point at the week to open it up."
- data{ label: string; value: number }[]Default: DEFAULT_DATA
- groupSize
Slots in each group, used for the labels underneath.
numberDefault: 24 - groups
One label per group.
string[]Default: WEEK - defaultMode"barcode" | "bars"Default: "barcode"
- lens
How much wider the bars get under the pointer.
numberDefault: 3 - color
Colour of the busiest slots.
string - height
Height of the plot, in px.
numberDefault: 200 - unit
Words after the value in the readout.
[singular: string, plural: string]Default: ["deploy", "deploys"] - formatValue(value: number) => stringDefault: FORMAT
Barcode Bar Chart FAQ
- How many values can it show?
- Hundreds. The default week has 168, and each line only needs a couple of pixels.
- What happens on phones?
- Below 520px two neighbouring slots share a line, so the lines stay wide enough to tell apart.
- Can I change the lens?
- Yes. lens sets how much wider the lines get. Set it to 0 to turn the effect off.
- Does it work with a keyboard?
- Yes. Focus the chart and use the left and right arrow keys to move through the slots.
