openalgo-chart-setup

Imported from marketcalls/openalgo-charts (.github/skills/openalgo-chart-setup/SKILL.md). Install upstream with npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup. Copyright stays with the author.

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 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.

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);

If the user wants a recent-bar default, pass navigation: { defaultVisibleBars: 120 } when creating the chart and omit the explicit fitContent() call above. Initial data uses the preference; later default resets use resetScale(). A hidden tab defers its initial fit until measurement. See host-integration.

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 to = Math.floor(Date.now() / 1000);
const request = { symbol, exchange, interval: '5m', from: to - 7 * 86400, to };
const bars = await feed.getBars(request);
series.setData(bars);
const unsubscribe = feed.subscribeBars(request, b => series.update(b), {
  seedFrom: bars[bars.length - 1],
});
// On symbol replacement or unmount: unsubscribe(), then tear down owned resources.

from and to are mandatory for OpenAlgo REST history. Save unsubscribe in the host's cleanup scope and check liveness after the history await before subscribing. For repeated symbol loads, replay or reconnect recovery, follow the request guards in host-integration.

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.