> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ainvest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Super Chart

> Advanced financial chart for price analysis, indicators, drawings, volume, and extended-hours context.

Super Chart brings AInvest's full market-analysis experience into an embeddable component. It is designed for workflows where users need to explore price history, compare intervals, apply technical studies, and inspect regular or extended-hours movement.

<iframe data-widget-embed-slot="super-chart" src="https://h5.ainvest.com/frontPage/regular/widgets-container/super-chart-open-widget-preview.html" title="AInvest Super Chart widget preview" style={{ display: "block", width: "100%", height: "min(80vh, 900px)", minHeight: "720px", maxHeight: "900px", border: 0, borderRadius: "12px", overflow: "hidden" }} loading="lazy" allow="clipboard-write; fullscreen" allowFullScreen referrerPolicy="strict-origin-when-cross-origin" />

## Properties

### Common properties

| Name              | Type                         | Required | Default      | Description                                                                |
| ----------------- | ---------------------------- | -------- | ------------ | -------------------------------------------------------------------------- |
| `theme`           | `"light" or "dark"`          | No       | `light`      | Visual theme applied inside the widget iframe.                             |
| `locale`          | `string`                     | No       | `en`         | Locale used by labels, formatting, and component copy when supported.      |
| `colorPreference` | `"GreenForUp" or "RedForUp"` | No       | `GreenForUp` | Controls whether green or red represents positive price movement.          |
| `autoHeight`      | `boolean`                    | No       | `true`       | Enables ResizeObserver-driven iframe height updates through `postMessage`. |

### Widget properties

| Name     | Type                                                                 | Required | Default       | Description                                  |
| -------- | -------------------------------------------------------------------- | -------- | ------------- | -------------------------------------------- |
| `symbol` | `string`                                                             | Yes      | `AAPL:NASDAQ` | Active security in `SYMBOL:EXCHANGE` format. |
| `period` | `"day_1" or "week_1" or "month_1" or "min_1" or "min_5" or "hour_1"` | No       | `day_1`       | Initial chart period.                        |

## Events

| Event   | Payload                                | Description                                  |
| ------- | -------------------------------------- | -------------------------------------------- |
| `ready` | `{ symbol: string; exchange: string }` | Fired when the Super Chart runtime is ready. |

## When to use Super Chart

* Stock detail and research pages where technical analysis is the primary task
* Trading dashboards that need indicators, drawings, volume, and session context
* Symbol workspaces where chart changes should coordinate with quotes or news
* Educational or editorial pages that require an interactive historical-price view

For compact contexts where the latest price matters more than historical analysis, use [Quick Quote](/widgets/api-reference/quick-quote).

## Core experience

Super Chart should provide a clear symbol and exchange identity, visible interval state, readable OHLC values, volume context, and consistent positive or negative price colors. Technical studies and drawing tools should remain discoverable without overwhelming the chart canvas.

If extended-hours data is available, distinguish it visually from the regular session and label the applicable market session and timestamp.

## Data and market states

Support explicit loading, delayed-data, market-closed, empty-series, entitlement, reconnecting, and error states. During a reconnect, preserve the last valid chart when possible and show that the data may be stale.

Never display pre-market or post-market values as regular-session prices. Every delayed or non-regular session value should include a visible label and timestamp.

## Responsive behavior

Use a minimum container height of approximately `480px` for basic analysis and more space for full trading workspaces. On narrow screens, collapse secondary controls into menus, preserve symbol and interval controls, and keep the plot area interactive.

Avoid horizontal page scrolling. Tool menus and drawing controls should remain reachable by touch and keyboard.

## Accessibility

* Give the iframe a descriptive title that includes “AInvest Super Chart.”
* Provide keyboard access to symbols, intervals, studies, and drawing controls.
* Do not communicate price direction using color alone.
* Maintain sufficient contrast for grid lines, candles, labels, and focus states.
* Provide readable text alternatives for key price and session values.

## Best practices

* Place Super Chart in the primary content column rather than a narrow sidebar.
* Reserve container height before loading to prevent layout shift.
* Keep the active symbol synchronized with surrounding page context.
* Avoid preloading an excessive number of studies on first render.
* Test market-open, market-closed, delayed-data, and invalid-symbol scenarios.

## Related widgets

* [Quick Quote](/widgets/api-reference/quick-quote) adds compact quote and session context for the active symbol.
* [News Wire](/widgets/api-reference/news-wire) shows headlines related to the security being analyzed.