Properties
Common properties
Widget properties
Events
When to use Watchlist
- Portfolio, account, or research dashboards that need a saved symbol list
- Market workspaces where users repeatedly return to the same securities
- Sidebars that coordinate a selected symbol with charts, quotes, or news
- Pages that need compact price movement across multiple user-selected names
Core experience
Each row should identify the symbol, company or asset name, latest price, price change, market session, and timestamp. Keep the selected symbol clear when Watchlist drives a surrounding chart, quote, or news component.Data and market states
Support loading, empty-list, invalid-symbol, delayed-data, market-closed, entitlement, reconnecting, and error states. If a list is empty, provide a direct recovery path instead of showing inactive rows.Responsive behavior
On narrow screens, prioritize symbol, price, change, and session. Secondary columns can collapse into a detail row or compact metadata area. Avoid horizontal page scrolling.Accessibility
- Use row labels that include symbol, company name, price, and movement.
- Do not rely on color alone for positive and negative changes.
- Preserve visible focus for row actions and selected symbols.
- Keep price updates readable without excessive live announcements.
- Give the iframe a descriptive title that includes “AInvest Watchlist.”
Best practices
- Keep the default symbol list short enough to scan.
- Preserve row order while users are reading live updates.
- Synchronize row selection with related widgets when used in a dashboard.
- Test empty lists, invalid symbols, delayed data, and reconnecting states.
Related widgets
- Super Chart opens the selected security in a full analysis chart.
- Quick Quote shows compact quote details for the selected symbol.