React volume profile chart — activity by price level, turned perpendicular to the trend axis. Tiny accessible SVG microchart; RSC-safe static or /interactive.

VolumeProfile answers "at which level did activity concentrate — not when?". It is a histogram turned perpendicular to the usual trend axis: the level runs vertically and bars extend horizontally by the mass of activity at each level. The modal level — the point of control, or POC — is accented, and the value area (the levels holding most of the activity) is shaded.

VolumeProfile

interactive · 5.23 kB · static · 2.85 kB

Install

Import & usereact/volume-profile

import { VolumeProfile } from "@microcharts/react/volume-profile";// profile — real values under “Sample data” below<VolumeProfile data={profile} title="Volume by price" />

Sample data

const profile = [  { level: 134, weight: 3 },  { level: 136, weight: 6 },  { level: 138, weight: 11 },  { level: 140, weight: 18 },  { level: 142, weight: 26 },  { level: 144, weight: 20 },  { level: 146, weight: 12 },  { level: 148, weight: 7 },  { level: 150, weight: 4 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — volume-at-price, level-of-activity distributions, load by tier.
Avoid for — a time series (Sparkline) or when the timing is what matters.

Sizing

Variants

right side

Edge cases

every observation at one level

empty

Four homes

Why this default

A perpendicular histogram because "where" is a different question from "when", and no time-axis chart can answer it. The value area is a stated convention — valueArea defaults to 0.7, and the fraction is stated in the summary — not an implied confidence interval. The modal bin is the only accented mark, because "where did activity pile up" is the one question the shape is built to answer.

Accessibility

The accessible name states where activity concentrates — "Activity concentrates at 142.33 (POC); 70% within 140.33–145.67." (the right-aligned demo's 5-level profile, default 12 bins). An even distribution reads "Activity is evenly spread." The interactive entry roves the levels with ↑/↓, announcing each level's share of activity and flagging the POC.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	{ level, weight }[] \| number[]	Activity mass per level, or raw levels.
valueArea	number	Mass fraction of the shaded value area (0.7).
align	"left" \| "right"	Which way bars grow.
label	"poc" \| "none"	The POC level beside the accent bar.
bins	number	Number of histogram bins (default 12).
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.