Skip to content

LegendConfig ​

Example ​

ts
{
  color: '#1a1a1a',
  fontFamily: 'Arial',
  fontSize: 12,
  left: 16,
  backgroundColor: '#ffffff22',
  borderWidth: 1,
  borderColor: '#1a1a1a',
  hPadding: 8,
  vPadding: 6,
  borderRadius: 4,
  label: 'Stochastic 14',
  fields: [
    { output: 'k', color: 'black' },
    { output: 'd', color: 'red' },
  ]
}

Properties ​

Base Props ​

LabelConfig

left ​

  • Type: number
  • Default: 16

Offset from the left edge of the panel in pixels.

backgroundColor ​

  • Type: string
  • Default: '#ffffff22'

Specify the legend background color using a CSS color string.

borderWidth ​

  • Type: number
  • Default: 1

Width of the border in pixels. Set to 0 for no border.

borderColor ​

  • Type: string
  • Default: '#1a1a1a'

Specify the legend border color using a CSS color string.

hPadding ​

  • Type: number
  • Default: 8

Horizontal padding inside the legend box in pixels.

vPadding ​

  • Type: number
  • Default: 6

Vertical padding inside the legend box in pixels.

borderRadius ​

  • Type: number
  • Default: 4

Border radius of the legend box in pixels.

label ​

  • Type: string
  • Default: ''

A text label displayed in the legend.

fields ​

An array of field configurations that define which outputs are displayed in the legend and how they are styled.

TypeScript ​

ts
interface LegendConfig extends LabelConfig {
  left?: number;
  backgroundColor?: string;
  borderWidth?: number;
  borderColor?: string;
  hPadding?: number;
  vPadding?: number;
  borderRadius?: number;
  label?: string;
  fields?: LegendFieldConfig[];
}

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