VolumeProfile
VolumeProfile shows where activity concentrated by level, accenting the point of control.
- encodes
- horizontal bar = mass at level (level axis vertical)
- precision
- medium
- nodes
- ≤ 4
Activity piled up somewhere in the 140s, and a time axis cannot tell you which level. VolumeProfile 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 the only accented mark. The value area (the levels holding most of the activity) is shaded behind it.
Install
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 },];Try it
When to use it
Use it for volume-at-price, level-of-activity distributions, and load by tier. For a time series, or whenever the timing is what matters, use Sparkline.
Sizing
Variants
valueArea defaults to 0.7, and the summary states the fraction it used. It is a stated convention, not an implied
confidence interval.
Edge cases
Four homes
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 activity mass alongside its share 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.