Skip to main content

Notification

The Notification module provides a comprehensive system for displaying user notifications, alerts, and system messages. It supports various notification types with customizable styling and behavior.

Key Features​

  • Toast-style notifications with auto-dismissal
  • Multiple notification types (alert, info, warning, error, success)
  • Customizable positioning (top-right, top-left, bottom-right, etc.)
  • Action buttons within notifications
  • Sound notifications
  • Theme support (light/dark)
  • Notification stacking and management

Architecture / Behavior​

The Notification module is implemented through the NotificationManager class which manages a collection of notifications in memory and renders them as DOM elements. It uses an EventEmitter pattern for event handling and supports both programmatic and automatic notification display.

API Usage​

Initialization​

The Notification module is initialized automatically when the chart is created and requires no additional configuration.

Methods​

// Add a new notification
chart.addNotification({
  id: 'alert-123',
  type: 'alert',
  title: 'Price Alert',
  message: 'AAPL price crossed above $150',
  duration: 5000,
  dismissible: true,
  actions: [
    {
      label: 'View Chart',
      action: () => chart.setSymbol('AAPL')
    }
  ]
});

// Remove a notification
chart.removeNotification('alert-123');

// Remove all notifications
chart.removeAllNotifications();

Configuration Options​

OptionTypeDefaultDescription
notification_positionstring'top-right'Notification position (top-right, top-left, bottom-right, bottom-left, center)
notification_themestring'light'Theme (light/dark)
notification_durationnumber5000Default auto-dismiss duration in milliseconds

Events​

The Notification module emits events through the NotificationManager:

  • notificationAdded - When a new notification is added
  • notificationRemoved - When a notification is removed
  • allNotificationsRemoved - When all notifications are removed

Customization​

  • Notification styling can be customized via CSS classes
  • Animation effects can be customized using CSS transitions
  • Sound notifications can be customized via SoundUtils
  • Notification container can be customized via the init() method

Use Cases​

  • System status notifications
  • Trading alerts and confirmations
  • Error reporting and recovery
  • User feedback for actions
  • Real-time market updates

Limitations​

  • No built-in notification persistence across page reloads
  • Limited to browser-based notifications (no native OS notifications)
  • No built-in notification history or logging

✅ Supported​

  • Comprehensive notification types and styling
  • Action buttons and custom actions
  • Auto-dismissal with configurable duration
  • Theme support

❌ Not Supported​

  • Native OS notifications
  • Notification scheduling
  • Cross-device notification sync

⚠️ Partial / Custom​

  • Notification persistence requires custom implementation
  • Advanced notification routing requires custom implementation

Integration​

This module should be linked from:

  • Charting section → Right Sidebar Panels
  • Advanced Features → Modules
  • API Reference → Notification Interface