Pitch Class Histogram

pc-histogramVisualizers

The plainest possible view of the data the circle-of-fifths wheel plots, and it earns its place by being plain — on a wheel you compare lengths at twelve different angles, which the eye is bad at, whereas twelve bars on a common baseline are exactly what the eye is good at. Use the wheel to see the key, this to read the numbers. Peak-normalised, so the tallest bar always fills the plot whatever the units, and a pitch class that never sounded keeps a visible stub, because silent and absent should not look identical. The root marker and the live-chord highlight together turn a static summary into a readout: the bars are the harmony so far, the highlight is the harmony this instant.

C♯

D♯

F♯

G♯

A♯

The five accidentals never sound, so they sit at the stub floor. The tick under C marks the tonic; the outlined bars are the chord playing now.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/pc-histogram

Pulls in

control-theme

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx

import { PcHistogram } from "@/components/ui/pc-histogram"

<PcHistogram
  weights={[1, 0, 0.55, 0, 0.8, 0.6, 0, 0.9, 0, 0.55, 0, 0.45]}
  activePcs={[0, 4, 7]}
  rootPc={0}
/>

Props

Prop	Type	Default	Description
weights	number[]	—	Length-12 pitch-class weights in CHROMATIC order (0 = C … 11 = B). Peak-normalised internally; units are arbitrary.
activePcs	number[]	—	Pitch classes to highlight — typically the chord sounding right now. Reduced mod 12.
rootPc	number	—	Marks this pitch class as the root/tonic with a tick beneath its bar.
height	number	96	Height of the bars in pixels, excluding the labels beneath them.
showLabels	boolean	true	Draw the note name under each bar.
width	number \| string	"100%"	Overall width. Defaults to filling the container.
color	string	—	Bar colour. Defaults to the --uikit-accent token.

Interaction

Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
Double-click resets to defaultValue.
Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.

All controls Start building