Skip to main content

Introduction

React component that wraps an existing TradingView Charting Library widget and adds iC Candle’s economic calendar analysis UI: an interactive panel that displays news events as timescale marks on the chart, draws pip-range visualizations (high/low rectangles, trend lines, pip annotations) around selected events, and lets users compare historical price reactions across similar news releases.

Published as ESM and CommonJS; component styles are bundled and injected at runtime (no separate CSS import).

Install​

npm install @iccandle/news

Prerequisites​

RequirementDetails
React 18+react and react-dom are peer dependencies - install them in your app.
TradingView Charting LibraryObtain under your own license, host static assets (e.g. /charting_library/ in public), load at runtime. Not shipped with this package.
iC Candle API keyIssued by iC Candle for theme, chart data, news events, and scanner validation.

Quick start​

import { useState } from "react";
import type { IChartingLibraryWidget } from "charting_library/charting_library";
import { NewsWidget } from "@iccandle/news-widget";

function App() {
  const [chartWidget, setChartWidget] = useState<IChartingLibraryWidget | null>(
    null,
  );
  const widgetKey = "your-iccandle-api-key";

  return (
    <NewsWidget
      chartWidget={chartWidget}
      widgetKey={widgetKey}
      defaultSymbol="XAU_USD"
      chartInterval="15"
      theme="dark"
    >
      {/* Your chart container + TradingView bootstrap; call setChartWidget when ready */}
      <div id="tv_chart_container" style={{ height: "100%" }} />
    </NewsWidget>
  );
}

Replace the chart placeholder with your TradingView initialization and pass the IChartingLibraryWidget instance when onChartReady (or equivalent) fires.

Install the package as @iccandle/news. The component is imported from @iccandle/news-widget per the published package entry points.

Next steps​