Configuration

Exports

Name	Kind	Description
SelectorWidget	Component	Scanner overlay around your chart subtree
SelectorWidgetProps	Type	Props for SelectorWidget

SelectorWidget props

Prop	Type	Required	Description
chartWidget	IChartingLibraryWidget | null	Yes	Live TradingView widget instance (null until ready).
children	ReactNode	Yes	Your chart UI (e.g. container + library bootstrap).
widgetKey	string	Yes	iC Candle API key (icc_search_ + 48 hex chars). Used for theme fetch, candle cache, and scanner validation.
submitCallback	(iframeSrc: string) => void	Yes	Called after a successful scan setup with the plugin iframe URL.
theme	"light" | "dark" | "system"	No	Affects resolved theme tokens and the plugin URL. "system" follows prefers-color-scheme.

Widget key and remote theming

On mount, the component loads branding colors from iC Candle:

• URL: https://api.iccandle.ai/corporate-client/v1/widgetStyle/search/user/?service_type=search
• Header: api-key: <widgetKey>

CSS custom properties (--iccandle-primary, --iccandle-border, etc.) are applied on the widget root so the scanner matches your configured light/dark tokens.

Theme prop vs. API tokens: The theme prop chooses which variant of those tokens to apply and is also forwarded in the plugin iframe URL. "system" tracks prefers-color-scheme so the scanner and plugin stay aligned with the user’s OS preference when you don’t pass an explicit light/dark mode from your app shell.

Behavior summary

• Subscribes to chart readiness, resolution, symbol changes, and drawing events.
• Manages a date_range multipoint drawing so the user can adjust the bar window; window size and exported candles drive the scanner.
• Posts candles to iC Candle’s cache endpoint before opening the plugin URL.
• Listens for window message events for chart/news integration and can clear persisted news mark selections (localStorage key tv:selected-news-events) when starting a scan.

Optional: timescale marks (news/events)

If your data feed implements getTimescaleMarks, you can surface stored events (e.g. from localStorage under tv:selected-news-events) as marks on the time axis:

getTimescaleMarks: async (
  symbolInfo: LibrarySymbolInfo,
  from: number,
  to: number,
  onResult: GetMarksCallback<TimescaleMark>,
) => {
  const marks: TimescaleMark[] = [];
  try {
    const allNewsEvents = JSON.parse(
      localStorage.getItem("tv:selected-news-events") || "[]",
    ) as NewsEventType[];

    allNewsEvents?.forEach(({ id, timestamp, event_name, currency }) => {
      if (!id || !Number.isFinite(timestamp) || timestamp <= 0) return;
      if (marks.some((m) => String(m.id) === String(id))) return;

      marks.push({
        id,
        time: timestamp / 1000,
        color: "green",
        label: event_name.slice(0, 1) || "N",
        tooltip: [event_name],
        ...(currency ? { imageUrl: `/images/symbols/${currency}.svg` } : {}),
        showLabelWhenImageLoaded: true,
      });
    });
  } catch {
    /* ignore */
  }
  onResult(marks);
},

Adjust paths and types to match your app and TradingView typings.

Development (upstream repo)

Script	Command	Purpose
Dev demo	npm run dev	Vite app with local charting library
Library build	npm run build	Emits dist/ (JS, CJS, bundled CSS injection, declarations)
Lint	npm run lint	ESLint

prepublishOnly runs build before publish.

License

MIT. TradingView Charting Library is subject to its own license from TradingView.