# charton

> WebGL2 financial charts in TypeScript: a headless engine with candles, heatmaps, order flow, indicators and drawing tools, plus an optional UI toolkit.

## Introduction

- [Getting started](/guide/getting-started.md): Install the packages, create a chart, load data, and the WebGL2 requirements and failure modes.
- [Core concepts](/guide/concepts.md): The rules behind everything else: unix-second times, panes, the main series and how bad values are handled.
- [Embedding the chart](/guide/embedding.md): Put the chart in a page: container size, lifecycle, resizing, several charts, keyboard focus, pixel ratio and memory.
- [Frameworks and plain pages](/guide/frameworks.md): Use the chart without a framework (bundler or script tag), import it in server-rendered apps, and the lifecycle contract every framework wrapper follows.
- [Component wrapper](/guide/component-wrapper.md): Mount the chart or the shell as components with @chart-on/react: props updated in place, a ref or hook for the instance, events as callbacks, and server rendering.
- [Template component wrapper](/guide/template-wrapper.md): Mount the chart or the shell as components with @chart-on/vue: props watched and applied in place, a template ref or composable for the instance, events as callbacks, and server rendering.
- [Compiled component wrapper](/guide/compiled-wrapper.md): Mount the chart or the shell with @chart-on/svelte: components and an action whose props apply in place, bindings or context helpers for the instance, events as callbacks, and server rendering.

## Chart

- [Series and data](/guide/series.md): Candles, lines, histograms, heatmaps and point markers: creating series, their data and options, and price formats.
- [Data sources](/guide/data-sources.md): Load bars through a data source: initial load, history paging, live bars, caching and the built-in adapters.
- [Exchange libraries](/guide/exchange-libraries.md): Feed the chart from a unified exchange library: history paging, timeframes, markets and live bars through createOhlcvDataSource.
- [Panes](/guide/panes.md): Stack panes that share the time axis, each with its own price scale, and size, move or collapse them.
- [Custom series](/guide/custom-series.md): Add your own chart type from a plain definition object, with alignment, autoscale and legend handled by the chart.
- [Indicators](/guide/indicators.md): Write indicators as pure TypeScript functions with declared inputs and outputs, and add the built-in ones.
- [Primitives](/guide/primitives.md): Plugins that draw on a pane or a series, such as shading, alert lines and markers: members, coordinates and redrawing.
- [Watermark](/guide/watermark.md): Large faint text or an image behind the series, such as the symbol and interval.
- [Session bands](/guide/session-bands.md): Show when other regional markets are open, as thin bands or shaded columns, with open and close countdowns.
- [View and price scale](/guide/view-and-scale.md): Move the view from code, limit where it can go, and control price scale modes, autoscale and ranges.
- [Replay and go to date](/guide/replay.md): Replay the main series bar by bar from a chosen time, let the user pick a bar, and scroll to a date with history paged in.
- [Volume profile](/guide/volume-profile.md): Horizontal histograms of traded volume by price, built from the main series and drawn on the GPU.
- [Depth lane](/guide/depth-lane.md): Show an order book beside the price axis: one bar per price level for bid and ask sizes your app supplies, with an optional ladder panel.
- [Seasonality](/guide/seasonality.md): Overlay each year's path through the same calendar window, with the average path and the range of the years.
- [Numeric axis charts](/guide/numeric-axis.md): Charts whose horizontal axis is a number instead of time: order-book depth curves, yield curves and option strikes.
- [Events](/guide/events.md): Every chart event, its payload and when it fires, plus how errors reach your code.
- [Interaction](/guide/interaction.md): Built-in pointer, wheel, touch and keyboard input, and how to turn each path off.
- [Sonification](/guide/sonification.md): Play the visible series as sound: pitch follows the value, with cues for markers, alerts and new sessions.
- [Feature flags](/guide/features.md): Turn built-in parts of the chart on or off with one features object.
- [Annotations](/guide/annotations.md): Markers, lines and highlights your application adds from code: executions, signals, orders, positions, alerts, time bands, price zones and text labels.
- [Reference lines](/guide/reference-lines.md): Optional horizontal lines on the main series, such as the previous close, each with an axis label.
- [Options](/guide/options.md): Every chart option with its default, set at creation or changed later with applyOptions.
- [Save and restore layouts](/guide/layouts.md): Save what the user arranged as plain JSON and load it back on the same or another chart.
- [Storage and autosave](/guide/storage.md): Keep layouts, per-symbol drawings and user settings in the browser or on your server: the storage adapter, autosave and the settings store.
- [Link charts](/guide/link-groups.md): Keep the crosshair, visible range, symbol, interval, timezone and drawings of several charts in step with a link group.

## Drawings

- [Drawing tools](/guide/drawings.md): The built-in drawing tools, drawing modes, editing drawings from code, undo and redo, and saving them.
- [Custom drawing tools](/guide/custom-drawing-tools.md): Write a drawing tool as a plain object, register it and activate it like a built-in one.
- [Plugins](/guide/plugins.md): Bundle drawing tools, indicators, custom series and primitives into a plugin that installs and uninstalls in one step.
- [Community plugins](/guide/community-plugins.md): Plugins made by the community, and how to get yours listed.

## Indicators

- [Technical-analysis helpers](/guide/technical-analysis.md): The @chart-on/ta helpers for writing indicators: averages, volatility, momentum and volume functions.

## UI shell

- [Shell, toolbar and rail](/guide/ui-shell.md): The optional UI shell: top toolbar, drawing-tool rail and bottom bar around a core chart.
- [Chart grid](/guide/chart-grid.md): One to eight linked chart shells in resizable cells, with layout presets, an active chart for the toolbar, and a saved grid layout.
- [Theming](/guide/theming.md): Colour the chart canvas and set its fonts with a theme object, or from CSS variables shared with the UI shell.
- [Theme builder](/theme-builder.md): Edit chart tokens and shell variables live in a dark and a light shell, check text contrast, and export a theme object and CSS.
- [Localization](/guide/localization.md): Show numbers, dates and the built-in text in the user's language: locale-aware formats through Intl, message overrides and a translate hook.
- [Keyboard and accessibility](/guide/accessibility.md): Keyboard map for the chart and the UI shell, screen-reader support and contrast checks.
- [Symbol search](/guide/symbol-search.md): The symbol search dialog: search box, filters, paging and keyboard control over any search source.
- [Indicator picker](/guide/indicator-picker.md): A searchable indicator catalogue with categories, favourites and recently added indicators, in the shell or on its own.
- [Form and picker dialogs](/guide/dialogs.md): Schema-driven settings forms and searchable pickers from @chart-on/ui, with custom input kinds, live preview and keyboard control.

## More

- [Examples](/guide/examples.md): Runnable examples, each a small file whose live chart and source code appear together.
- [Performance and limits](/guide/performance.md): Why the chart stays smooth, tips for live data, and the limits to know about.
- [Testing your integration](/guide/testing.md): Unit-test the code around the chart under Node: a fake browser environment, sample bars, frame control and scene snapshots.
- [Errors and warnings](/guide/errors.md): Every error code and development warning with its cause and fix.
- [Upgrading](/upgrading/index.md): Deprecated APIs with their replacements, and what changed in each release.
- [Versioning](/guide/versioning.md): What a charton version number promises, why every @chart-on package shares one version, which ranges to depend on, and where to read what changed.
- [Security and strict pages](/guide/security.md): Content security policy, Trusted Types and offline use: what the chart needs and what it never does.
- [Sponsor](/sponsor.md): Fund charton with a direct stablecoin payment, and get listed on the landing page.

## Optional

- [Full text](/llms-full.txt): every page above in one file, in this order