Volume and price
Compare price movement with trading volume.
Chart ID: volumePrice. Independent import: @revolist/charts/volume-price.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare price movement with traded volume in aligned panels. Prices and volume have separate scales, so compare timing rather than heights between panels.
Data requirements
Section titled “Data requirements”Bind open, high, low and close to their numeric series IDs; volume-price additionally needs volume. Use category order, a time axis for instants or a supported numeric X scale for numeric observation coordinates.
The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.
| Data role | Field count |
|---|---|
category | 1 or more |
series | 5 or more |
open | 1 or more |
high | 1 or more |
low | 1 or more |
close | 1 or more |
volume | 1 or more |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createVolumePriceChart after the host mounts. This factory fixes the chart type to volumePrice.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createVolumePriceChart } from '@revolist/charts/volume-price';
const container = document.getElementById('chart')!;const chart = await createVolumePriceChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-3", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-4", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Open", "columnPath": [ "Open" ], "labels": [ "Open" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "High", "columnPath": [ "High" ], "labels": [ "High" ], "kind": "leaf", "prop": "preview-1" }, { "id": "preview-series-2", "label": "Low", "columnPath": [ "Low" ], "labels": [ "Low" ], "kind": "leaf", "prop": "preview-2" }, { "id": "preview-series-3", "label": "Close", "columnPath": [ "Close" ], "labels": [ "Close" ], "kind": "leaf", "prop": "preview-3" }, { "id": "preview-series-4", "label": "Volume", "columnPath": [ "Volume" ], "labels": [ "Volume" ], "kind": "leaf", "prop": "preview-4" } ], "values": [ [ 42, 48, 39, 46, 32 ], [ 46, 51, 43, 44, 28 ], [ 44, 55, 42, 53, 41 ], [ 53, 57, 49, 51, 35 ], [ 51, 61, 50, 59, 48 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Open", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "High", "role": "measure", "semanticType": "number", "sourceField": "preview-1" }, { "id": "preview-series-2", "label": "Low", "role": "measure", "semanticType": "number", "sourceField": "preview-2" }, { "id": "preview-series-3", "label": "Close", "role": "measure", "semanticType": "number", "sourceField": "preview-3" }, { "id": "preview-series-4", "label": "Volume", "role": "measure", "semanticType": "number", "sourceField": "preview-4" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Mon", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ] }, "pivot:series": { "value": "Open", "label": "Open", "path": [ "Open" ], "labels": [ "Open" ] } }, "measures": { "preview-series-0": 42 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Mon", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-1": 48 } }, { "id": "[\"preview-category-0\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Mon", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-2": 39 } }, { "id": "[\"preview-category-0\",\"preview-series-3\"]", "dimensions": { "pivot:category": { "value": "Mon", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ] }, "pivot:series": { "value": "Close", "label": "Close", "path": [ "Close" ], "labels": [ "Close" ] } }, "measures": { "preview-series-3": 46 } }, { "id": "[\"preview-category-0\",\"preview-series-4\"]", "dimensions": { "pivot:category": { "value": "Mon", "label": "Mon", "path": [ "Mon" ], "labels": [ "Mon" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-4": 32 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Tue", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ] }, "pivot:series": { "value": "Open", "label": "Open", "path": [ "Open" ], "labels": [ "Open" ] } }, "measures": { "preview-series-0": 46 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Tue", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-1": 51 } }, { "id": "[\"preview-category-1\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Tue", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-2": 43 } }, { "id": "[\"preview-category-1\",\"preview-series-3\"]", "dimensions": { "pivot:category": { "value": "Tue", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ] }, "pivot:series": { "value": "Close", "label": "Close", "path": [ "Close" ], "labels": [ "Close" ] } }, "measures": { "preview-series-3": 44 } }, { "id": "[\"preview-category-1\",\"preview-series-4\"]", "dimensions": { "pivot:category": { "value": "Tue", "label": "Tue", "path": [ "Tue" ], "labels": [ "Tue" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-4": 28 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Wed", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ] }, "pivot:series": { "value": "Open", "label": "Open", "path": [ "Open" ], "labels": [ "Open" ] } }, "measures": { "preview-series-0": 44 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Wed", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-1": 55 } }, { "id": "[\"preview-category-2\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Wed", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-2": 42 } }, { "id": "[\"preview-category-2\",\"preview-series-3\"]", "dimensions": { "pivot:category": { "value": "Wed", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ] }, "pivot:series": { "value": "Close", "label": "Close", "path": [ "Close" ], "labels": [ "Close" ] } }, "measures": { "preview-series-3": 53 } }, { "id": "[\"preview-category-2\",\"preview-series-4\"]", "dimensions": { "pivot:category": { "value": "Wed", "label": "Wed", "path": [ "Wed" ], "labels": [ "Wed" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-4": 41 } }, { "id": "[\"preview-category-3\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Thu", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ] }, "pivot:series": { "value": "Open", "label": "Open", "path": [ "Open" ], "labels": [ "Open" ] } }, "measures": { "preview-series-0": 53 } }, { "id": "[\"preview-category-3\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Thu", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-1": 57 } }, { "id": "[\"preview-category-3\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Thu", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-2": 49 } }, { "id": "[\"preview-category-3\",\"preview-series-3\"]", "dimensions": { "pivot:category": { "value": "Thu", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ] }, "pivot:series": { "value": "Close", "label": "Close", "path": [ "Close" ], "labels": [ "Close" ] } }, "measures": { "preview-series-3": 51 } }, { "id": "[\"preview-category-3\",\"preview-series-4\"]", "dimensions": { "pivot:category": { "value": "Thu", "label": "Thu", "path": [ "Thu" ], "labels": [ "Thu" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-4": 35 } }, { "id": "[\"preview-category-4\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Fri", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ] }, "pivot:series": { "value": "Open", "label": "Open", "path": [ "Open" ], "labels": [ "Open" ] } }, "measures": { "preview-series-0": 51 } }, { "id": "[\"preview-category-4\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Fri", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-1": 61 } }, { "id": "[\"preview-category-4\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Fri", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-2": 50 } }, { "id": "[\"preview-category-4\",\"preview-series-3\"]", "dimensions": { "pivot:category": { "value": "Fri", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ] }, "pivot:series": { "value": "Close", "label": "Close", "path": [ "Close" ], "labels": [ "Close" ] } }, "measures": { "preview-series-3": 59 } }, { "id": "[\"preview-category-4\",\"preview-series-4\"]", "dimensions": { "pivot:category": { "value": "Fri", "label": "Fri", "path": [ "Fri" ], "labels": [ "Fri" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-4": 48 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-2", "observationId": "[\"preview-category-0\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-3", "observationId": "[\"preview-category-0\",\"preview-series-3\"]", "measureFieldId": "preview-series-3" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-4", "observationId": "[\"preview-category-0\",\"preview-series-4\"]", "measureFieldId": "preview-series-4" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-2", "observationId": "[\"preview-category-1\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-3", "observationId": "[\"preview-category-1\",\"preview-series-3\"]", "measureFieldId": "preview-series-3" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-4", "observationId": "[\"preview-category-1\",\"preview-series-4\"]", "measureFieldId": "preview-series-4" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-2", "observationId": "[\"preview-category-2\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-3", "observationId": "[\"preview-category-2\",\"preview-series-3\"]", "measureFieldId": "preview-series-3" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-4", "observationId": "[\"preview-category-2\",\"preview-series-4\"]", "measureFieldId": "preview-series-4" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-0", "observationId": "[\"preview-category-3\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-1", "observationId": "[\"preview-category-3\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-2", "observationId": "[\"preview-category-3\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-3", "observationId": "[\"preview-category-3\",\"preview-series-3\"]", "measureFieldId": "preview-series-3" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-4", "observationId": "[\"preview-category-3\",\"preview-series-4\"]", "measureFieldId": "preview-series-4" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-0", "observationId": "[\"preview-category-4\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-1", "observationId": "[\"preview-category-4\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-2", "observationId": "[\"preview-category-4\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-3", "observationId": "[\"preview-category-4\",\"preview-series-3\"]", "measureFieldId": "preview-series-3" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-4", "observationId": "[\"preview-category-4\",\"preview-series-4\"]", "measureFieldId": "preview-series-4" } ] } }, "bindings": { "open": [ "preview-series-0" ], "high": [ "preview-series-1" ], "low": [ "preview-series-2" ], "close": [ "preview-series-3" ], "volume": [ "preview-series-4" ] }, "presentation": { "dataLabels": false }});
// When the host unmounts:// chart.destroy();Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.
Supported options
Section titled “Supported options”Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.
| Option | Default | Accepted values |
|---|---|---|
showGridLines | true | true or false |
markOpacity | 1 | 0.2 to 1; step 0.05 |
priceStyle | candlestick | candlestick, ohlc, hlc, highLow, line, stepLine |
candleFill | legacy | legacy, filled, hollow |
volumePaneRatio | 0.24 | 0.1 to 0.8; step 0.01 |
Paired groups share aligned category/time/numeric X navigation, including named X frames. volumePaneRatio sets the volume share of usable pane height. Primary axes.y owns prices and axes.ySecondary owns volume; each supports independent scale, bounds, reversal, formatting and ticks. See volume-price axis options and limits.
Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.
Related charts
Section titled “Related charts”- Candlestick — Compare open, high, low, and close values over time.
- OHLC — Show open, high, low, and close values with compact ticks.
Charts overview · Installation · Data & Configuration
Use primary axes.x for category, time or numeric (linear, log, symlog, sqrt) observation coordinates. data maps and path level selection preserve source identities. See financial numeric X axes for ticks, windows, aligned price/volume panes, Pivot controls and limits.
Use paired volume-price collections for multiple OHLC/volume pairs, close-owned named X, fixed Y roles and chartOptions.volumePaneRatio (0.1–0.8). Resetting the ratio preserves automatic sizing.
Use Financial sessions and the trading toolbar for explicit exchange-session or ordinal time spacing, supplied named-zone calendars and the shared navigation/drawing controls. Omission retains continuous time and source timestamps.