🌐 Link

A programmable time-series data visualization and charting engine designed specifically for the financial industry.

⚙️ Install

npm i @candleview/core

yarn add @candleview/core

🌐 Link

Website	Website(CN)	Emulator	Markets
Website	Website(CN)	Emulator	Markets

📚 Directory

directory	describe
core	CandleView Engine Core.
react	CandleView React Component.
ai-proxy-service	This is the scaffolding project for CandleView AI services, which you can use to develop AI services for CandleView.
assets	Asset Directory.

🚀 Quick Start

// 1. Create with container element
const chart = new CandleView({ container: document.getElementById("chart") });
// 2. Create with container selector
const chart = new CandleView({ containerSelector: "#chart" });
// 3. Create with element ID
const chart = new CandleView({ id: "chart" });
// 4. Create with parent element (auto creates container)
const chart = new CandleView({ parent: document.getElementById("wrapper") });
// 5. Create with parent selector (auto creates container)
const chart = new CandleView({ parentSelector: "#wrapper" });

Basic Configuration

const candleView = new CandleView({
  container: document.getElementById("chart"), // Container DOM element
  title: "AAPL - Daily Chart", // Chart title
  data: candleData, // Candlestick data points array
  theme: "dark", // Theme: "dark" | "light"
  locale: "en", // Language: "en" | "zh-cn"
  showTopPanel: true, // Show top toolbar panel
  showLeftPanel: true, // Show left toolbar panel
  chartType: MainChartType.Candle, // Main chart type, e.g. candlestick chart
  activeTimeframe: TimeframeEnum.ONE_HOUR, // Active time period, e.g. 1 hour
  currentTimezone: TimezoneEnum.NEW_YORK, // Current timezone
  onToolSelect: (tool) => {
    console.log("Tool selected:", tool);
  },
  onTimeframeChange: (timeframe) => {
    console.log("Timeframe changed:", timeframe);
  },
  onChartTypeChange: (type) => {
    console.log("Chart type changed:", type);
  },
  onMainChartIndicatorSelect: (indicator) => {
    console.log("Main chart indicator selected:", indicator);
  },
  onSubChartIndicatorSelect: (indicators) => {
    console.log("Sub-chart indicators selected:", indicators);
  },
  onThemeToggle: (theme) => {
    console.log("Theme toggled:", theme);
  },
  onCameraClick: () => {
    console.log("Screenshot button clicked");
  },
  onFullscreenClick: () => {
    console.log("Fullscreen button clicked");
  },
  onTimezoneSelect: (timezone) => {
    console.log("Timezone changed:", timezone);
  },
  onTimeframeChangeCallback: (candleView, timeframe) => {
    console.log("Timeframe changed (callback):", timeframe);
  },
});

JavaScript

const container = document.getElementById("chart");
const chart = new CandleView({ container, title: "BTC/USDT", data: klineData });

React

const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => { if (containerRef.current) new CandleView({ container: containerRef.current }); }, []);
return <div ref={containerRef} style={{ width: "100%", height: "500px" }} />;

Vue3

const containerRef = ref<HTMLDivElement>(null);
onMounted(() => {
  if (containerRef.value) new CandleView({ container: containerRef.value });
});

<div ref="containerRef" style="width:100%;height:500px"></div>

Vue2

mounted() { this.chart = new CandleView({ container: this.$refs.container }); },

<div ref="container" style="width:100%;height:500px"></div>

Real-Time Data Processing

import { CandleView, ICandleViewDataPoint } from "candleview";
let lastClose = 50000;
let currentTime = Math.floor(Date.now() / 1000);
function generateNewDataPoint(): ICandleViewDataPoint {
  const changePercent = (Math.random() - 0.5) * 0.01;
  const newClose = lastClose * (1 + changePercent);
  const highLowRange = Math.abs(newClose - lastClose) * 0.5;
  const newPoint = {
    time: currentTime++,
    open: lastClose,
    high: Math.max(lastClose, newClose) + Math.random() * highLowRange,
    low: Math.min(lastClose, newClose) - Math.random() * highLowRange,
    close: newClose,
    volume: Math.random() * 1000 + 500,
  };

  lastClose = newClose;
  return newPoint;
}
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  data: initialData,
});
const interval = setInterval(() => {
  const newPoint = generateNewDataPoint();
  chart.updateData([newPoint]);
}, 1000);

Open the main chart technical indicators and the sub-chart technical indicators

import {
  CandleView,
  MainChartIndicatorType,
  SubChartIndicatorType,
} from "candleview";

// 1. Initialize the chart
const candleView = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  data: candleData, // Array of candlestick data
  theme: "dark",
  locale: "en",
});

// ========== Main Chart Indicators ==========
// Open MA indicator (Moving Average)
candleView.openMainChartIndicator(MainChartIndicatorType.MA);
// Open EMA indicator (Exponential Moving Average)
candleView.openMainChartIndicator(MainChartIndicatorType.EMA);
// Open Bollinger Bands indicator
candleView.openMainChartIndicator(MainChartIndicatorType.BOLLINGER);
// Open VWAP indicator
candleView.openMainChartIndicator(MainChartIndicatorType.VWAP);
// Close MA indicator
candleView.closeMainChartIndicator(MainChartIndicatorType.MA);
// Close all main chart indicators
candleView.closeAllMainChartIndicators();
// Check if an indicator is enabled
const isMAEnabled = candleView.isMainChartIndicatorEnabled(
  MainChartIndicatorType.MA,
console.log("MA enabled:", isMAEnabled);
// Get all enabled main chart indicators
const enabledIndicators = candleView.getEnabledMainChartIndicators();
console.log("Enabled indicators:", enabledIndicators);
// ========== Sub Chart Indicators ==========
// Open RSI indicator (Relative Strength Index)
candleView.openSubChartIndicator(SubChartIndicatorType.RSI);
// Open MACD indicator
candleView.openSubChartIndicator(SubChartIndicatorType.MACD);
// Open Volume indicator
candleView.openSubChartIndicator(SubChartIndicatorType.VOLUME);
// Close RSI indicator
candleView.closeSubChartIndicator(SubChartIndicatorType.RSI);
// Close all sub chart indicators
candleView.closeAllSubChartIndicators();
// Check if an indicator is enabled
const isRSIEnabled = candleView.isSubChartIndicatorEnabled(
  SubChartIndicatorType.RSI,
);
// Get all enabled sub chart indicators
const enabledSubIndicators = candleView.getEnabledSubChartIndicators();
// ========== Open with Callbacks (for settings modal) ==========
candleView.openSubChartIndicator(
  SubChartIndicatorType.MACD,
  (type) => {
    // Callback when indicator is opened (e.g., to show settings panel)
    console.log("MACD opened, ready to show settings");
  },
  (type) => {
    // Callback when indicator is closed
    console.log("MACD closed");
  },
);
// ========== Destroy Chart ==========
candleView.destroy();

Static Mark

Static Mark Interface parameters

interface IStaticMarkOptions {
  textColor?: string; // Text color, default white
  backgroundColor?: string; // Background color, default red for Top, green for Bottom
  isCircular?: boolean; // Circular background, default true
  fontSize?: number; // Font size, default 9-11
  padding?: number; // Padding, default 3
  label?: string; // Label text for arrow marks
}

Example

Add Single Text Mark

import { CandleView, StaticMarkDirection, StaticMarkType } from "candleview";
// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
// Top text mark (red background)
chart.addTextMark(
  1704067200, // timestamp
  "📈 Resistance", // text content
  StaticMarkDirection.Top, // direction: Top
  {
    textColor: "#ffffff",
    backgroundColor: "#ff4444",
    isCircular: true,
    fontSize: 10,
    padding: 4,
  },
);
// Bottom text mark (green background)
chart.addTextMark(1704067300, "📉 Support", StaticMarkDirection.Bottom, {
  textColor: "#ffffff",
  backgroundColor: "#44ff44",
  isCircular: true,
  fontSize: 10,
  padding: 4,
});

Add Single Arrow Mark

// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
// Top arrow (sell signal)
chart.addArrowMark(1704067400, StaticMarkDirection.Top, {
  label: "SELL",
  backgroundColor: "#ff0000",
});
// Bottom arrow (buy signal)
chart.addArrowMark(1704067500, StaticMarkDirection.Bottom, {
  label: "BUY",
  backgroundColor: "#00ff00",
});

Batch Add Text Marks

// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
chart.addTextMarks([
  {
    time: 1704067600,
    text: "📊 Open",
    direction: StaticMarkDirection.Top,
    options: { backgroundColor: "#ff8800", textColor: "#ffffff" },
  },
  {
    time: 1704067700,
    text: "💰 Add",
    direction: StaticMarkDirection.Bottom,
    options: {
      backgroundColor: "#00ff88",
      textColor: "#ffffff",
      isCircular: true,
    },
  },
  {
    time: 1704067800,
    text: "🎯 Take Profit",
    direction: StaticMarkDirection.Top,
    options: { backgroundColor: "#44aaff", textColor: "#ffffff", fontSize: 12 },
  },
]);

Batch Add Arrow Marks

// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
chart.addArrowMarks([
  {
    time: 1704067900,
    direction: StaticMarkDirection.Top,
    options: { label: "🔻 Sell" },
  },
  {
    time: 1704068000,
    direction: StaticMarkDirection.Bottom,
    options: { label: "🔺 Buy" },
  },
  {
    time: 1704068100,
    direction: StaticMarkDirection.Top,
    options: { label: "⚠️ Caution" },
  },
]);

Mixed Marks (Text + Arrow)

// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
chart.addStaticMarks([
  {
    time: 1704068200,
    text: "📉 Strong Support",
    direction: StaticMarkDirection.Bottom,
    type: StaticMarkType.Text,
    options: { backgroundColor: "#00cc88", textColor: "#ffffff" },
  },
  {
    time: 1704068300,
    text: "",
    direction: StaticMarkDirection.Top,
    type: StaticMarkType.Arrow,
    options: { backgroundColor: "#ff5566", label: "Resistance" },
  },
  {
    time: 1704068400,
    text: "🏆 Target Hit",
    direction: StaticMarkDirection.Top,
    type: StaticMarkType.Text,
    options: {
      backgroundColor: "#ff44aa",
      textColor: "#ffffff",
      fontSize: 11,
      isCircular: false,
      padding: 6,
    },
  },
]);

Manage Marks

// Create chart instance
const chart = new CandleView({
  container: document.getElementById("chart"),
  title: "BTC/USDT",
  theme: "dark",
  data: yourKlineData,
});
// Get mark count
const count = chart.getStaticMarkCount();
console.log(`Current mark count: ${count}`);
// Clear all marks
chart.clearAllStaticMarks();

Multi Panel Performance

Technical Indicators In The Sub Chart.

Preview

Draw Graphics

Fibonacci

Arc	Channel

Fan	Price Extension

Spiral	Time Expansion

Wedge	Retracement

Time Zoon	Circle

Gann

Box	Fan

Rectangle

Mark

Theme

Dark	Light

I18n

En	zh-CN

🔧 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

🌟 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

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
assets		assets
core		core
cvs-engine		cvs-engine
react		react
vue		vue
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
README_zh-CN.md		README_zh-CN.md

Latest commit

History

Folders and files

Repository files navigation

A programmable time-series data visualization and charting engine designed specifically for the financial industry.

⚙️ Install

🌐 Link

📚 Directory

🚀 Quick Start

Basic Configuration

JavaScript

React

Vue3

Vue2

Real-Time Data Processing

Open the main chart technical indicators and the sub-chart technical indicators

Static Mark

Static Mark Interface parameters

Example

Add Single Text Mark

Add Single Arrow Mark

Batch Add Text Marks

Batch Add Arrow Marks

Mixed Marks (Text + Arrow)

Manage Marks

Multi Panel Performance

Technical Indicators In The Sub Chart.

Preview

Draw Graphics

Fibonacci

Arc

Channel

Fan

Price Extension

Spiral

Time Expansion

Wedge

Retracement

Time Zoon

Circle

Gann

Box

Fan

Rectangle

Mark

Theme

Dark

Light

I18n

En

zh-CN

🔧 Configuration Options

⏰ Supported Timeframes

Second-based Timeframes

Minute-based Timeframes

Hour-based Timeframes

Day-based Timeframes

Week-based Timeframes

Month-based Timeframes

🌍 Supported Timezones

Americas

Europe

Asia

Pacific

Global

🌟 Core Features

📈 Supported Technical Indicators

Main Chart Indicators

Sub Chart Indicators

🎨 Supported Drawing Tools

Basic Tools

Channel Tools

Fibonacci Tools

Gann Tools

Pattern Tools

Elliott Wave

Geometric Shapes

Annotation Tools

Range Tools

Trading Tools