OhlcBarsLayerConfig

Renders OHLC bars as an alternative to candlesticks.

Examples

JSX - Minimal configuration

<OhlcBars />

JSX - Full configuration

<OhlcBars
  id="ohlc-bars"
  inputs={[
    { key: 'open', source: { type: 'price', field: 'open' } },
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ]}
  series={{
    bars: {
      up: { width: 0.6, backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 1 },
      down: { width: 0.6, backgroundColor: '#ef4444', borderColor: '#ef4444', borderWidth: 1 },
      flat: { width: 0.6, backgroundColor: '#999', borderColor: '#999', borderWidth: 1 },
    },
  }}
  markers={{
    value: {
      mode: 'last-visible',
      up: { line: { color: '#10b981' }, label: { backgroundColor: '#10b981' } },
      down: { line: { color: '#ef4444' }, label: { backgroundColor: '#ef4444' } },
      flat: { line: { color: '#999' }, label: { backgroundColor: '#999' } },
    },
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object

{
  type: 'price:ohlc-bars',
  series: {
    bars: {
      up: { backgroundColor: '#10b981', borderColor: '#10b981' },
      down: { backgroundColor: '#ef4444', borderColor: '#ef4444' },
    },
  },
}

Properties

Base Props

BaseLayerConfig

series

• Type: { bars?: false | DirectionalBarConfig }

Controls the up, down, and flat OHLC bar styles.

markers

• Type: { value?: false | DirectionalValueMarkerConfig }

Controls the last-value marker.

onBarHover

• Type: (hit: LayerHit | null) => void

Layer-level hover callback for OHLC bar hit targets.

onBarClick

• Type: (hit: LayerHit) => void

Layer-level click callback for OHLC bar hit targets.

TypeScript

interface OhlcBarsLayerConfig extends BaseLayerConfig {
  type: 'price:ohlc-bars';
  series?: { bars?: false | DirectionalBarConfig };
  markers?: { value?: false | DirectionalValueMarkerConfig };
  onBarHover?: (hit: LayerHit | null) => void;
  onBarClick?: (hit: LayerHit) => void;
}