Widget configuration
Options you pass when creating the widget, symbols and intervals, and chart types, panes and scales.
You pass options to the widget when you create it. The container, datafeed, symbol, interval and runtime file location decide what the chart shows first. Keep your app's credentials out of these options.
Common options
| Option | What it does | Tips |
|---|---|---|
container | The element, or its ID, to draw the chart in | Make sure it exists before you create the widget |
library_path | Folder that holds the runtime files | Include the trailing slash |
datafeed | Your datafeed callbacks | Always call either the success or the error callback |
symbol | The first symbol to show | Your datafeed must be able to resolve it |
interval | The first resolution to show | Pick a resolution you support |
autosize | Fill the container | Give the parent a height |
theme | light or dark | You can switch later with changeTheme |
locale | UI language | Set it when you create the widget |
timezone | Timezone used for display | Doesn't change the units of bar timestamps |
enabled_features / disabled_features | Turn features on or off | Use names from the feature catalog |
save_load_adapter | Saving and loading | Provide all four methods for each capability you turn on |
Defaults and updates
By default the runtime uses interval 1D, timezone Etc/UTC, locale en and a size of 800 × 500, with autosize and fullscreen turned off. To change things after the chart starts, call the public methods. Changing the original options object afterwards has no effect.
Use applyOverrides to change supported chart appearance properties. applyStudiesOverrides is accepted, but this release doesn't apply indicator defaults yet; set an indicator's properties after adding it instead. Some options can only be set at creation time. To change those, remove the widget and create a new one.
Symbols and intervals
A symbol is a name your datafeed knows how to look up. A resolution (or interval) sets how much time each bar covers. Keep the labels you show users separate from the actual values you pass to the chart.
Switch symbol or interval
widget.onChartReady(() => {
widget.setSymbol('MSFT', '60', () => {
console.log('Symbol and interval changed');
});
});In a multi-chart workspace, use that chart's own API to change just one chart. If you want charts to stay in sync, set up the workspace linking controls on purpose.
Writing resolutions
Minute resolutions are plain number strings such as 15 and 60. Daily, weekly and monthly resolutions add a suffix, for example 1D, 1W and 1M. Seconds and tick resolutions also need the matching feature, configuration and provider metadata. Only offer intervals your data provider can actually deliver.
Return supported_resolutions from both your configuration and symbol lookup. Check inputs before you request history. When the user switches symbol or interval, cancel or ignore any history and realtime work still running for the old one. That way a late reply for the old symbol can't end up on the new chart.
Chart types, panes and scales
To pick a chart style, pass one of the supported style IDs to the chart API. The runtime rejects any style that isn't in its supported list.
| ID | Style |
|---|---|
| 0 | Bars |
| 1 | Candles |
| 2 | Line |
| 3 | Area |
| 8 | Heikin Ashi |
| 9 | Hollow candles |
| 10 | Baseline |
| 12 | High-low |
| 13 | Columns |
| 14 | Line with markers |
| 15 | Step line |
| 16 | HLC area |
Set a style
widget.onChartReady(() => {
widget.activeChart().setChartType(1);
});The high-low style is controlled by a feature flag. To build a style picker, call supportedChartTypes() for the current widget. Don't list every value from the declaration enum, because some of them aren't supported.
Panes and price scales
An indicator can share the main pane or get a pane of its own. Pane and scale handles let you move, resize and adjust scales where supported. Each source ID and handle belongs to one chart, so keep them with that chart. After loading a layout, get them again.
Visible time ranges use the documented time units. Pass a timestamp where one is expected, not a screen coordinate. Avoid changing canvas geometry directly. The API reference lists every method you can use.