Skip to content

BaseLayerConfig ​

All layer config types extend BaseLayerConfig. These properties are available on every layer.

Properties ​

id ​

  • Type: string

An optional identifier for the layer. Layer IDs must be unique when provided.

type ​

The type of layer to render (e.g. 'price:candlesticks', 'rsi').

scale ​

Override the layer's scale configuration.

inputs ​

  • Type: InputSource[]
  • Default: [{ key: 'input', source: { type: 'price', field: 'close' } }]

An array of input source definitions that specify where the layer reads its data from.

outputs ​

  • Type: string[]
  • Default: ['value']

An array of output keys produced by this layer. Used to reference this layer's values from other layers or legend fields.

valueGridLines ​

  • Type: number[]

An array of fixed values at which horizontal grid lines are drawn, independent of the axis tick positions. Useful for reference lines such as Stochastic overbought/oversold levels (e.g. [20, 80]).

valueToY ​

Override the function used to map data values to y-axis pixel positions.

legend ​

Configuration for the layer's legend. Set to false to hide the legend.

yAxis ​

Configuration for the layer's y-axis. Set to false to hide the y-axis.

valueLabelFormatter ​

  • Type: (value: number) => string
  • Default: (value) => value.toFixed(2)

A formatter function for values displayed on the y-axis.

period ​

  • Type: number

Generic indicator period field. Some indicators provide more specific names and treat period as a legacy alias:

  • MACD: prefer fastPeriod (legacy alias: period)
  • Stochastic: prefer kPeriod (legacy alias: period)

lookback ​

  • Type: number | (period: number) => number
  • Default: (period) => period

The number of additional data points required before the first output value can be calculated. Can be a fixed number or a function of period.

calculate ​

  • Type: boolean
  • Default: true

Whether the layer should calculate its indicator values from the input data. Set to false if providing pre-calculated values.

includeInAutoScale ​

  • Type: boolean
  • Default: true

Whether this layer's values are included when automatically determining the y-axis scale range.


LayerScale ​

Defines the scale domain and range for a layer.

ts
type LayerScale = {
  key: string;
  domain: ScaleDomain;
  range: ScaleRange;
};

key ​

  • Type: string

A unique key identifying this scale. Layers sharing the same key share the same scale.

domain ​

The type of data this scale represents.

range ​

The visible range behaviour of the scale.


ScaleDomain ​

ts
type ScaleDomain = 'price' | 'percent' | 'volume' | 'value';
ValueDescription
'price'Raw price data.
'percent'Percentage-based values.
'volume'Trading volume data.
'value'Generic numeric values.

ScaleRange ​

Defines how the y-axis range is determined.

ts
type ScaleRange =
  | { type: 'auto' }
  | { type: 'positive' }
  | { type: 'bounded'; min: number; max: number }
  | { type: 'zero-centered' };
ValueDescription
{ type: 'auto' }Range is derived from the min and max of the visible data.
{ type: 'positive' }Range is [0, max], anchored at zero.
{ type: 'bounded'; min: number; max: number }Range is fixed between min and max (e.g. { type: 'bounded', min: 0, max: 100 } for Stochastic).
{ type: 'zero-centered' }Range is symmetric around zero, expanding to fit the largest absolute value.

InputSource ​

Defines where a layer reads its input data from. An InputSource is one of two variants.

PriceInputSource ​

Reads a standard OHLC price field from the chart's data.

ts
type PriceInputSource = {
  key: string;
  source: { type: 'price'; field: PriceField };
};

PriceField ​

ts
type PriceField = 'open' | 'high' | 'low' | 'close';

VolumeInputSource ​

Reads the volume field from the chart's data.

ts
type VolumeInputSource = {
  key: string;
  source: { type: 'volume'; field: VolumeField };
};

VolumeField ​

ts
type VolumeField = 'volume';

ValueToYFunction ​

A function that maps a data value to a y-axis pixel position.

ts
type ValueToYFunction = (
  min: number,
  max: number,
  top: number,
  height: number
) => (value: number) => number;

The outer function receives the current scale bounds and panel dimensions and returns an inner function that converts individual data values to pixel positions.


TypeScript ​

ts
interface BaseLayerConfig {
  id?: string;
  type: string;
  scale?: LayerScale;
  inputs?: InputSource[];
  outputs?: string[];
  valueGridLines?: number[];
  valueToY?: ValueToYFunction;
  legend?: false | LegendConfig;
  yAxis?: false | YAxisConfig;
  valueLabelFormatter?: (value: number) => string;
  period?: number; // generic period or legacy alias on some indicators
  lookback?: number | ((period: number) => number);
  calculate?: boolean;
  includeInAutoScale?: boolean;
}

type LayerScale = {
  key: string;
  domain: ScaleDomain;
  range: ScaleRange;
};

type ScaleDomain = 'price' | 'percent' | 'volume' | 'value';

type ScaleRange =
  | { type: 'auto' }
  | { type: 'positive' }
  | { type: 'bounded'; min: number; max: number }
  | { type: 'zero-centered' };

type PriceField = 'open' | 'high' | 'low' | 'close';
type VolumeField = 'volume';
type PriceInputSource    = { key: string; source: { type: 'price';   field: PriceField;          }; };
type VolumeInputSource   = { key: string; source: { type: 'volume';  field: VolumeField;         }; };

type InputSource = PriceInputSource | VolumeInputSource;

type ValueToYFunction = (min: number, max: number, top: number, height: number) => (value: number) => number;

React Candlesticks is available on npm and GitHub under the MIT License.