# SvChartPanes A price chart with indicator panes stacked under it, the way a trading terminal lays them out: one shared x axis labelled on the last pane only, one value-axis gutter width so the plots line up, and one crosshair and zoom window across all of them. ```svelte ``` Composition, not a new layout: every pane is a full [`SvChart`](https://svgrid.com/docs/help/ui-components/sv-grid-chart/) in a private sync group, so tooltips, keyboard navigation, the screen-reader table, export and the context menu all come for free. The main chart takes every `SvChart` prop. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `spec` | `ChartSpec` | required | The price chart: a candlestick / OHLC / line spec whose first series (or the one named by `source`) carries `ohlc` and `volumes` for the volume-based indicators. | | `indicators` | `ChartIndicatorSpec[]` | `[]` | The panes under the price, top to bottom. | | `axisWidth` | `number` | `56` | Width of the value-axis gutter every pane uses, so the plots line up. | | `syncGroup` | `string` | private | Share the crosshair and zoom with charts outside the stack. | | `zoom` | `ChartZoomWindow \| null` | `null` | The shared zoom window, bindable. | | everything else | `SvChartProps` | | Forwarded to the main chart: `zoomable`, `rangePresets`, `legend`, `toolbar`, `animate`, `contextMenu`, `drawable`, `onSelect`, `tooltipFormat`, ... | ### ChartIndicatorSpec | Field | Type | Description | | --- | --- | --- | | `kind` | `'volume' \| 'rsi' \| 'macd' \| 'stochastic' \| 'atr' \| 'obv'` | Which indicator the pane shows. | | `source` | `string` | The series (by label) it reads. Default: the first with `ohlc`, else the first. | | `params` | `{ period?, fast?, slow?, signal?, smooth? }` | Periods; each has the usual default (14 for RSI / ATR / stochastic %K, 12 / 26 / 9 for MACD, 3 for %D). | | `height` | `number` | Pane height in px. Default: a third of the price chart. | `indicatorPane(spec, ind)` is the function behind each pane, exported for a standalone `SvChart`: it returns a complete spec with the indicator's lines or bars and the reference lines it is read against (30 / 70 for RSI, 20 / 80 for the stochastic, zero for MACD). An RSI on its own, at whatever size the page gives it: ```svelte ``` The financial workbench demo stacks volume, RSI and MACD under a year of candles, with the drawing tools and the presets: > Live demo: Financial workbench - https://svgrid.com/demos/437-chart-financial-workbench/ The [financial charts page](https://svgrid.com/docs/help/charts/financial/) covers the indicators, the overlays that sit on the price, resampling, the last-price line and flags. ## See also - [SvGridChart](https://svgrid.com/docs/help/ui-components/sv-grid-chart/) - the chart each pane is made of, and every prop the main chart takes. - [Charts guide: financial charts](https://svgrid.com/docs/help/charts/financial/) - the indicators, overlays, resampling, last-price line and flags. - [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/) - a surface to frame a workbench on a dashboard. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-chart-panes/ . All docs: https://svgrid.com/llms.txt