How it works

Three diagrams of the library from the inside, with the names used in the code, so you can find each piece in the source. Point at a step, or tab to it, to see the boxes it is about. You don’t need any of this to use the chart; it helps when you write a feed, a plugin or a change to the library itself.

From a feed to the screen

A bar takes the same path whether it comes from an exchange or from your own code, and one store holds it. Everything drawn is worked out from that store and the view.

1. 1 Bars come in. A DataFeed is asked for history (getBars) and subscribed to for live bars; a DataAdapter, such as BinanceAdapter, pushes everything as events. StreamManager turns a feed into an adapter, resamples to the chart’s interval and builds bars from ticks.
2. 2 The chart takes them. chart.connect() listens for the snapshot, barUpdate, barClose and barCorrection events. Your own code writes the same bars with setData, appendBar, updateLastBar or updateBar, and needs no feed at all.
3. 3 One store. Every write goes through SeriesStore. It keeps the bars shown, the whole series while out-of-hours bars are hidden, and the live series set aside during a replay, and tells the chart what each write did.
4. 4 What is drawn is worked out. DisplaySeries builds what the chart type draws (Heikin Ashi, Renko, Kagi…), cached until the bars change. IndicatorEngine recomputes only from the first bar that changed. PriceFit fits the price scale and PaneLayout sizes the panes.
5. 5 The view. Viewport holds which bars are visible, how wide each is and how far it is scrolled. Dragging, the wheel and the keys scroll and zoom it through InteractionManager.
6. 6 A frame. RenderEngine marks the layers that changed and draws them in the next animation frame; live ticks are gathered first, so a burst is one frame. The scene canvas holds the grid, series, indicators, drawings and axes; the top canvas holds the crosshair and legend, so moving the pointer redraws only that one. With renderer: 'webgl', a GPU canvas draws the candles and volume underneath.
7. 7 Back to your app. The chart reports through events: crosshairMove, dataUpdate, visibleRangeChange, symbolChange and the rest, listed in the API reference.

Write a source of your own in Realtime & Replay; the frame costs are in Performance.

What ChartWidget is made of

ChartWidget is the whole trading screen around one Chart. Its parts are small classes that see only what they are handed.

1. 1 One public class. ChartWidget keeps the public methods and the setup. Its constructor is a list of steps in the order the parts need each other: readOptions, buildRoot, buildToolbar, buildBody, buildChart … finishSetup.
2. 2 Areas, each through a host. Replay, trading, alerts, compares, watchlists, the legend, menus, commands, layouts, the dock, Chart Settings, drawing editing and intervals are classes of their own. Each is given a host interface that lists exactly what it uses from the widget, and a public method on ChartWidget hands on to its area.
3. 3 One chart. buildChart makes the one Chart the widget wraps. Every area reaches it through its host; none owns a chart of its own. The widget listens to the chart’s events to keep the toolbar and legend in step.
4. 4 Signals. State that several parts show is a signal: the theme (look), which toolbar buttons are open (openRoles) and the Chart Settings. One effect updates whatever shows it, so a writer never calls each update by hand.
5. 5 Dialogs when first opened. The larger dialogs, the indicators dialog, the command palette and the symbol search are in DIALOGS and load their code the first time they open. They open in overlayHost, which moves inside the widget in fullscreen.

A bar replay

A replay plays the past bar by bar on the same chart, with the live bars kept aside until it ends.

1. 1 Pick a bar. The replay button opens the replay bar; clicking a bar, or calling replayFrom(), picks where the replay starts.
2. 2 Start. chart.replayStart() has SeriesStore set the live bars aside, then loads the bars to play into ReplayManager, which waits paused at the start.
3. 3 Step. Play, pause, step forward or back and the speed go to ReplayManager. Each step sends a bar event; the chart shows the bars up to it (showReplayed, or appendReplayed going forward).
4. 4 What follows the replay. Indicators recompute from the bar that changed, the price line shows the replayed close, and a paper account trades at the replayed prices. Orders and alerts on a live account stay live.
5. 5 End. At the last bar the replay pauses. Leaving it calls replayStop(): SeriesStore puts the live series back and the chart is live again.

The options and events are in Realtime & Replay.