Chart Layouts

Layouts save and restore chart configuration. Manage them from the layout dropdown in the bottom bar (create, rename, delete, switch).

Not the same as multichart grid presets.

Saved: indicators, drawings, chart styles (including chart type), pane options.
Not saved: symbol, interval, UI theme, multichart grid.

Custom layouts auto-save on change. The default layout cannot be renamed, deleted, or persisted.

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 custom layouts (default is always available)
layoutUseExternalStorage	boolean	false	Use callbacks instead of localStorage

localStorage quota is ~5MB per domain when not using external storage.

External Storage

Persist layouts to your backend instead of localStorage. Set callbacks before creating the chart:

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

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 all layouts (Layouts | null), or null if none
• Update: Upsert one layout by name
• Delete: Remove one layout by name

Treat LayoutData as an opaque JSON blob — store and return it unchanged. Type callbacks with Layouts and LayoutData from @chartspire/ui.

import type { Layouts, LayoutData } from '@chartspire/ui'

// Get returns a map: layout name → LayoutData
{
  "Layout1": { /* LayoutData */ },
  "Layout2": { /* LayoutData */ }
}

Each LayoutData holds indicators, styles (including chart type), drawings, and pane options. Drawings are keyed by symbol and restored for the chart’s current symbol.

Related

• Indicators — indicator state
• Overlays — drawings
• Chart Types — candle type in styles
• Multichart — grid layouts (separate feature)
• Widget API — constructor options