Chart Layouts

Layouts save and restore chart configuration: indicators, drawings, styles, pane options. Manage via the layout dropdown in the bottom bar. Default layout cannot be modified or deleted.

Configuration

new ChartSpire({
  layoutsEnabled: true,
  layoutLimit: 20,
  layoutUseExternalStorage: false,
  // ...
})

Option	Type	Default	Description
layoutsEnabled	boolean	true	Show layout selector in bottom bar
layoutLimit	number	20	Max number of saved layouts
layoutUseExternalStorage	boolean	false	Use callbacks instead of localStorage

External Storage

External storage persists layout data to your backend instead of the browser's localStorage. Set callbacks before creating the chart:

import ChartSpire, { setGetStoreCallback, setUpdateStoreCallback, setDeleteStoreCallback } from '@chartspire/chartspire'

setGetStoreCallback(async () => {
  const res = await fetch('/api/layouts')
  return res.ok ? await res.json() : null
})

setUpdateStoreCallback(async (layoutName, layoutData) => {
  await fetch('/api/layouts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ [layoutName]: layoutData })
  })
})

setDeleteStoreCallback(async (layoutName) => {
  await fetch('/api/layouts/delete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ layoutName })
  })
})

new ChartSpire({
  layoutUseExternalStorage: true,
  // ...
})

• Get: Returns Layouts \| null = Record<string, LayoutData>
• Update: Receives (layoutName: string, layoutData: LayoutData)
• Delete: Receives (layoutName: string)

Data Structure

type Layouts = Record<string, LayoutData>

interface LayoutData {
  indicatorStore: IndicatorStore
  stylesStore: Styles
  overlayStore: OverlayStore[]
  paneOptionsStore: PaneOptionsStore
}

interface IndicatorStore {
  indicators: indicatorDefinition[]
}

interface OverlayStore {
  overlay: Partial<Overlay>
  symbolInfo: Symbol
}

interface PaneOptionsStore {
  paneOptions: Record<string, any>
}

Each layout stores: indicators (with params and styles), chart styles (candle, grid, scales), drawings/overlays, pane settings (axis position, height, state).

Limits

• localStorage: ~5MB per domain (when not using external storage)
• Max layouts: layoutLimit (default 20)