Custom Layers

Use defineLayer to create a chart-scoped indicator with its own config parser, calculation, and Canvas drawing logic.

const definition = defineLayer<Config, CompleteConfig>({
  type: 'custom:my-indicator',
  displayName: 'MyIndicator',
  parseConfig,
  calculate,
  draw,
});

const MyIndicator = definition.Component;

Register the definition on each chart that uses its component:

<Chart data={data} layerDefinitions={[definition]}>
  <Panel>
    <MyIndicator />
  </Panel>
</Chart>

Definitions are local to a chart. A custom type must be a non-empty string and must not collide with a built-in type or another custom layer registered on the same chart.

defineLayer

defineLayer accepts:

Property	Type	Description
type	string	Stable layer type used in JSX metadata and config objects.
displayName	string	Optional React component display name.
parseConfig	(config, layersTheme, panelId) => completeConfig	Applies defaults and returns the runtime config.
calculate	(config, inputs, outputs, start, end) => void	Writes calculated values into output arrays.
draw	(context, axesContext, chartConfig, panelConfig, layerConfig, layout, viewportData, chartMetrics, panelMetrics, layerMetrics) => void	Draws the layer on Canvas.

calculate and draw are optional, although an indicator normally supplies both.

Config Types

Extend CustomLayerConfig for JSX/user config and CustomLayerConfigComplete for the parsed runtime config:

interface MyConfig extends CustomLayerConfig {
  type: 'custom:my-indicator';
  multiplier?: number;
}

interface MyConfigComplete extends CustomLayerConfigComplete {
  type: 'custom:my-indicator';
  multiplier: number;
}

The generated component accepts the config properties except type; the definition supplies that automatically.

Inputs and Outputs

parseConfig declares named inputs and outputs:

inputs: [
  { key: 'input', source: { type: 'price', field: 'close' } },
],
outputs: ['value'],

The calculation receives those inputs as typed-array-backed series and writes to the matching output arrays:

calculate: (_config, inputs, outputs, start, end) => {
  for (let index = start; index < end; index++) {
    outputs.value[index] = inputs.input.values[index];
  }
},

Scales

Layers with the same scale key share coordinates. Use price_auto for an overlay whose values are prices:

defaultScale: {
  key: 'price_auto',
  domain: 'price',
  range: { type: 'auto' },
},

Use a separate value scale for oscillators or other values that should be scaled independently, usually in their own panel.

Drawing Helpers

The package exports helpers for common line indicators:

• drawLineIndicator draws one or more output series and optional value markers.
• drawLineSeries is a lower-level helper for drawing a parsed line config.
• parseLineConfig, parseLegendConfig, and parseYAxisConfig turn partial configs into complete drawing configs.

See the Custom Indicator example for a complete implementation.