AreaLayerConfig

Renders a filled area series from one input value, usually the close price.

Examples

JSX - Minimal configuration

<Area />

JSX - Full configuration

<Area
  id="area-layer"
  inputs={[{ key: 'input', source: { type: 'price', field: 'close' } }]}
  outputs={['price']}
  calculate={true}
  includeInAutoScale={true}
  series={{
    value: {
      line: { width: 2, color: 'dodgerblue', style: 'solid', endDotSize: 5 },
      fill: { topColor: '#1e90ff44', bottomColor: '#1e90ff00' },
    },
  }}
  markers={{
    value: {
      mode: 'last-visible',
      line: { color: 'dodgerblue', width: 1, style: 'dashed' },
      label: { color: 'white', backgroundColor: 'dodgerblue' },
    },
  }}
  legend={{
    label: 'Close price',
    fields: [{ output: 'price', label: '', color: 'dodgerblue' }],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object

{
  type: 'price:area',
  inputs: [{ key: 'input', source: { type: 'price', field: 'close' } }],
  series: {
    value: {
      line: { color: 'dodgerblue', width: 2 },
      fill: { topColor: '#1e90ff44', bottomColor: '#1e90ff00' },
    },
  },
}

Properties

Base Props

BaseLayerConfig

series

• Type: { value?: { line?: false | LineConfig; fill?: false | AreaFillConfig } }

Controls the top line and vertical fill. Set line or fill to false to hide that part of the area series.

markers

• Type: { value?: false | ValueMarkerConfig }

TypeScript

interface AreaFillConfig {
  topColor?: string;
  bottomColor?: string;
}

interface AreaLayerConfig extends BaseLayerConfig {
  type: 'price:area';
  series?: {
    value?: {
      line?: false | LineConfig;
      fill?: false | AreaFillConfig;
    };
  };
  markers?: { value?: false | ValueMarkerConfig };
}