marketcalls Scaffold a first working chart. Do not write a demo page unless the user asked for one; wire it into the project they already have.
Arguments
$0= chart type. Default:candlestick.$1= host. Default: detect it.
Step 1 - detect the host before writing anything
cat package.json
rg -n "\"(react|next|vue|svelte|vite|webpack)\"" package.json
node -p "require('./node_modules/openalgo-charts/package.json').version" 2>/dev/null || echo "not installed"
Pick the shape from what you find:
| Finding | Shape |
|---|---|
next |
client-only component, 'use client', create in useEffect |
react without next |
component with useRef + useEffect |
vue |
onMounted / onBeforeUnmount |
| a bundler, no framework | plain module |
| no bundler, HTML only | dist/openalgo-charts.standalone.js and the OpenAlgoCharts global |
Read react-integration for the framework shapes and bundling-and-tiers for the no-bundler shape.
Step 2 - install
npm install openalgo-charts
Add tier imports only for what the user actually asked for. Each unused tier is bytes for nothing.
| They asked for | Add |
|---|---|
| indicators | import 'openalgo-charts/indicators' |
| drawing tools | import { DrawingController } from 'openalgo-charts/draw' |
| Renko / Heikin Ashi / P&F / Kagi | import 'openalgo-charts/transform' |
| volume or market profile, footprint | import { ... } from 'openalgo-charts/profile' |
| placing orders | import { OrderEngine } from 'openalgo-charts/trade' |
Step 3 - write the chart
Requirements the scaffold must satisfy:
- The container has an explicit non-zero height. A chart in a zero-height box renders nothing and this is the most common setup failure.
- Time values are UTC seconds.
- The chart is created once and destroyed in cleanup with
chart.destroy(). - The chart instance lives in a ref or module scope, never in component state.
- Real data if the project has a source;
generateBarsonly as an explicit placeholder, clearly marked. - No emojis or icons anywhere in the code.
Vanilla baseline:
import { createChart } from 'openalgo-charts';
const chart = createChart(document.getElementById('chart')!);
const series = chart.addSeries('candlestick');
series.setData(bars); // bars: { time, open, high, low, close, volume }[]
chart.fitContent();
Add a volume pane only if asked:
const volume = chart.addSeries('histogram', { paneIndex: 1 });
volume.setData(bars.map(b => ({ time: b.time, value: b.volume ?? 0 })));
chart.setPaneWeight(1, 0.3);
Step 4 - connect data
If the project already has a bar source, use it. If the user names OpenAlgo, wire the real feed rather than a fetch by hand - see feeds-and-live:
import { OpenAlgoLiveDataFeed } from 'openalgo-charts';
const feed = new OpenAlgoLiveDataFeed({ baseUrl, apiKey, wsUrl });
const bars = await feed.getBars({ symbol, exchange, interval: '5m' });
series.setData(bars);
feed.subscribeBars({ symbol, exchange, interval: '5m' }, b => series.update(b), {
seedFrom: bars[bars.length - 1],
});
Never read an API key from client-side source you commit. Take it from the project's existing env mechanism.
Step 5 - verify it actually renders
Do not report success on a file write alone. Build or typecheck, and if the project has a dev server or a browser harness available, load the page and confirm the canvas has content.
npx tsc --noEmit
npm run build
Report the file paths you created or edited, the tiers you added, and how you verified it renders.