Chart with sub-chart

Compound layout — main chart on top, smaller companion chart below sharing the same X domain and synced crosshair. Wraps ChartSyncProvider + two ChartRoot instances.

Primitive: ChartWithSubChart· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartWithSubChart, ChartLine, ChartBar } from '@ramtt/charts'

<ChartWithSubChart mainHeight={250} subHeight={60} data={price}>
  <ChartWithSubChart.Main>
    <ChartLine />
  </ChartWithSubChart.Main>
  <ChartWithSubChart.Sub data={volume}>
    <ChartBar />
  </ChartWithSubChart.Sub>
</ChartWithSubChart>

Props

PropTypeDefaultDescription
data*readonly number[]—Primary series (shared X domain)
mainHeight*number—Main chart height in px
subHeight*number—Sub chart height in px
gapnumber4Gap between main and sub in px
zoomMode'brush' | 'navigator' | 'none''brush'Synced zoom interaction mode
children*ReactNode—ChartWithSubChart.Main + .Sub