Pitch Class Histogram

pc-histogramVisualizers

Twelve bars: how much each pitch class sounded.

$ pnpm dlx shadcn@latest add @pluginui/core-pc-histogram
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

control-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-pc-histogram.json

Usage

Connect the documented props to your application or host.

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}
/>
About Pitch Class Histogram

This plain view of the circle-of-fifths wheel's data earns its place by making comparisons easier. On a wheel, the eye struggles to compare lengths at twelve different angles; twelve bars on a common baseline are easier to read. Use the wheel to see the key and this view to read the numbers. Peak normalisation makes the tallest bar fill the plot whatever the units. A pitch class that never sounded keeps a visible stub, because silent and absent should not look identical. The root marker and live-chord highlight turn the summary into a readout: the bars show the harmony so far, and the highlight shows the harmony now.

Props

PropTypeDefaultDescription
weightsnumber[]—Length-12 pitch-class weights in CHROMATIC order (0 = C … 11 = B). Peak-normalised internally; units are arbitrary.
activePcsnumber[]—Pitch classes to highlight, typically the chord sounding now. Values are reduced mod 12.
rootPcnumber—Marks this pitch class as the root/tonic with a tick beneath its bar.
heightnumber96Height of the bars in pixels, excluding the labels beneath them.
showLabelsbooleantrueDraw the note name under each bar.
widthnumber | string"100%"Overall width. Defaults to filling the container.
colorstring—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 controlsStart building