Moving to 2.0

2.0 changes how the chart and the widget look by default, removes the names 1.x had deprecated, and changes four behaviours. Data, saved layouts, indicators, drawings, trading and themes carry over as they are. This page lists each change and what to do about it.

Install

2.0 is the current release: every package is 2.0.0 under npm's latest tag. 1.x stays where it was, as @tradecanvas/chart@1, for a page that is not ready to move.

npm install @tradecanvas/chart

# with a framework component, its package too
npm install @tradecanvas/react
npm install @tradecanvas/vue
npm install @tradecanvas/svelte

The default look

The chart and the widget open with more room around what they draw. One option keeps the look of 1.x:

// The widget as it was in 1.x
new ChartWidget(host, { ui: { density: 'classic' } })
widget.setUI({ density: 'classic' })

// A chart of your own as it was in 1.x
new Chart(host, { density: 'compact' })

ui: { density: 'compact' } (smaller controls) is unchanged.

What is different by default:

What	1.x	2.0
Room past the newest bar	5 slots	8 slots
Free above and below the prices	9% of the height	11.5% of the height
The bars of a bare `Chart`	Classic	Golden, the body 62% of its slot, as the widget already drew them
The legend, from the plot's corner	8 px in	12 px in
The figures of a bare `Chart` (axes, tags, legend)	A monospaced face	The system's sans face, as the widget and the finance charts draw them; `font: { family: MONO_FONT_FAMILY }` keeps the old one
The widget's spacing, `--tcw-space-1` … `-7`	2 · 3 · 5 · 8 · 13 · 21 · 34 px	2 · 4 · 6 · 8 · 12 · 20 · 32 px
Print's button	33 px	34 px
Padding beside a button's label	8 px	12 px

Every size and gap in the widget is now an even number of pixels, and hairlines are one device pixel wide at a screen scale of 125% and 150%.

Check these in your own code:

CSS that overrides --tcw-space-*, or that assumes a 33 px control.
Code that passes rightMargin. It still wins when set.
The React, Vue and Svelte components no longer set rightMargin: 5 themselves. To keep it, pass density: 'compact' or rightMargin: 5 in options.
Code that reads PRICE_SCALE_MARGIN from @tradecanvas/core or DEFAULT_CHART_OPTIONS.rightMargin: both changed value.

// React; the Vue and Svelte components take the same options
<TradeCanvas options={{ density: 'compact' }} />
<TradeCanvas options={{ rightMargin: 5 }} />

What each density sets, in full: Styling → Density.

Names removed

Each of these was deprecated in 1.x and is gone in 2.0.

Removed	Use instead
`chart.setTimezone(tz)`	`chart.setTimeZone(tz)`
`chart.getTimezone()`	`chart.getTimeZone()`
`chart.getEffectiveTimezone()`	`chart.getEffectiveTimeZone()`
`chart.getExchangeTimezone()`	`chart.getExchangeTimeZone()`
`chart.setTimezoneOffset(minutes)`	`chart.setTimeZone(minutes)`: minutes east of UTC, or `null` for the browser's zone
`EXCHANGE_TIMEZONE`	`EXCHANGE_TIME_ZONE`
`DEFAULT_FONT_FAMILY`	`MONO_FONT_FAMILY`: the monospaced face, which is no longer the default one
`SymbolInfo.timezone`	`SymbolInfo.timeZone`
`TimeFormatContext.kind === 'date'` in a `timeFormatter`	The axis gives `'year'`, `'month'` or `'day'`. It has not given `'date'` since 1.x, and the type no longer has it.
`SessionBreaks.setLocale()` and `SessionBreaks.renderLabels()` (`@tradecanvas/core`)	Remove the calls: both did nothing.
The widget string key `replay.barsPerSecond`	Remove it from a `messages` override: it was unused. The replay's speed text is `replay.rate`.

A symbol's `timezone` is no longer read

The old field is not read at all. A symbol that gives only timezone, whether it comes from your symbols, resolveSymbol, a feed or an adapter, now has no zone of its own:

setTimeZone('exchange') and the dates of daily bars fall back to the market's zone, or to UTC;
its own sessions are not shaded (the market's hours are, when a market is set);
its status reads as a market that trades around the clock, and the symbol's panel shows no time zone.

A timezone you still pass is carried along untouched in getSymbolInfo(), and nothing reads it.

// 1.x
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York' })

// 2.0
chart.setSymbolInfo({ symbol: 'AAPL', timeZone: 'America/New_York' })

Names that did not change

The names are close, so take care with a search and replace. The widget's setting is still spelled timezone:

widget.setSettings({ timezone: 'exchange' })
widget.getSettings().timezone       // 'exchange'

The widget string keys settings.timezone and menu.chart.timezone keep their names too.

Finding them

Search your code for Timezone( and EXCHANGE_TIMEZONE, and for timezone: inside symbol objects. TypeScript reports each removed name.

Behaviour that changed

These changed with no name changing.

Price-axis labels at a pane's edge. A label that the top or bottom edge of its pane would cut is left out. Its grid line stays.
The price pane among many panes. However many indicator panes are open, the price pane keeps at least 38.2% of the chart's height, and the open panes share the rest in proportion to their sizes. A pane's size as set is kept, and shows again on a taller chart. Before, panes kept their heights and could leave the price pane none.
Line widths between whole pixels. A line of such a width takes the whole device pixels below it: 1.5 px is one device pixel at 100%, where it was two.
setBarLayout() and setDensity(). A bar layout set with chart.setBarLayout() while the chart runs is kept by a later setDensity().

Not changed

Data: DataAdapter, DataFeed, setData, appendBar and updateLastBar.
Saved layouts and settings from 1.x load as before.
Indicators, drawings, trading, themes and style keys keep their names.