Charting - trdrs Engine API

Put a full chart on your own site: candles, drawings, indicators, several charts in a layout, bar replay and saved charts. Use this page when you’re building a front end and want the chart the trdrs trading platform uses rather than writing one. Quick Charts draws whatever data you hand it through two small interfaces, one for market data and one for saved charts. This page shows how to feed it from the trdrs market data routes. By the end you have the chart installed and know which route answers each of its data calls. Quick Charts is open source under the Apache-2.0 license, at github.com/Trdrsco/quick-charts, and its npm package is @trdrs/quickcharts. The repository’s README is the full reference: every code sample in it is type-checked against the package.

Install it

Install the package from npm:

npm install @trdrs/quickcharts

npm installs lightweight-charts, version 5, beside it. It draws the candles underneath, and as a peer dependency it’s your app’s to pin. Quick Charts ships ES modules with TypeScript declarations, so from a CommonJS host, load it with a dynamic import().

Draw a first chart

Import the stylesheet, create the chart in a container, and give it a datafeed. The stylesheet carries the chart’s layout as well as its look, so without it the chart has no size and draws nothing.

import '@trdrs/quickcharts/styles.css'
import { createChart, createUdfDatafeed } from '@trdrs/quickcharts'

const widget = createChart({
  container,
  datafeed: createUdfDatafeed({ baseUrl: 'https://your-backend.example/udf' }),
})
await widget.ready()

That’s a complete chart: candles and volume, indicators, drawings that save, bar replay, session shading and the legend. createUdfDatafeed reads a feed in the common UDF format. To feed it from the trdrs routes instead, implement ChartDatafeed yourself, as below.

Give the chart what it needs

The chart asks your app for two things and handles everything else, from drawings and indicators to panes, scales, the legend and replay.

Interface	What you supply	What the chart does
`ChartDatafeed`	`search`, `resolve`, `history` and `subscribeBars`, plus optional methods such as `serverTime` and `config`	Paging, gaps, session shading, indicators and drawing
`ChartSaveLoadAdapter`	Listing, reading, writing and deleting saved charts, layouts, drawings and templates	The save and load menus, autosave, naming and conflicts

The chart draws market data. An app that trades adds orders, accounts and fills beside the chart with ChartExtension, which can draw on the chart, add menu items and commands, and keep its state in the chart’s own saved layout. It’s removed completely when the chart closes.

Feed it from the market data routes

Each ChartDatafeed method maps onto one market data route. Implement the methods in a module that calls your own backend, and have your backend call trdrs with your Trading API key, or with your Connect app’s API key and the trader’s id. The key stays on your server.

Method	Route
`search`	`GET /api/market/symbols`. `hasMore` is exact, so the symbol search pages cleanly.
`resolve`	`GET /api/market/symbol-info`. It carries the symbol’s identity, trading hours and price `format`.
`history`	`GET /api/market/history`. `countBack` wins over `from`, and an empty count answer carries `noData: true`.
`subscribeBars`	`GET /api/market/stream`, or `GET /api/market/streams` for several charts on one connection.
`serverTime`	`GET /api/market/time`. Read it once to work out the clock difference.
`config`	`GET /api/market/config`. The timeframes and request limits.

The chart’s rules for bars are the engine’s rules, which is why the mapping is direct. Bars come oldest first, one per time, each stamped with the time it opened in epoch seconds. A count asks the engine to reach back across closed sessions until it finds the bars. noData appears only on a count answer. Open history and the stream together. The stream sends held history with cached: true, applies live bars, and supplies a repaired snapshot when history completes. Map a cached snapshot to backfill: true in the chart datafeed so it preserves bars already held. Backfill history and Stream live data cover the routes in depth.

Save charts and layouts

Saved charts, layouts, drawings and templates go through ChartSaveLoadAdapter. memorySaveLoadAdapter keeps them in memory, which is enough to try the chart out. When your saved charts live behind your own HTTP service, createRestSaveLoadAdapter implements the same interface over five routes per kind of saved item:

import { createRestSaveLoadAdapter } from '@trdrs/quickcharts/adapters/rest'

const saves = createRestSaveLoadAdapter({ baseUrl: 'https://your-backend.example/chart-storage', request: fetch })

The package includes dist/rest-openapi.json, an OpenAPI document for exactly those routes, so you can build and test your storage service against a schema. Store each saved item’s content exactly as you received it: it’s the chart’s own format.

Stay compatible

Quick Charts follows semantic versioning, and its own tests pin every exported name. New capabilities arrive as optional methods, so leaving one out means no limit. A deprecated export keeps working through the rest of its major version, with its replacement named in the types. Your integration keeps compiling as long as you stay within a major version.

Next steps

Build a front end

Add orders, positions and the risk lock around the chart.

Find symbols

Read the symbol details resolve hands the chart.

​Install it

​Draw a first chart

​Give the chart what it needs

​Feed it from the market data routes

​Save charts and layouts

​Stay compatible

​Next steps