openalgo-chart-setup

name	openalgo-chart-setup
description	Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that renders real data. Use when the user asks to add a chart, set up openalgo-charts, or get a first chart running.
argument-hint	[chart-type] [host]
allowed-tools	Read, Write, Edit, Bash, Glob, Grep

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:

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:

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.