Case studiesLive implementation
An opportunity radar you can run locally in minutes: FX chart, discovery feed, strategy markers, and news dots on the canvas. Download the zip, edit React files, and grow it into your own platform.
Try the finished UI first — same patterns you get in the downloadable starter. Opportunities and news are demo data; candles ship as static fixtures.
This page is your starting point: try the demo, download a small React project, run it on your machine, then change whatever you want. You do not need to understand the whole codebase on day one — follow the steps below and edit one file at a time.
New to React or charting? Follow this path once. After that, vibe-code whatever you want on top.
Open the live FX Opportunity Radar in another tab. Opportunity feed, chart scenes, and news dots — no install yet.
Scroll to Starter code below and click Download ZIP. You get a ready-made Vite + React project with bundled EUR/USD candles — no need to clone this docs repo.
Unzip the folder, open your terminal app (Terminal on Mac, PowerShell on Windows), cd into the folder, and run npm install. You need Node.js 18+.
Run npm run dev. Your browser will show a local URL (usually http://localhost:5173) — open it. The chart loads EUR/USD candles from public/data/eur-usd-m15.json.
Open src/App.tsx in Cursor, VS Code, or any editor. Change the pair, add a strategy script, or tweak colors — save the file and the page updates automatically. The snippets/ folder has copy-paste examples for news, opportunities, and backend wiring.
Prefer the browser? Use StackBlitz below — same workflow, no unzip step.
The starter is a real chart UI with bundled FX candles. Opportunity rankings and macro copy are demo data on purpose — so you can experiment safely before wiring your backend.
No API keys. Candles ship inside the zip; the chart renders immediately.
Use the layout and chart wiring; replace the catalog with your product logic.
Point the feed at your API, stream live prices, then add alerts and execution.
Kraken connector →Download a zip, or copy a snippet into your own app. The zip includes src/App.tsx, bundled EUR/USD candles in public/data/, and extra examples in snippets/.
Pick one example to view or copy:
Chart plus toolbar and NEWSFEED indicator.
import { useEffect, useRef, useState } from "react";
import { createChart, type ChartInstance } from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";
const SYMBOL = "EUR/USD";
const INTERVAL = { symbol: "15m", milis: 900_000 };
export default function App() {
const containerRef = useRef<HTMLDivElement | null>(null);
const [chart, setChart] = useState<ChartInstance | null>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
let disposed = false;
const instance = createChart({
container,
instrument: { symbol: SYMBOL, description: "Euro / US Dollar" },
themeVariant: "light",
});
instance.init();
instance.setMainDrawMode("OHLC");
void (async () => {
const response = await fetch("/data/eur-usd-m15.json");
const payload = (await response.json()) as { candles: unknown[] };
await instance.setMainSeriesData(
payload.candles as Parameters<typeof instance.setMainSeriesData>[0],
INTERVAL,
);
await instance.addScript("NEWSFEED");
instance.fit();
if (!disposed) setChart(instance);
})();
return () => {
disposed = true;
instance.destroy();
};
}, []);
return (
<main style={{ height: "100vh", background: "#f0f3fa" }}>
<ChartUI chart={chart}>
<div ref={containerRef} style={{ width: "100%", height: "100%" }} />
</ChartUI>
</main>
);
}# After downloading and unzipping the starter from this page: cd exeria-fx-radar # or whatever you named the folder npm install npm run dev # Open the URL printed in the terminal (usually http://localhost:5173). # Edit src/App.tsx — save and the browser refreshes. # ── Starting from scratch instead? ── # npm create vite@latest my-fx-radar -- --template react-ts # cd my-fx-radar # npm install @efixdata/exeria-chart @efixdata/exeria-chart-ui-react # Paste a snippet from the starter page into src/App.tsx, then: npm run dev