openalgo-chart-setup

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:

Read [react-integration](../openalgo-charts/references/react-integration.md) for the framework shapes and [bundling-and-tiers](../openalgo-charts/references/bundling-and-tiers.md) 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.

Step 3 - write the chart

Requirements the scaffold must satisfy:

1. 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.
2. Time values are UTC seconds.
3. The chart is created once and destroyed in cleanup with chart.destroy().
4. The chart instance lives in a ref or module scope, never in component state.
5. Real data if the project has a source; generateBars only as an explicit placeholder, clearly marked.
6. 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](../openalgo-charts/references/feeds-and-live.md):

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.