Themes and UI

Set theme: 'light' or theme: 'dark' in the widget options. To switch the theme of a chart that's already running, call the public theme method.

await widget.changeTheme('dark');
widget.applyOverrides({
  'paneProperties.background': '#101216',
  'paneProperties.backgroundType': 'solid',
});

Styling stops at the iframeCopy Anchor Link

The chart lives in its own iframe, so your page's CSS doesn't reach it. Use the supported overrides and CSS customization methods. Don't target the chart's internal DOM with selectors; it isn't a stable public contract and can change.

Chart and indicator appearanceCopy Anchor Link

applyOverrides changes supported chart properties. applyStudiesOverrides is accepted but doesn't apply indicator defaults in this release; indicators on the chart have their own property methods. Note that a property you can use when creating a drawing isn't always valid in a saved drawing.

Check both themesCopy Anchor Link

Look at text, grid lines, drawing labels, focused controls and dialogs in light and dark. Don't rely on color alone to show state. If your app has its own theme switcher, have it call the widget API. Changing your page's theme won't change the chart on its own. The chart below does this: use the site's theme toggle and it switches without reloading.

Header extensionsCopy Anchor Link

Wait for headerReady() before you add your own header controls. Hold on to the handle the public API gives you, and follow its documented lifecycle.

await widget.headerReady();
const button = widget.createButton();
button.textContent = 'Reset view';
button.setAttribute('aria-label', 'Reset chart view');
button.addEventListener('click', () => widget.activeChart().resetView());

Use public actionsCopy Anchor Link

Have your controls call public chart actions. Don't search inside the iframe for the chart's own toolbar elements. When the chart is removed, remove your listeners too, and don't keep references to DOM nodes that are no longer on the page.

Only show what worksCopy Anchor Link

Show save, load, template and similar controls only when that feature is fully set up. If there's no backend behind a button, hide it rather than showing a button that always fails. In small containers, keep labels short and check keyboard focus and overflow.

Localization and accessibilityCopy Anchor Link

Set the widget's locale when you create it. Use a supported locale value and test with the real language, including right-to-left layouts if you need them.

Keyboard and focusCopy Anchor Link

The chart handles chart gestures. Dialogs, menus and text fields handle typing inside them. Don't capture every key on your page, and don't forward shortcuts while someone is typing in an input. Keep Escape, focus return and browser zoom working.

Give the chart region an accessible label, and give your own controls clear labels. Don't use color alone to tell series or states apart. Assistive technology can't read everything drawn on a canvas. If your users need an equivalent, offer a text summary or a data table.

Responsive containersCopy Anchor Link

Give the chart a fixed or limited height, and let its controls adjust to the available width. On mobile, make sure the rest of the page still scrolls and that fixed navigation doesn't cover any controls. Check dialogs and their close buttons on narrow screens.

These docs support keyboard navigation, search and theme switching. For the chart itself, test accessibility against the specific workflows your app offers.