⚙️ Install

npm i candleview

yarn add candleview

🌐 Link

| Website | Website(CN) | Emulator | Markets | | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------- | | Website | Website(CN) | Emulator | Markets |

📚 Directory

| directory | describe | | :------------------- | :------------------------------------------------------------------------------------------------------------------- | | core | CandleView Engine Core. | | website | Global official website. | | ai-proxy-service | This is the scaffolding project for CandleView AI services, which you can use to develop AI services for CandleView. | | docs | Documents. | | assets | Asset Directory. |

Props

| Parameter | Type | Default | Description | Required | | ------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | | theme | 'dark' \| 'light' | 'dark' | Theme mode | No | | i18n | 'en' \| 'zh-cn' | 'zh-cn' | Language setting | No | | height | number \| string | 500 | Chart height (px or percentage) | No | | width | number \| string | '100%' | Chart width (px or percentage) | No | | title | string | '' | Chart title displayed on the chart | Yes | | toppanel | boolean | false | Show top toolbar | No | | leftpanel | boolean | false | Show left drawing tools panel | No | | markData | IStaticMarkData[] | [] | Pre-drawn marks data | No | | timeframe | string | '1d' | Chart timeframe (e.g., '1m', '1h', '1d') | No | | timezone | string | 'Asia/Shanghai' | Timezone for data display | No | | data | ICandleViewDataPoint[] | [] | K-line data array | No | | ai | boolean | false | Enable AI function | No | | aiconfigs | AIConfig[] | [] | AI configuration list | No | | terminal | boolean | false | Show terminal panel | No | | isMobileMode | boolean | false | Enable mobile mode | No | | isOpenViewportSegmentation | boolean | false | Enable viewport data segmentation | No | | isCloseInternalTimeFrameCalculation | boolean | false | Disable internal timeframe calculation | No | | timeframeCallbacks | Partial<Record<TimeframeEnum, () => void>> | {} | Callbacks for custom timeframe switching | No | | mainChartIndicators | string[] | [] | Main chart indicator names to initialize (supported: 'ma', 'ema', 'bollinger', 'ichimoku', 'donchian', 'envelope', 'vwap', 'heatmap', 'marketprofile') | No | | subChartIndicators | string[] | [] | Sub chart indicator names to initialize (supported: 'rsi', 'macd', 'volume', 'sar', 'kdj', 'atr', 'stochastic', 'cci', 'bbwidth', 'adx', 'obv') | No | | danmakus | string[] | [] | Danmaku messages | No | | handleScreenshotCapture | (imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void | undefined | Callback for screenshot capture | No |

🚀 Quick Start

import { CandleView } from "./CandleView";

const App = () => {
  return (
    <CandleView
      data={candleData}
      title="Test"
      theme={theme}
      i18n={i18n}
      markData={markData}
      height={800}
      leftpanel={true}
      toppanel={true}
      terminal={true}
    />
  );
};

Implement custom timeframe logic.

import { CandleView } from "./CandleView";

const App = () => {
  return (
    <CandleView
      data={candleData}
      title="Test"
      theme={theme}
      i18n={i18n}
      markData={a}
      height={800}
      leftpanel={true}
      toppanel={true}
      terminal={true}
      ai={true}
      timezone="America/New_York"
      timeframe="1m"
      isCloseInternalTimeFrameCalculation={true} // the internal timeframe calculation logic has been disabled.
      timeframeCallbacks={{
        "1m": () => {
          // Implement a custom data source switching mechanism for a 1m timeframe.
        },
        "5m": () => {
          // Implement a custom data source switching mechanism for a 5m timeframe.
        },
        "1D": () => {
          // Implement a custom data source switching mechanism for a 1D timeframe.
        },
        "1H": () => {
          // Implement a custom data source switching mechanism for a 1H timeframe.
        },
        "15m": () => {
          // Implement a custom data source switching mechanism for a 15m timeframe.
        },
        "30m": () => {
          // Implement a custom data source switching mechanism for a 30m timeframe.
        },
        "4H": () => {
          // Implement a custom data source switching mechanism for a 4H timeframe.
        },
      }}
      aiconfigs={[
        {
          proxyUrl: "http://localhost:3000/api",
          brand: "aliyun",
          model: "qwen-turbo",
        },
        {
          proxyUrl: "http://localhost:3000/api",
          brand: "deepseek",
          model: "deepseek-chat",
        },
        {
          proxyUrl: "http://localhost:3000/api",
          brand: "deepseek",
          model: "deepseek-chat-lite",
        },
      ]}
    />
  );
};

Danmaku System

AI Features

Supported Brands

• OpenAI: GPT series models
• Aliyun (Alibaba Cloud): Tongyi Qianwen and other models
• DeepSeek: DeepSeek series models
• Claude: Anthropic models
• Gemini: Google models

Function Types

• Chart Analysis: AI analyzes current chart data, providing technical analysis, trend judgments, etc.
• Predictive Analysis: AI performs price predictions and risk assessments based on historical data

How to Use

1. Enable AI Panel: Select the desired AI function from the left panel (e.g., "OpenAI Chart Analysis")
2. Select Model: Choose an appropriate model from the available list in the AI chat box
3. Configure API Key: Pre-configure API keys and models for respective brands in the aiconfigs property
4. Start Conversation: Input questions or analysis requests to receive professional financial analysis from AI

Support Model

Aliyun

qwen-turbo、qwen-plus、qwen-max、qwen-max-longcontext、qwen2.5-0.5b、qwen2.5-0.5b-instruct、qwen2.5-7b、qwen2.5-7b-instruct、qwen2.5-14b、qwen2.5-14b-instruct、qwen2.5-32b、qwen2.5-32b-instruct、qwen2.5-72b、qwen2.5-72b-instruct、qwen2.5-coder、qwen2.5-coder-7b、qwen2.5-coder-14b、qwen2.5-coder-32b、qwen-vl-lite、qwen-vl-plus、qwen-vl-max、qwen-audio-turbo、qwen-audio-chat、qwen-math-7b、llama2-7b-chat-v2、baichuan2-7b-chat-v1、qwen-financial、qwen-financial-14b、qwen-financial-32b、qwen-medical、qwen-medical-14b、qwen-medical-32b、qwen-omni、qwen-omni-pro

DeepSeek

deepseek-chat、deepseek-chat-lite、deepseek-chat-pro、deepseek-chat-max、deepseek-coder、deepseek-coder-lite、deepseek-coder-pro、deepseek-math、deepseek-math-pro、deepseek-reasoner、deepseek-reasoner-pro、deepseek-vision、deepseek-vision-pro、deepseek-finance、deepseek-law、deepseek-medical、deepseek-research、deepseek-omni、deepseek-omni-pro、deepseek-llm、deepseek-llm-67b、deepseek-llm-131b

OpenAI

gpt-4、gpt-4-0314、gpt-4-0613、gpt-4-32k、gpt-4-32k-0314、gpt-4-32k-0613、gpt-4-turbo、gpt-4-turbo-preview、gpt-4-turbo-2024-04-09、gpt-4o、gpt-4o-2024-05-13、gpt-4o-mini、gpt-4o-mini-2024-07-18、gpt-3.5-turbo、gpt-3.5-turbo-0125、gpt-3.5-turbo-1106、gpt-3.5-turbo-instruct、gpt-3.5-turbo-16k、gpt-3.5-turbo-16k-0613、davinci-002、babbage-002、text-davinci-003、text-davinci-002、text-davinci-001、text-curie-001、text-babbage-001、text-ada-001、text-embedding-ada-002、text-embedding-3-small、text-embedding-3-large、dall-e-2、dall-e-3、whisper-1、tts-1、tts-1-hd、text-moderation-latest、text-moderation-stable

API Integration

The system integrates the following SDKs:

• ohlcv-ai library provides official API calls for OpenAI, Aliyun, DeepSeek, and others.

Configuration Example

<CandleView
  data={candleData}
  title="Test"
  theme={theme}
  i18n={i18n}
  markData={a}
  height={800}
  leftpanel={true}
  toppanel={true}
  terminal={true}
  ai={true}
  aiconfigs={[
    // Simultaneously configure different models from multiple AI brands.
    {
      proxyUrl: "http://0.0.0.0/api",
      brand: "aliyun",
      model: "qwen-turbo",
    },
    {
      proxyUrl: "http://0.0.0.0/api",
      brand: "aliyun",
      model: "qwen-omni",
    },
    {
      proxyUrl: "http://0.0.0.0/api",
      brand: "deepseek",
      model: "gpt-4",
    },
    {
      proxyUrl: "http://0.0.0.0/api",
      brand: "openai",
      model: "gpt-3.5-turbo",
    },
  ]}
/>

Proxy Interface Standard

💡 Services that must be implemented in the domain configured by proxyUrl.

/analyzeOHLCV - A service specifically designed for processing OHLCV data.

Supports price event scripts

Multi Panel Performance

Performance in AI conversations

💻 Command System

Supported Commands

Basic Commands

| Command | Description | Example | | -------------------- | ------------------------------------------ | ------------ | | clear / cls | Clear terminal output | clear | | help | Show all available commands and indicators | help | | theme [light dark] | Switch theme | theme dark | | history | Show recently executed command history | history |

Indicator Operations

| Command | Description | Example | | ------------------- | ------------------------------------------- | ----------- | | open [indicator] | Open specified main or sub chart indicator | open ma | | close [indicator] | Close specified main or sub chart indicator | close rsi |

Main Chart Indicators

• ma - Moving Average
• ema - Exponential Moving Average
• bollinger - Bollinger Bands
• ichimoku - Ichimoku Cloud
• donchian - Donchian Channel
• envelope - Envelope
• vwap - Volume Weighted Average Price
• heatmap - Heatmap
• marketprofile - Market Profile

Sub Chart Indicators

• rsi - Relative Strength Index
• macd - Moving Average Convergence Divergence
• volume - Volume
• sar - Parabolic SAR
• kdj - KDJ (Stochastic Oscillator)
• atr - Average True Range
• stochastic - Stochastic Oscillator
• cci - Commodity Channel Index
• bbwidth - Bollinger Bands Width
• adx - Average Directional Index
• obv - On Balance Volume

Keyboard Shortcuts

| Shortcut | Function | | ---------- | -------------------------------------- | | ↑ / ↓ | Navigate command history | | Tab | Auto-complete current suggestion | | Enter | Execute command or confirm completion | | Ctrl + L | Clear input field | | Ctrl + C | Cancel current operation | | Esc | Clear input field and hide suggestions |

Usage Examples

$ open ma # Open Moving Average indicator
$ close bollinger # Close Bollinger Bands indicator
$ theme light # Switch to light theme
$ history # View recent command history

Technical Indicators In The Sub Chart.

Preview

Draw Graphics

Fibonacci

Gann

Mark

Theme

I18n

🔧 Configuration Options

⏰ Supported Timeframes

Second-based Timeframes

| Value | Display Name | Description | | ------- | ------------------ | ----------- | | '1S' | 1 秒 / 1 Second | 1 second | | '5S' | 5 秒 / 5 Seconds | 5 seconds | | '15S' | 15 秒 / 15 Seconds | 15 seconds | | '30S' | 30 秒 / 30 Seconds | 30 seconds |

Minute-based Timeframes

| Value | Display Name | Description | | ------- | ------------------ | ----------- | | '1M' | 1 分 / 1 Minute | 1 minute | | '3M' | 3 分 / 3 Minutes | 3 minutes | | '5M' | 5 分 / 5 Minutes | 5 minutes | | '15M' | 15 分 / 15 Minutes | 15 minutes | | '30M' | 30 分 / 30 Minutes | 30 minutes | | '45M' | 45 分 / 45 Minutes | 45 minutes |

Hour-based Timeframes

| Value | Display Name | Description | | ------- | ------------------ | ----------- | | '1H' | 1 小时 / 1 Hour | 1 hour | | '2H' | 2 小时 / 2 Hours | 2 hours | | '3H' | 3 小时 / 3 Hours | 3 hours | | '4H' | 4 小时 / 4 Hours | 4 hours | | '6H' | 6 小时 / 6 Hours | 6 hours | | '8H' | 8 小时 / 8 Hours | 8 hours | | '12H' | 12 小时 / 12 Hours | 12 hours |

Day-based Timeframes

| Value | Display Name | Description | | ------ | ------------- | ----------- | | '1D' | 1 日 / 1 Day | 1 day | | '3D' | 3 日 / 3 Days | 3 days |

Week-based Timeframes

| Value | Display Name | Description | | ------ | -------------- | ----------- | | '1W' | 1 周 / 1 Week | 1 week | | '2W' | 2 周 / 2 Weeks | 2 weeks |

Month-based Timeframes

| Value | Display Name | Description | | -------- | --------------- | ----------- | | '1MON' | 1 月 / 1 Month | 1 month | | '3MON' | 3 月 / 3 Months | 3 months | | '6MON' | 6 月 / 6 Months | 6 months |

🌍 Supported Timezones

Americas

| Timezone ID | Display Name | UTC Offset | Major Cities | | ----------------------- | -------------------- | ----------- | -------------------------- | | 'America/New_York' | 纽约 / New York | UTC-5/UTC-4 | New York, Washington DC | | 'America/Chicago' | 芝加哥 / Chicago | UTC-6/UTC-5 | Chicago, Dallas | | 'America/Denver' | 丹佛 / Denver | UTC-7/UTC-6 | Denver, Phoenix | | 'America/Los_Angeles' | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco | | 'America/Toronto' | 多伦多 / Toronto | UTC-5/UTC-4 | Toronto, Montreal |

Europe

| Timezone ID | Display Name | UTC Offset | Major Cities | | ----------------- | -------------------- | ----------- | -------------------- | | 'Europe/London' | 伦敦 / London | UTC+0/UTC+1 | London, Dublin | | 'Europe/Paris' | 巴黎 / Paris | UTC+1/UTC+2 | Paris, Berlin | | 'Europe/Berlin' | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam | | 'Europe/Zurich' | 苏黎世 / Zurich | UTC+1/UTC+2 | Zurich, Vienna | | 'Europe/Moscow' | 莫斯科 / Moscow | UTC+3 | Moscow, Istanbul |

Asia

| Timezone ID | Display Name | UTC Offset | Major Cities | | ------------------ | ------------------ | ---------- | ----------------------- | | 'Asia/Dubai' | 迪拜 / Dubai | UTC+4 | Dubai, Abu Dhabi | | 'Asia/Karachi' | 卡拉奇 / Karachi | UTC+5 | Karachi, Lahore | | 'Asia/Kolkata' | 加尔各答 / Kolkata | UTC+5:30 | Kolkata, Mumbai | | 'Asia/Shanghai' | 上海 / Shanghai | UTC+8 | Shanghai, Beijing | | 'Asia/Hong_Kong' | 香港 / Hong Kong | UTC+8 | Hong Kong, Macau | | 'Asia/Singapore' | 新加坡 / Singapore | UTC+8 | Singapore, Kuala Lumpur | | 'Asia/Tokyo' | 东京 / Tokyo | UTC+9 | Tokyo, Seoul | | 'Asia/Seoul' | 首尔 / Seoul | UTC+9 | Seoul, Pyongyang |

Pacific

| Timezone ID | Display Name | UTC Offset | Major Cities | | -------------------- | ----------------- | ------------- | -------------------- | | 'Australia/Sydney' | 悉尼 / Sydney | UTC+10/UTC+11 | Sydney, Melbourne | | 'Pacific/Auckland' | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |

Global

| Timezone ID | Display Name | UTC Offset | Description | | ----------- | ------------ | ---------- | -------------------------- | | 'UTC' | UTC / UTC | UTC+0 | Coordinated Universal Time |

📄 Data structure

interface ICandleViewDataPoint {
  time: number; // timestamp in seconds
  open: number;
  high: number;
  low: number;
  close: number;
  volume?: number;
}

export interface IStaticMarkData {
  time: number;
  type: string;
  data: {
    direction: string;
    text: string;
    fontSize?: number;
    textColor?: string;
    backgroundColor?: string;
    isCircular?: boolean;
    padding?: number;
  }[];
}

🌟 Core Features

📈 Supported Technical Indicators

Main Chart Indicators

• Moving Average (MA)
• Exponential Moving Average (EMA)
• Bollinger Bands
• Ichimoku Cloud
• Donchian Channel
• Envelope
• Volume Weighted Average Price (VWAP)
• Heat Map
• Market Profile

Sub Chart Indicators

• Relative Strength Index (RSI)
• Moving Average Convergence Divergence (MACD)
• Volume
• Parabolic SAR
• KDJ Indicator
• Average True Range (ATR)
• Stochastic Oscillator
• Commodity Channel Index (CCI)
• Bollinger Bands Width
• Average Directional Index (ADX)
• On Balance Volume (OBV)

🎨 Supported Drawing Tools

Basic Tools

• Pencil, Pen, Brush, Marker Pen, Eraser
• Line Segment, Horizontal Line, Vertical Line
• Arrow Line, Thick Arrow Line

Channel Tools

• Parallel Channel
• Linear Regression Channel
• Equidistant Channel
• Disjoint Channel

Fibonacci Tools

• Fibonacci Retracement
• Fibonacci Time Zones
• Fibonacci Arc
• Fibonacci Circle
• Fibonacci Spiral
• Fibonacci Fan
• Fibonacci Channel
• Fibonacci Price Extension
• Fibonacci Time Extension

Gann Tools

• Gann Fan
• Gann Box
• Gann Rectangle

Pattern Tools

• Andrew Pitchfork
• Enhanced Andrew Pitchfork
• Schiff Pitchfork
• XABCD Pattern
• Head and Shoulders
• ABCD Pattern
• Triangle ABCD Pattern

Elliott Wave

• Elliott Impulse Wave
• Elliott Corrective Wave
• Elliott Triangle
• Elliott Double Combination
• Elliott Triple Combination

Geometric Shapes

• Rectangle, Circle, Ellipse, Triangle
• Sector, Curve, Double Curve

Annotation Tools

• Text Annotation, Price Note
• Bubble Box, Pin, Signpost
• Price Label, Flag Mark
• Image Insertion

Range Tools

• Time Range, Price Range
• Time-Price Range
• Heat Map

Trading Tools

• Long Position, Short Position
• Mock K-line

⏰ Supported Timeframes

Second-based

• 1s, 5s, 15s, 30s

Minute-based

• 1m, 3m, 5m, 15m
• 30m, 45m

Hour-based

• 1h, 2h, 3h, 4h
• 6h, 8h, 12h

Day-based

• 1d, 3d

Week-based

• 1w, 2w

Month-based

• 1M, 3M, 6M

🌍 Supported Timezones

• New York (America/New_York)
• Chicago (America/Chicago)
• Denver (America/Denver)
• Los Angeles (America/Los_Angeles)
• Toronto (America/Toronto)
• London (Europe/London)
• Paris (Europe/Paris)
• Frankfurt (Europe/Berlin)
• Zurich (Europe/Zurich)
• Moscow (Europe/Moscow)
• Dubai (Asia/Dubai)
• Karachi (Asia/Karachi)
• Kolkata (Asia/Kolkata)
• Shanghai (Asia/Shanghai)
• Hong Kong (Asia/Hong_Kong)
• Singapore (Asia/Singapore)
• Tokyo (Asia/Tokyo)
• Seoul (Asia/Seoul)
• Sydney (Australia/Sydney)
• Auckland (Pacific/Auckland)
• UTC

🎯 Supported Chart Types

• Candlestick Chart
• Hollow Candlestick Chart
• Bar Chart (OHLC)
• BaseLine Chart
• Line Chart
• Area Chart
• Step Line Chart
• Heikin Ashi Chart
• Histogram Chart
• Line Break Chart
• Mountain Chart
• Baseline Area Chart
• High Low Chart
• HLCArea Chart