{"path":"QUICKSTART.md","size":2222,"locked":false,"binary":false,"truncated":false,"content":"# QUICKSTART — CanvasQuantChartPro\n\nGet up and running in under 5 minutes.\n\n### 1. Direct Script Include (Vanilla HTML/JS)\n\n```html\n\n\n\n \n\n\n

\n\n \n\n\n```\n\n### 2. React 18 / 19 Integration\n\n```tsx\nimport React, { useEffect, useRef } from 'react';\nimport { CanvasQuantChart } from './canvas-quant-chart.js';\n\nexport function QuantChartComponent({ candles, forecast }) {\n const containerRef = useRef(null);\n const chartRef = useRef(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n chartRef.current = new CanvasQuantChart(containerRef.current, {\n theme: 'dark'\n });\n\n return () => {\n chartRef.current?.destroy();\n };\n }, []);\n\n useEffect(() => {\n chartRef.current?.setData(candles, forecast);\n }, [candles, forecast]);\n\n return

;\n}\n```\n\n### 3. Key Methods\n- `chart.setData(candles, forecast)`: Updates data and triggers immediate re-render.\n- `chart.setForecast(forecast)`: Updates or clears forecast overlay without modifying historical candles.\n- `chart.resetView()`: Resets zoom and pan offsets back to default perspective.\n- `chart.destroy()`: Disconnects resize observers and removes canvas element cleanly.\n"}