VolumeBarsLayerConfig

Renders trading volume as directional bars, colored based on whether the close was up, down, or flat relative to the previous close.

Examples

JSX - Minimal configuration

<VolumeBars />

JSX - Full configuration

<VolumeBars
  id="volume-bars"
  inputs={[{ key: 'volume', source: { type: 'volume', field: 'volume' } }]}
  outputs={['volume']}
  calculate={true}
  includeInAutoScale={true}
  series={{
    bars: {
      up: { backgroundColor: '#10b98177', borderColor: '#10b98177', borderWidth: 0 },
      down: { backgroundColor: '#ef444477', borderColor: '#ef444477', borderWidth: 0 },
      flat: { backgroundColor: '#ccc', borderColor: '#ccc', borderWidth: 1 },
    },
  }}
  markers={{
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  }}
  legend={{
    label: 'Volume',
    fields: [{ output: 'volume', label: '', color: '#1a1a1a' }],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

{
  id: 'volume-bars',
  type: 'volume:bars',
  inputs: [{ key: 'volume', source: { type: 'volume', field: 'volume' } }],
  outputs: ['volume'],
  calculate: true,
  includeInAutoScale: true,
  series: {
    bars: {
      up: { backgroundColor: '#10b98177', borderColor: '#10b98177', borderWidth: 0 },
      down: { backgroundColor: '#ef444477', borderColor: '#ef444477', borderWidth: 0 },
      flat: { backgroundColor: '#ccc', borderColor: '#ccc', borderWidth: 1 },
    },
  },
  markers: {
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  },
  legend: {
    label: 'Volume',
    fields: [{ output: 'volume', label: '', color: '#1a1a1a' }],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'volume:bars'

series

• Type: { bars?: false | DirectionalBarConfig }

Visual series configuration for volume bars.

markers

• Type: { value?: false | ValueMarkerConfig }

Value marker configuration for volume bars.

Defaults

Property	Default
id	'volume-bars-layer'
inputs	volume field
outputs	['volume']
scale	{ key: 'volume_positive', domain: 'volume', range: { type: 'positive' } }
valueLabelFormatter	(value) => value.toFixed(0)

TypeScript

interface VolumeBarsLayerConfig extends BaseLayerConfig {
  type: 'volume:bars';
  series?: { bars?: false | DirectionalBarConfig };
  markers?: { value?: false | ValueMarkerConfig };
}