Configuration

Here's where the fun starts. This page will go through all customizations and configurations you can do to the chart (without touching the source ofc) to tailor it to your site.

Starting off with data:

Data

These options configure how the chart's data engine operates, by telling the initial load (from time a to time b), symbol, and where to get the data. You'll have to give initialLoad some thought - tell the engine to get too little data, it'll have to request more which won't look nice, provide too much and you're fetching data the user might never see.

Prop	Type	Default	Description
dataAdapterrequired	IDataAdapter	-	The data source that feeds data (like bars, ticks, and metadata) into the chart
symbolrequired	`string`	-	The symbol to display - ex "BTC/USD" or "AAPL" etc
initialLoadrequired	`{ start: string \| number, end: string \| number }`	-	The time range that gets fetched when the chart first mounts.
timePrecision	`"s" \| "ms" \| "us" \| "ns"`	ms	The precision the chart should use when rendering time - round time to seconds/milliseconds/etc

View

These options tell the chart where to place the playhead (horizon) - which could be right now or it could be a billion years ago. Unlike other charting libraries where it renders all the data you give the chart, here you just give all the data you want, set the horizon and the chart will only display the data up to the horizon. If you provide supplemental data, the chart will build the open bar for you (using more granular data). Nice right? You won't have to worry about higher timeframes leaking future data or anything!

The timeframe parameter tells the chart what timeframe it should use when it mounts

Prop	Type	Default	Description
horizonrequired	`bigint \| number \| string`	-	Unix/ISO timestamp - the in-game time, basically. Everything past this point doesn't show up on the chart
timeframe	`string`	1m	The timeframe to show when the chart mounts. Ex. "1m" or "1h"

UI

You want a clean chart that can be used for demonstrations, instead of a fully interactive chart? Just hide the toolbars!

You can also add your own buttons and elements in the top toolbar if you'd like

Prop	Type	Default	Description
hideToolbar	`boolean`	false	Hides the top toolbar.
hideBottomToolbar	`boolean`	false	Hides the top toolbar.
hideDrawingToolbar	`boolean`	false	Hides the drawing toolbar.
toolbar	`(chart: ChristTradeChart) => React.ReactNode[]`	(chart) => []	Add custom elements to the top toolbar

You can also hide other stuff, like the price/time scales, etc:

Prop	Type	Default	Description
hidePriceScale	`boolean`	false	Hides the price scale
hideTimeScale	`boolean`	false	Hides the time scale
hideStatusBar	`boolean`	false	Hides the status bar (the ohlc values up top on the chart)
hideLegend	`boolean`	false	Hides all pane legends (chart & indicators)

Features

features.contextMenu - show/hide the right-click menu. Default: true

features.plugins - true/false to toggle the entire plugin system, or pass an object to control individual parts:

features: {
    contextMenu: true,
    plugins: {
        indicators: true,
        charts: true,
        extensions: true,
        drawings: true,
    }
}

Trading / Account

These options control the trading part of the chart, as it comes with a built-in, pretty good, trading system and L3 matching engine. You probably won't need to touch these unless you're building a trading terminal, like an exchange. For a backtesting platform the built in system is perfect.

Prop	Type	Default	Description
executionAdapter	IExecutionAdapter	-	Create your own execution adapter with your own matching engine and trading logic
account	AccountOptions	-	Create a trading account

State

Restore is powerful - if you save the chart state with chart.serialize(), you can feed that back in to the chart and it'll restore the state. Every part of ChartSaveState is optional - so if you only want to restore drawings or the view, that's entirely possible.

Prop	Type	Default	Description
restore	`ChartSaveState`	-	Load saved chart state. Save chart state with chart.serialize()

Configuration#

Data#

View#

UI#

Features#

Trading / Account#