<Chart>

The root component for a chart. Panels can be configured either via the panels prop or as child <Panel> components — but not both.

Example

Panels as props

<Chart
  width={800}
  height={600}
  granularity="d1"
  data={dataPoints}
  theme="light"
  panels={[
    {
      id: 'price-panel',
      heightRatio: 3,
      layers: [{ type: 'price:candlesticks' }]
    },
    {
      id: 'volume-panel',
      heightRatio: 1,
      layers: [{ type: 'volume:bars' }]
    }
  ]}
/>

Panels as children

<Chart
  width={800}
  height={600}
  granularity="d1"
  data={dataPoints}
  theme="light"
>
  <Panel id="price-panel" heightRatio={3}>
    <Candlesticks />
  </Panel>
  <Panel id="volume-panel" heightRatio={1}>
    <VolumeBars />
  </Panel>
</Chart>

Properties

data

• Type: DataPoint[]
• Required

The array of OHLCV data points to render.

granularity

• Type: Granularity
• Optional

The time interval represented by each data point (for example 'd1', 'h1', or 'm5').

If omitted, the chart attempts to infer granularity from the spacing between input timestamps. For this to work reliably, the input data must meet the following criteria:

• the dataset contains at least two data points
• timestamps are ordered ascending
• the series uses a consistent interval

Pass granularity explicitly when rendering loading states, empty datasets, single-point datasets, or data with mixed / irregular spacing.

width

• Type: number | 'auto'

The width of the chart in pixels, or 'auto' to fill the available container width.

height

• Type: number | 'auto'

The height of the chart in pixels, or 'auto' to fill the available container height.

intervalWidthPx

• Type: number

The width of each data interval (candle column) in pixels. Controls the zoom level.

backgroundColor

• Type: string

Specify the chart background color using a CSS color string. Overrides the theme's chart.backgroundColor.

xAxis

• Type: false | XAxisConfig

Configuration for the x-axis. Set to false to hide the x-axis entirely. Pass {} to use the default config.

grid

• Type: false | GridConfig

Configuration for the chart grid lines. Set to false to hide all grid lines. Pass {} to use the default config.

crosshairs

• Type: false | CrosshairsConfig

Configuration for the crosshairs. Set to false to disable crosshairs entirely. Pass {} to use the default config.

theme

• Type: Theme | ThemeName

The chart theme. Pass a ThemeName string (e.g. 'light', 'dark') or a full Theme object.

scrollToLatestMargin

• Type: number

The number of pixels of right-side margin to leave when scrolling to the latest data.

onScroll

• Type: (newScrollOffset: number) => void

Callback fired when the user scrolls the chart. Receives the new scroll offset in pixels.

onZoom

• Type: (newIntervalWidthPx: number) => void

Callback fired when the user zooms the chart. Receives the new interval width in pixels.

panels

• Type: [PanelConfig, ...PanelConfig[]]

An array of panel config objects. Must contain at least one panel. Cannot be used together with children.

children

• Type: ReactNode

One or more <Panel> child components. Cannot be used together with panels.

TypeScript

interface ChartPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {
  width?: number | 'auto';
  height?: number | 'auto';
  intervalWidthPx?: number;
  granularity?: Granularity;
  backgroundColor?: string;
  xAxis?: false | XAxisConfig;
  grid?: false | GridConfig;
  crosshairs?: false | CrosshairsConfig;
  theme?: Theme | ThemeName;
  data: DataPoint[];
  scrollToLatestMargin?: number;
  onScroll?: (newScrollOffset: number) => void;
  onZoom?: (newIntervalWidthPx: number) => void;
}

interface PanelsAsPropChartProps extends ChartPropsBase {
  panels?: readonly [PanelConfig, ...PanelConfig[]];
  children?: never;
}

interface PanelsAsChildrenChartProps extends ChartPropsBase {
  panels?: never;
  children?: ReactNode;
}

type PanelsProps = PanelsAsPropChartProps | PanelsAsChildrenChartProps;