PanelConfig

A chart is composed of one or more panels, and each panel contains one or more layers.

In most cases, a chart includes a main panel, which is the largest panel and typically displays the price layer along with optional overlays such as moving averages. Additional panels can be added to show other indicators on their own scales — for example, momentum oscillators or volume indicators.

Example

{
  id: 'price-panel',
  heightRatio: 3,
  paddingTop: 16,
  paddingBottom: 16,
  borderTop: { color: '#e5e5e5', width: 1 },
  layers: [
    { type: 'price:candlesticks' }
  ],
  controls: {
    goToLatestButton: true
  }
}

Properties

id

• Type: string

An optional identifier for the panel. Panel IDs must be unique when provided.

heightRatio

• Type: number
• Default: 1

The proportional height of the panel relative to other panels. For example, if a chart has two panels where one has a heightRatio of 3 and the other has a heightRatio of 1, their heights will be 75% and 25% of the total chart height respectively.

paddingTop

• Type: number
• Default: 16

Top padding inside the panel in pixels.

paddingBottom

• Type: number
• Default: 16

Bottom padding inside the panel in pixels.

borderTop

• Type: LineConfig
• Default: Determined by theme

Configuration for the border drawn along the top edge of the panel.

layers

• Type: LayerConfig[]

An array of layer config objects defining the data layers rendered within this panel.

controls

• Type: PanelControlsConfig

Configuration for interactive controls rendered within the panel.

TypeScript

interface PanelConfig {
  id?: string;
  heightRatio?: number;
  paddingTop?: number;
  paddingBottom?: number;
  borderTop?: LineConfig;
  layers: LayerConfig[];
  controls?: PanelControlsConfig;
}