---
product: "AG Charts"
title: "Financial Charts - Volume Profile"
description: "A Volume Profile shows the volume traded at each price level as horizontal bars against the price axis. It can be shown within a Financial Chart, or on its own as a Volume Profile Chart."
enterprise: true
framework: javascript
version: "14.3.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/charts/javascript/financial-charts/"
    - title: "Configuration"
      url: "https://www.ag-grid.com/charts/javascript/financial-charts-configuration/"
    - title: "Toolbar"
      url: "https://www.ag-grid.com/charts/javascript/financial-charts-toolbar/"
    - title: "Range Buttons"
      url: "https://www.ag-grid.com/charts/javascript/range-buttons/"
llms: "https://www.ag-grid.com/charts/llms.txt"
---

# Financial Charts - Volume Profile

A Volume Profile shows the volume traded at each price level as horizontal bars against the price axis. It can be shown within a Financial Chart, or on its own as a Volume Profile Chart.

#### Volume Profile

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData, getVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
  title: { text: "Acme Inc." },
  volumeProfile: {
    data: getVolumeProfile(),
    upKey: "upVolume",
    downKey: "downVolume",
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);
```

[Live example: Volume Profile](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/volume-profile/)

## Data

Volume Profile data has one row per price level, holding the price and the volume bought and sold at that price:

```js
{
    data: [
        { price: 135, upVolume: 3873690, downVolume: 3499965 },
        { price: 137.5, upVolume: 15861342, downVolume: 13138794 },
        { price: 140, upVolume: 19126307, downVolume: 25942209 },
    ],
    priceKey: 'price', // default
    upKey: 'upVolume',
    downKey: 'downVolume',
}
```

## Financial Chart

Set `volumeProfile` on a Financial Chart to show a Volume Profile alongside the price data, as in the example at the top of this page. It takes its own `data`, separate from the chart's `data`.

```js
{
    data: prices,
    volumeProfile: {
        data: profile,
        upKey: 'upVolume',
        downKey: 'downVolume',
    },
}
```

Hovering the chart shows the price level under the pointer in the [status bar](https://www.ag-grid.com/charts/javascript/financial-charts-configuration/#chart-features), after the price data values: its price range, up volume, down volume and total volume.

## Volume Profile Chart

Use a Volume Profile Chart to show a Volume Profile on its own, against a price axis.

#### Volume Profile Chart

```ts
import {
  AgCharts,
  AgVolumeProfileChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgVolumeProfileChartOptions = {
  data: getVolumeProfile(),
  title: { text: "Acme Inc." },
  upKey: "upVolume",
  downKey: "downVolume",
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createVolumeProfileChart(options);
```

[Live example: Volume Profile Chart](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/volume-profile-chart/)

```js
const options = {
    data: getVolumeProfile(),
    upKey: 'upVolume',
    downKey: 'downVolume',
};

AgCharts.createVolumeProfileChart(options);
```

Hovering a price level shows a tooltip.

### Selecting Price Levels

Set `selection.enabled` to let users select price levels. Selection is only available in a Volume Profile Chart.

#### Selecting Price Levels

```ts
import {
  AgCharts,
  AgVolumeProfileChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getRegularVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgVolumeProfileChartOptions = {
  data: getRegularVolumeProfile(),
  title: { text: "Acme Inc." },
  upKey: "upVolume",
  downKey: "downVolume",
  tickSize: 5,
  selection: { enabled: true, enableDrag: true },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createVolumeProfileChart(options);

function changeClickMode(event: Event) {
  options.selection = {
    ...options.selection,
    clickMode: (event.target as HTMLInputElement).value as
      "single" | "multiple",
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).changeClickMode = changeClickMode;
}
```

[Live example: Selecting Price Levels](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/selection/)

```js
{
    selection: {
        enabled: true,
        enableDrag: true,
    },
}
```

In this example:

- Click a price level to select it, or drag across the chart to select every level the rectangle touches.
- Use the Click Mode buttons to switch `selection.clickMode` between `'single'` and `'multiple'`.
- See [Selection](https://www.ag-grid.com/charts/javascript/selection/) for styling and the Selection API, and [Events](https://www.ag-grid.com/charts/javascript/events/#selectionchange) to respond to selection changes.

## Tick Size

Set `tickSize` to the price increment of the instrument to fix the height of each price level. Without it, each level is as high as the smallest gap between prices in the data.

#### Tick Size

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import {
  getData,
  getIrregularVolumeProfile,
  getRegularVolumeProfile,
} from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
  title: { text: "Acme Inc." },
  volumeProfile: {
    data: getRegularVolumeProfile(),
    upKey: "upVolume",
    downKey: "downVolume",
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);

function changeData(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  options.volumeProfile!.data =
    value === "irregular"
      ? getIrregularVolumeProfile()
      : getRegularVolumeProfile();

  chart.update(options);
}

function changeTickSize(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  options.tickSize = value === "auto" ? undefined : Number(value);

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).changeData = changeData;
  (<any>window).changeTickSize = changeTickSize;
}
```

[Live example: Tick Size](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/tick-size/)

```js
{
    tickSize: 2.5,
}
```

In this example:

- Each price is rounded to the nearest multiple of `tickSize`, and the volumes of prices that round to the same level are added together.
- Every level between the lowest and highest price is shown, so the levels stay evenly spaced. Levels with no data are left empty.
- With the Irregular data and Tick Size Auto, the smallest gap between prices sets the level height, giving thin, uneven bars. Choose a Tick Size to group them into regular levels.
- A larger `tickSize` merges more prices into each level, giving fewer, taller bars.

## Total Segment

Set `totalSegment.enabled` to show each price level's total volume in a column between the price axis and the bars.

#### Total Segment

```ts
import {
  AgCharts,
  AgVolumeProfileChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getRegularVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgVolumeProfileChartOptions = {
  data: getRegularVolumeProfile(),
  title: { text: "Acme Inc." },
  upKey: "upVolume",
  downKey: "downVolume",
  tickSize: 5,
  totalSegment: { enabled: true },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createVolumeProfileChart(options);
```

[Live example: Total Segment](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/total-segment/)

In a Volume Profile Chart, `totalSegment` is a top-level option. In a Financial Chart, set it on `volumeProfile`:

```js
{
    volumeProfile: {
        data: profile,
        upKey: 'upVolume',
        downKey: 'downVolume',
        totalSegment: {
            enabled: true,
        },
    },
}
```

- Totals are abbreviated, such as `1.2K` or `3.0M`. Use `label.formatter` to change them.
- The column is as wide as its widest label, but no narrower than `minWidth`. Set `width` to fix it instead.

## Customisation

### Width and Placement

In a Financial Chart, set `widthRatio` and `placement` on `volumeProfile` to change the size and side of the bars.

#### Width and Placement

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData, getVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
  title: { text: "Acme Inc." },
  volumeProfile: {
    data: getVolumeProfile(),
    upKey: "upVolume",
    downKey: "downVolume",
    placement: "right",
    widthRatio: 0.5,
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);

function changePlacement(event: Event) {
  options.volumeProfile!.placement = (event.target as HTMLInputElement)
    .value as "left" | "right";

  chart.update(options);
}

function changeWidthRatio(event: Event) {
  options.volumeProfile!.widthRatio = Number(
    (event.target as HTMLInputElement).value,
  );

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).changePlacement = changePlacement;
  (<any>window).changeWidthRatio = changeWidthRatio;
}
```

[Live example: Width and Placement](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/customisation/)

```js
{
    volumeProfile: {
        data: profile,
        upKey: 'upVolume',
        downKey: 'downVolume',
        placement: 'left',
        widthRatio: 0.75,
    },
}
```

In this example:

- `widthRatio` sets the length of the longest bar as a ratio of the series area width. It defaults to `0.5`.
- `placement` sets the edge the bars extend from, `'left'` or `'right'`. It defaults to `'right'`.

### Colours

By default, the bars use the `up` and `down` fills of the [theme palette](https://www.ag-grid.com/charts/javascript/themes/#palette).

Set `up` and `down` to style the bars of each direction with options such as `fill`, `fillOpacity`, `stroke` and `strokeWidth`. These take precedence over the theme palette.

#### Colours

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData, getVolumeProfile } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
  title: { text: "Acme Inc." },
  volumeProfile: {
    data: getVolumeProfile(),
    upKey: "upVolume",
    downKey: "downVolume",
    up: { fill: "#F2C12E", stroke: "#B8901A" },
    down: { fill: "#2E6BF2", stroke: "#1A45A8" },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);
```

[Live example: Colours](https://www.ag-grid.com/charts/typescript/financial-charts-volume-profile/examples/bar-colours/)

```js
{
    //...other volume profile options
    up: { fill: '#F2C12E', stroke: '#B8901A' },
    down: { fill: '#2E6BF2', stroke: '#1A45A8' },
}
```

In this example:

- `up` and `down` colour the bars of the up and down volume.
- A `stroke` is 1 pixel wide unless `strokeWidth` is set.

The [status bar](https://www.ag-grid.com/charts/javascript/financial-charts-configuration/#chart-features) uses the `up.fill` and `down.fill` colours to display these values.

## API Reference

#### Volume Profile Chart Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| upKey (required) | string |  | The key used to retrieve the up volume of each level from the data. |
| downKey (required) | string |  | The key used to retrieve the down volume of each level from the data. |
| theme | AgChartTheme \| AgChartThemeName |  | A predefined theme name or an object containing theme overrides.   See: [Themes Reference](/themes-api/) |
| listeners | AgAxesChartListeners |  | A map of event names to event listeners. |
| listeners.crossLineClick | Listener |  | The listener to call when a Cross Line on any axis is clicked. |
| listeners.crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on any axis is double-clicked. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. Useful for a chart containing multiple series. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. |
| listeners.axisClick | Listener |  | The listener to call when any axis in the chart is clicked. Useful for a chart containing multiple axes. |
| listeners.axisDoubleClick | Listener |  | The listener to call when any axis in the chart is double-clicked. Useful for a chart containing multiple axes. |
| listeners.captionClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is clicked. |
| listeners.captionDoubleClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is double-clicked. |
| listeners.seriesVisibilityChange | Listener |  | The listener to call when a series visibility is changed. |
| listeners.activeChange | Listener |  | The listener to call when the active state (highlight/tooltip) is changed. |
| listeners.selectionChange | Listener |  | The listener to call when data selection is changed |
| listeners.collapsedChange | Listener |  | The listener to call when collapsed items are changed. |
| listeners.click | Listener |  | The listener to call when the chart is clicked. |
| listeners.doubleClick | Listener |  | The listener to call when the chart is double-clicked. |
| listeners.annotations | Listener |  | The listener to call when the annotations are changed. |
| listeners.zoom | Listener |  | The listener to call when the zoom is changed. |
| data | DatumDefault[] |  | The data to render the chart from. If this is not specified, it must be set on individual series instead. |
| dataIdKey | DatumKey |  | The key of the property on each datum that contains its unique identifier. When specified, transactions will match items by this field instead of by object reference. The values of this field must be unique across the dataset. |
| container | HTMLElement \| null |  | The element to place the rendered chart into. |
| initialState | AgInitialStateOptions |  | The initial state of the chart. This must be a serialisable value. |
| initialState.active | AgActiveState |  | The initial picked item. |
| initialState.active.activeItem | AgActiveItemState |  | The active series datum shape. If the entire series is active, then `itemId` will be set to `undefined`. |
| initialState.active.activeItem.type (required) | 'series-node' \| 'legend' |  | Where the item activation originates from. |
| initialState.active.activeItem.seriesId (required) | string |  | The unique identifier of the series that this picked datum belongs to. |
| initialState.active.activeItem.itemId (required) | string \| number |  | The unique identifier of the picked datum. |
| initialState.active.frozen | boolean |  | The frozen state. When the picked item is frozen, user interactions with the chart will be ignored and not updated the currently picked item. |
| initialState.annotations | AgAnnotation[] |  | The initial set of annotations to display on the chart. |
| initialState.chartType | AgInitialStateChartType |  | The initial chart type. |
| initialState.collapsed | Array<string \| number> |  | The initial collapsed datums by id, for Organization Charts. |
| initialState.legend | AgInitialStateLegendOptions[] |  | The initial legend series visibility state. |
| initialState.legend.visible (required) | boolean |  | Whether the legend item is currently enabled or not. |
| initialState.legend.seriesId | string |  | Series or item id |
| initialState.legend.itemId | string |  | Legend item id - usually yKey value for cartesian series. |
| initialState.legend.legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| initialState.legendPagination | number |  | The initial legend pagination page as a zero-based index, restored on a best-effort like-for-like basis as the page count depends on the render size. |
| initialState.zoom | AgInitialStateZoomOptions |  | The initial zoom state. |
| initialState.zoom.rangeX | AgInitialStateZoomRange |  | The initial zoom range for the x-axis. |
| initialState.zoom.rangeX.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeX.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY | AgInitialStateZoomRange |  | The initial zoom range for the y-axis. |
| initialState.zoom.rangeY.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.ratioX | AgInitialStateZoomRatio |  | The initial zoom ratio for the x-axis. |
| initialState.zoom.ratioX.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioX.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.ratioY | AgInitialStateZoomRatio |  | The initial zoom ratio for the y-axis. |
| initialState.zoom.ratioY.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioY.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.autoScaledAxes | AgAutoScaledAxes |  | Axes that are zoomed by the auto scaling functionality. |
| width | PixelSize |  | The width of the chart in pixels. |
| height | PixelSize |  | The height of the chart in pixels. |
| minHeight | PixelSize | 300 | Sets the minimum height of the chart. Ignored if `height` is specified. |
| minWidth | PixelSize | 300 | Sets the minimum width of the chart. Ignored if `width` is specified. |
| title | AgChartCaptionOptions |  | Configuration for the title shown at the top of the chart. |
| title.enabled | boolean |  | Whether the text should be shown. |
| title.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| title.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' |  | Horizontal position of the text. |
| title.fontStyle | FontStyle |  | The font style to use for the text. |
| title.fontWeight | FontWeight |  | The font weight to use for the text. |
| title.fontSize | FontSize |  | The font size in pixels to use for the text. |
| title.lineHeight | PixelSize |  | The line height in pixels to use for the text. Defaults to the natural line height of the font. |
| title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| title.spacing | PixelSize |  | Spacing added to help position the text. |
| title.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| title.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| title.minimumFontSize | FontSize |  | If the text does not fit within the space available to it, setting this will allow the text to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The text is only truncated when it still does not fit at `minimumFontSize`. |
| title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space: spaces, tabs and zero-width spaces (`\u200B`), but not on a non-breaking space (`\u00A0`). - `'never'` disables text wrapping. |
| title.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| title.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| title.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| title.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| title.listeners | AgCaptionListeners |  | A map of event names to event listeners. |
| title.listeners.click | Listener |  | The listener to call when the caption is clicked. |
| title.listeners.doubleClick | Listener |  | The listener to call when the caption is double-clicked. |
| title.border | BorderOptions |  | Stroke options for the box border. |
| title.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| title.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| title.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| title.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| title.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| title.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| title.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| title.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dataSource | AgDataSourceOptions |  | Configuration for asynchronously loaded data. |
| dataSource.getData (required) | Function |  | Asynchronous callback to load data into the chart. |
| formatter | FunctionFormatter \| Partial |  | Global formatter configuration. |
| enableRtl | boolean |  | Set to `true` to render the chart in right-to-left mode. If not specified, the chart will detect the `dir` attribute on the container or its ancestors. |
| priceKey | string | 'price' | The key holding the price of each level in the data. |
| up | AgBarSeriesStyle |  | Styling for the bars showing the up volume of each level. |
| up.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| up.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| up.fillOpacity | Opacity |  | The opacity of the fill colour. |
| up.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| up.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| up.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| up.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| up.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| down | AgBarSeriesStyle |  | Styling for the bars showing the down volume of each level. |
| down.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| down.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| down.fillOpacity | Opacity |  | The opacity of the fill colour. |
| down.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| down.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| down.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| down.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| down.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| tickSize | number |  | The height of each price level, in price units.  If not set, the smallest gap between the prices in the data is used. |
| totalSegment | AgVolumeProfileTotalSegmentOptions |  | A fixed-width column showing each level's total volume, set between the price axis and the up and down bars. |
| totalSegment.fill | CssColor |  | The fill of each level's block. |
| totalSegment.width | PixelSize |  | The width of the segment in pixels. |
| totalSegment.minWidth | PixelSize | 60 | The minimum width of the segment in pixels, when `width` is not set. |
| totalSegment.gap | PixelSize | 2 | The space between the segment and the up and down bars, in pixels. |
| totalSegment.label | AgVolumeProfileTotalSegmentLabelOptions |  | The label showing each level's total volume. |
| totalSegment.label.formatter | Function |  | A function that converts a level's total volume into the text to display. Without one, the value is abbreviated with a suffix and shown to one decimal place, such as `1.2K` or `3.0M`. |
| totalSegment.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| totalSegment.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| totalSegment.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| totalSegment.label.lineHeight | PixelSize |  | The line height in pixels for text elements. Defaults to the natural line height of the font. |
| totalSegment.label.fontFamily | FontFamily |  | The font family for text elements. |
| totalSegment.label.fontStyle | FontStyle |  | The style to use for text elements. |
| totalSegment.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| totalSegment.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| selection | AgVolumeProfileSelectionOptions |  | Selection of price levels. |
| selection.clickMode | 'single' \| 'multiple' | 'single' | `'single'` replaces the selected level with each click; `'multiple'` toggles each clicked level, allowing any set of levels to be selected. |
| selection.enableDrag | boolean | false | Whether dragging a rectangle across the chart selects every price level it covers. |
| selection.selectedItem | AgSelectionStyleOptions | { strokeWidth: 2 } | Styling for the up and down segments of a selected level. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions | { opacity: 0.6 } | Styling for the up and down segments of the levels that are not selected, while any level is selected. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.selectedBand | AgVolumeProfileSelectedBandOptions |  | Styling for the background drawn behind each selected level. |
| selection.selectedBand.fill | CssColor |  | The fill of the band.  Default: the theme's neutral fill |
| selection.selectedBand.fillOpacity | Opacity | 0.2 | The opacity of the band's fill. |
| selection.selectedBand.stroke | CssColor |  | The colour of the band's outline. |
| selection.selectedBand.strokeWidth | PixelSize | 0 | The width of the band's outline, in pixels. |
| selection.selectedBand.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps in the band's outline. |
| selection.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |

#### Financial Chart Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| volumeProfile | AgVolumeProfileOptions |  | Configuration for a Volume Profile, showing the traded volume at each price level as horizontal bars against the price axis. |
| volumeProfile.data (required) | DatumDefault[] |  | The price levels to display, supplied separately from the chart's own `data`. |
| volumeProfile.upKey (required) | string |  | The key used to retrieve the up volume of each level from the data. |
| volumeProfile.downKey (required) | string |  | The key used to retrieve the down volume of each level from the data. |
| volumeProfile.priceKey | string | 'price' | The key used to retrieve the price of each level from the data. |
| volumeProfile.up | AgBarSeriesStyle |  | Styling for the bars showing the up volume of each level. |
| volumeProfile.up.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| volumeProfile.up.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| volumeProfile.up.fillOpacity | Opacity |  | The opacity of the fill colour. |
| volumeProfile.up.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| volumeProfile.up.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| volumeProfile.up.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| volumeProfile.up.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| volumeProfile.up.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| volumeProfile.down | AgBarSeriesStyle |  | Styling for the bars showing the down volume of each level. |
| volumeProfile.down.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| volumeProfile.down.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| volumeProfile.down.fillOpacity | Opacity |  | The opacity of the fill colour. |
| volumeProfile.down.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| volumeProfile.down.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| volumeProfile.down.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| volumeProfile.down.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| volumeProfile.down.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| volumeProfile.placement | 'left' \| 'right' | 'right' | The edge of the series area the bars extend from. |
| volumeProfile.widthRatio | Ratio | 0.5 | The length of the longest bar, as a ratio of the series area width. |
| volumeProfile.totalSegment | AgVolumeProfileTotalSegmentOptions |  | A fixed-width column showing each level's total volume, set between the price axis and the up and down bars. |
| volumeProfile.totalSegment.fill | CssColor |  | The fill of each level's block. |
| volumeProfile.totalSegment.width | PixelSize |  | The width of the segment in pixels. |
| volumeProfile.totalSegment.minWidth | PixelSize | 60 | The minimum width of the segment in pixels, when `width` is not set. |
| volumeProfile.totalSegment.gap | PixelSize | 2 | The space between the segment and the up and down bars, in pixels. |
| volumeProfile.totalSegment.label | AgVolumeProfileTotalSegmentLabelOptions |  | The label showing each level's total volume. |
| volumeProfile.totalSegment.label.formatter | Function |  | A function that converts a level's total volume into the text to display. Without one, the value is abbreviated with a suffix and shown to one decimal place, such as `1.2K` or `3.0M`. |
| volumeProfile.totalSegment.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| volumeProfile.totalSegment.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| volumeProfile.totalSegment.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| volumeProfile.totalSegment.label.lineHeight | PixelSize |  | The line height in pixels for text elements. Defaults to the natural line height of the font. |
| volumeProfile.totalSegment.label.fontFamily | FontFamily |  | The font family for text elements. |
| volumeProfile.totalSegment.label.fontStyle | FontStyle |  | The style to use for text elements. |
| volumeProfile.totalSegment.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| volumeProfile.totalSegment.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| volumeProfile.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| tickSize | number |  | The height of each Volume Profile price level, in price units. If not set, the smallest gap between the prices in `volumeProfile.data` is used. |