# Lumen Charts documentation

Public integration documentation for a proprietary library. Runtime access is separately authorized. Exported API signatures do not imply that all legacy capabilities are supported; preserve compatibility notes when using these documents.

<!-- Public documentation export; not library implementation source. -->
# Widget configuration

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](https://docs.lumencharts.com/charting-library/configuration/features) |
| `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

```js
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

```js
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](https://docs.lumencharts.com/charting-library/api/) lists every method you can use.

---
Documentation page: https://docs.lumencharts.com/charting-library/configuration/


---

<!-- Public documentation export; not library implementation source. -->
# Feature catalog

This list comes straight from the runtime, so it always matches what ships. Put any of these names in `enabled_features` or `disabled_features`. Features marked `initialization` only take effect when you create a new widget. Features marked `runtime` can be switched on a running chart with the feature API. Names that aren't on this list are ignored and won't add anything. Features marked **Beta** work but may change in a later release.

| Feature | Default | Lifecycle |
| --- | --- | --- |
| `chart_style_volume_footprint` **Beta** | Disabled | initialization |
| `accessibility` | Enabled | runtime |
| `accessible_keyboard_shortcuts` | Disabled | runtime |
| `axis_pressed_mouse_move_scale` | Enabled | runtime |
| `chart_scroll` | Enabled | runtime |
| `chart_style_hilo` | Enabled | runtime |
| `chart_style_hilo_last_price` | Disabled | runtime |
| `chart_template_storage` | Disabled | runtime |
| `chart_zoom` | Enabled | runtime |
| `charting_library` | Enabled | runtime |
| `collapsible_header` | Disabled | runtime |
| `context_menus` | Enabled | runtime |
| `create_volume_indicator_by_default` | Enabled | initialization |
| `create_volume_indicator_by_default_once` | Enabled | initialization |
| `volume_force_overlay` | Enabled | initialization |
| `go_to_date` | Enabled | runtime |
| `insert_indicator_dialog_shortcut` | Enabled | runtime |
| `header_chart_type` | Enabled | runtime |
| `header_compare` | Enabled | runtime |
| `header_fullscreen_button` | Enabled | runtime |
| `header_indicators` | Enabled | runtime |
| `header_layouttoggle` | Enabled | initialization |
| `header_quick_search` | Enabled | runtime |
| `header_resolutions` | Enabled | runtime |
| `header_saveload` | Enabled | runtime |
| `header_save_status` | Disabled | runtime |
| `header_screenshot` | Enabled | runtime |
| `header_settings` | Enabled | runtime |
| `header_symbol_search` | Enabled | runtime |
| `header_undo_redo` | Enabled | runtime |
| `header_widget` | Enabled | runtime |
| `right_toolbar` | Enabled | initialization |
| `hide_right_toolbar` | Disabled | runtime |
| `horz_touch_drag_scroll` | Enabled | runtime |
| `iframe_loading_compatibility_mode` | Disabled | runtime |
| `items_favoriting` | Enabled | runtime |
| `left_toolbar` | Enabled | runtime |
| `mouse_wheel_scale` | Enabled | runtime |
| `mouse_wheel_scroll` | Enabled | runtime |
| `pinch_scale` | Enabled | runtime |
| `pressed_mouse_move_scroll` | Enabled | runtime |
| `property_pages` | Enabled | runtime |
| `right_bar_stays_on_scroll` | Enabled | runtime |
| `saveload_separate_drawings_storage` | Disabled | runtime |
| `series_data_error_overlay` | Enabled | runtime |
| `seconds_resolution` | Disabled | runtime |
| `save_shortcut` | Enabled | runtime |
| `show_chart_property_page` | Enabled | runtime |
| `show_interval_dialog_on_key_press` | Enabled | runtime |
| `show_symbol_logos` | Disabled | runtime |
| `show_symbol_logo_in_legend` | Disabled | runtime |
| `study_templates` | Disabled | runtime |
| `support_multicharts` | Enabled | initialization |
| `symbol_search_hot_key` | Enabled | runtime |
| `tick_resolution` | Disabled | runtime |
| `timeframes_toolbar` | Enabled | runtime |
| `two_character_bar_marks_labels` | Disabled | runtime |
| `vert_touch_drag_scroll` | Enabled | runtime |

Some features depend on storage or optional services. Those still need their full adapters or assets: turning the flag on doesn't set the feature up for you.

---
Documentation page: https://docs.lumencharts.com/charting-library/configuration/features


---

<!-- Public documentation export; not library implementation source. -->
# 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.

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

## Styling stops at the iframe

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 appearance

`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 themes

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.

[Interactive chart example](https://docs.lumencharts.com/charting-library/configuration/themes) — runs in a browser with synthetic data.

## Header extensions

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.

```js
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 actions

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 works

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 accessibility

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 focus

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 containers

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.

---
Documentation page: https://docs.lumencharts.com/charting-library/configuration/themes


---

<!-- Public documentation export; not library implementation source. -->
# Workspaces and comparisons

One widget can hold several charts. Each chart keeps its own data, analysis and lifecycle, while the widget handles the layout and keeps the charts in sync.

```js
widget.onChartReady(() => {
  widget.setLayout('2h');
  widget.chart(1).setSymbol('MSFT');
});
```

## Synchronization

Use the built-in controls to sync symbol, interval, crosshair, time and date range across charts. Don't copy every event from one chart to another by hand, because that can cause loops. When you switch to a smaller layout, hidden charts may be kept around. Changing the grid doesn't necessarily clear their state.

## Comparisons

Comparison series belong to their chart. If your release offers the public comparison API, use it, and keep comparisons, indicators and the main series separate. Get fresh handles after restoring a layout.

## Sharing drawings

Which drawings are shared depends on symbol and layout ownership. Sharing keeps drawing IDs stable and checks saved metadata. Don't copy internal model objects from one chart to another.

[Interactive chart example](https://docs.lumencharts.com/charting-library/configuration/workspaces) — runs in a browser with synthetic data.

---
Documentation page: https://docs.lumencharts.com/charting-library/configuration/workspaces