Embed a CandleScript.io chart in a React application

Configure the hosted mini-chart widget and wrap it in a responsive React component without exposing partner credentials.

Published 2026-08-18; reviewed 2026-08-18.

1. Build the widget URL

Use public widget parameters for symbol, resolution, and theme. Do not place a partner API key in the URL.

javascript

const params = new URLSearchParams({
  symbol: "COINBASE:BTCUSD",
  resolution: "1D",
  theme: "dark"
});
const widgetUrl = `https://candlescript.io/api/widgets/mini-chart?${params}`;

2. Create a responsive component

Give the iframe a stable title and an explicit responsive container so layout changes do not resize the page unexpectedly.

tsx

export function CandleScriptChart() {
  const src = "https://candlescript.io/api/widgets/mini-chart?symbol=COINBASE%3ABTCUSD&resolution=1D&theme=dark";
  return (
    <div style={{ aspectRatio: "16 / 9", width: "100%" }}>
      <iframe
        src={src}
        title="BTCUSD daily chart"
        loading="lazy"
        style={{ border: 0, width: "100%", height: "100%" }}
      />
    </div>
  );
}

3. Apply an iframe policy
Use the narrowest iframe permissions your application needs. Keep account sessions and partner credentials outside the embedded URL and surrounding client bundle.

1. Build the widget URL

2. Create a responsive component

3. Apply an iframe policy