@candleview/core 2.9.6 → 2.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +803 -803
  2. package/dist/index.d.ts +32 -0
  3. package/dist/index.js +293 -240
  4. package/dist/index.mjs +2237 -1894
  5. package/package.json +75 -75
package/README.md CHANGED
@@ -1,803 +1,803 @@
1
- <p align="center">
2
- <picture>
3
- <source media="(prefers-color-scheme: dark)" srcset="./assets/logo/logo_imgtxt_dark_en.png">
4
- <source media="(prefers-color-scheme: light)" srcset="./assets/logo/logo_imgtxt_light_en.png">
5
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/logo/logo_imgtxt_light_en.png" alt="Portal" width="300">
6
- </picture>
7
- </p>
8
- <h4 align="center">
9
- A time-series data visualization and charting engine designed specifically for the financial industry.
10
- </h4>
11
- <p align="center">
12
- <a href="https://github.com/0xhappyboy/candleview/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL3.0-d1d1f6.svg?style=flat&labelColor=1C2C2E&color=BEC5C9&logo=googledocs&label=license&logoColor=BEC5C9" alt="License"></a>
13
- <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.0+-3178C6.svg?style=flat&labelColor=1C2C2E&color=007ACC&logo=typescript&logoColor=white" alt="TypeScript"></a>
14
- <a href="https://github.com/0xhappyboy/candleview/stargazers"><img src="https://img.shields.io/github/stars/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=FFD700&logo=github&logoColor=white&label=stars" alt="GitHub stars"></a>
15
- <a href="https://github.com/0xhappyboy/candleview/issues"><img src="https://img.shields.io/github/issues/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=FF6B6B&logo=github&logoColor=white&label=issues" alt="GitHub issues"></a>
16
- <a href="https://github.com/0xhappyboy/candleview/network/members"><img src="https://img.shields.io/github/forks/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=42A5F5&logo=github&logoColor=white&label=forks" alt="GitHub forks"></a>
17
- <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/v/candleview.svg?style=flat&labelColor=1C2C2E&color=FF5722&logo=npm&logoColor=white&label=npm%20version" alt="npm version"></a>
18
- <a href="https://github.com/0xhappyboy/candleview/releases"><img src="https://img.shields.io/github/v/tag/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=9C27B0&logo=github&logoColor=white&label=latest%20release" alt="GitHub release"></a>
19
- <a href="https://github.com/0xhappyboy/candleview/actions"><img src="https://img.shields.io/github/actions/workflow/status/0xhappyboy/candleview/release.yml?style=flat&labelColor=1C2C2E&color=4CAF50&logo=githubactions&logoColor=white&label=build" alt="Build Status"></a><a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dt/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=total%20downloads" alt="npm downloads"></a>
20
- <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dm/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=downloads/month" alt="npm downloads"></a>
21
- <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dw/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=downloads/week" alt="npm downloads"></a>
22
- <a href="https://twitter.com/intent/follow?screen_name=candleview"><img src="https://img.shields.io/twitter/follow/candleview" alt="CandleView" /></a>
23
- </p>
24
- <p align="center">
25
- <a href="./README_zh-CN.md">简体中文</a> | <a href="./README.md">English</a>
26
- </p>
27
-
28
- ## ⚙️ Install
29
-
30
- ```bash
31
- npm i @candleview/core
32
- ```
33
-
34
- ```bash
35
- yarn add @candleview/core
36
- ```
37
-
38
- # 🌐 Link
39
-
40
- | Website | Website(CN) | Emulator | Markets |
41
- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------- |
42
- | <a href="https://candleview.vercel.app/">Website</a> | <a href="https://www.candleview.cn/">Website(CN)</a> | <a href="https://candleview.vercel.app/application">Emulator</a> | <a href="https://candleview.vercel.app/markets">Markets</a> |
43
-
44
- # 📚 Directory
45
-
46
- | **directory** | **describe** |
47
- | :------------------- | :------------------------------------------------------------------------------------------------------------------- |
48
- | **core** | CandleView Engine Core. |
49
- | **react** | CandleView React Component. |
50
- | **ai-proxy-service** | This is the scaffolding project for CandleView AI services, which you can use to develop AI services for CandleView. |
51
- | **assets** | Asset Directory. |
52
-
53
- ## 🚀 Quick Start
54
-
55
- ```typescript
56
- // 1. Create with container element
57
- const chart = new CandleView({ container: document.getElementById("chart") });
58
- // 2. Create with container selector
59
- const chart = new CandleView({ containerSelector: "#chart" });
60
- // 3. Create with element ID
61
- const chart = new CandleView({ id: "chart" });
62
- // 4. Create with parent element (auto creates container)
63
- const chart = new CandleView({ parent: document.getElementById("wrapper") });
64
- // 5. Create with parent selector (auto creates container)
65
- const chart = new CandleView({ parentSelector: "#wrapper" });
66
- ```
67
-
68
- ### Basic Configuration
69
-
70
- ```typescript
71
- const candleView = new CandleView({
72
- container: document.getElementById("chart"), // Container DOM element
73
- title: "AAPL - Daily Chart", // Chart title
74
- data: candleData, // Candlestick data points array
75
- theme: "dark", // Theme: "dark" | "light"
76
- locale: "en", // Language: "en" | "zh-cn"
77
- showTopPanel: true, // Show top toolbar panel
78
- showLeftPanel: true, // Show left toolbar panel
79
- chartType: MainChartType.Candle, // Main chart type, e.g. candlestick chart
80
- activeTimeframe: TimeframeEnum.ONE_HOUR, // Active time period, e.g. 1 hour
81
- currentTimezone: TimezoneEnum.NEW_YORK, // Current timezone
82
- onToolSelect: (tool) => {
83
- console.log("Tool selected:", tool);
84
- },
85
- onTimeframeChange: (timeframe) => {
86
- console.log("Timeframe changed:", timeframe);
87
- },
88
- onChartTypeChange: (type) => {
89
- console.log("Chart type changed:", type);
90
- },
91
- onMainChartIndicatorSelect: (indicator) => {
92
- console.log("Main chart indicator selected:", indicator);
93
- },
94
- onSubChartIndicatorSelect: (indicators) => {
95
- console.log("Sub-chart indicators selected:", indicators);
96
- },
97
- onThemeToggle: (theme) => {
98
- console.log("Theme toggled:", theme);
99
- },
100
- onCameraClick: () => {
101
- console.log("Screenshot button clicked");
102
- },
103
- onFullscreenClick: () => {
104
- console.log("Fullscreen button clicked");
105
- },
106
- onTimezoneSelect: (timezone) => {
107
- console.log("Timezone changed:", timezone);
108
- },
109
- onTimeframeChangeCallback: (candleView, timeframe) => {
110
- console.log("Timeframe changed (callback):", timeframe);
111
- },
112
- });
113
- ```
114
-
115
- ### JavaScript
116
-
117
- ```typescript
118
- const container = document.getElementById("chart");
119
- const chart = new CandleView({ container, title: "BTC/USDT", data: klineData });
120
- ```
121
-
122
- ### React
123
-
124
- ```typescript
125
- const containerRef = useRef<HTMLDivElement>(null);
126
- useEffect(() => { if (containerRef.current) new CandleView({ container: containerRef.current }); }, []);
127
- return <div ref={containerRef} style={{ width: "100%", height: "500px" }} />;
128
-
129
- ```
130
-
131
- ### Vue3
132
-
133
- ```typescript
134
- const containerRef = ref<HTMLDivElement>(null);
135
- onMounted(() => {
136
- if (containerRef.value) new CandleView({ container: containerRef.value });
137
- });
138
- ```
139
-
140
- ```html
141
- <div ref="containerRef" style="width:100%;height:500px"></div>
142
- ```
143
-
144
- ### Vue2
145
-
146
- ```typescript
147
- mounted() { this.chart = new CandleView({ container: this.$refs.container }); },
148
- ```
149
-
150
- ```html
151
- <div ref="container" style="width:100%;height:500px"></div>
152
- ```
153
-
154
- ## Real-Time Data Processing
155
-
156
- ```typescript
157
- import { CandleView, ICandleViewDataPoint } from "candleview";
158
- let lastClose = 50000;
159
- let currentTime = Math.floor(Date.now() / 1000);
160
- function generateNewDataPoint(): ICandleViewDataPoint {
161
- const changePercent = (Math.random() - 0.5) * 0.01;
162
- const newClose = lastClose * (1 + changePercent);
163
- const highLowRange = Math.abs(newClose - lastClose) * 0.5;
164
- const newPoint = {
165
- time: currentTime++,
166
- open: lastClose,
167
- high: Math.max(lastClose, newClose) + Math.random() * highLowRange,
168
- low: Math.min(lastClose, newClose) - Math.random() * highLowRange,
169
- close: newClose,
170
- volume: Math.random() * 1000 + 500,
171
- };
172
-
173
- lastClose = newClose;
174
- return newPoint;
175
- }
176
- const chart = new CandleView({
177
- container: document.getElementById("chart"),
178
- title: "BTC/USDT",
179
- data: initialData,
180
- });
181
- const interval = setInterval(() => {
182
- const newPoint = generateNewDataPoint();
183
- chart.updateData([newPoint]);
184
- }, 1000);
185
- ```
186
-
187
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/real_time_data_demo.gif" alt="CandleView Static Mark" width="100%">
188
-
189
- ## Static Mark
190
-
191
- ### Static Mark Interface parameters
192
-
193
- ```typescript
194
- interface IStaticMarkOptions {
195
- textColor?: string; // Text color, default white
196
- backgroundColor?: string; // Background color, default red for Top, green for Bottom
197
- isCircular?: boolean; // Circular background, default true
198
- fontSize?: number; // Font size, default 9-11
199
- padding?: number; // Padding, default 3
200
- label?: string; // Label text for arrow marks
201
- }
202
- ```
203
-
204
- ### Example
205
-
206
- #### Add Single Text Mark
207
-
208
- ```typescript
209
- import { CandleView, StaticMarkDirection, StaticMarkType } from "candleview";
210
- // Create chart instance
211
- const chart = new CandleView({
212
- container: document.getElementById("chart"),
213
- title: "BTC/USDT",
214
- theme: "dark",
215
- data: yourKlineData,
216
- });
217
- // Top text mark (red background)
218
- chart.addTextMark(
219
- 1704067200, // timestamp
220
- "📈 Resistance", // text content
221
- StaticMarkDirection.Top, // direction: Top
222
- {
223
- textColor: "#ffffff",
224
- backgroundColor: "#ff4444",
225
- isCircular: true,
226
- fontSize: 10,
227
- padding: 4,
228
- },
229
- );
230
- // Bottom text mark (green background)
231
- chart.addTextMark(1704067300, "📉 Support", StaticMarkDirection.Bottom, {
232
- textColor: "#ffffff",
233
- backgroundColor: "#44ff44",
234
- isCircular: true,
235
- fontSize: 10,
236
- padding: 4,
237
- });
238
- ```
239
-
240
- #### Add Single Arrow Mark
241
-
242
- ```typescript
243
- // Create chart instance
244
- const chart = new CandleView({
245
- container: document.getElementById("chart"),
246
- title: "BTC/USDT",
247
- theme: "dark",
248
- data: yourKlineData,
249
- });
250
- // Top arrow (sell signal)
251
- chart.addArrowMark(1704067400, StaticMarkDirection.Top, {
252
- label: "SELL",
253
- backgroundColor: "#ff0000",
254
- });
255
- // Bottom arrow (buy signal)
256
- chart.addArrowMark(1704067500, StaticMarkDirection.Bottom, {
257
- label: "BUY",
258
- backgroundColor: "#00ff00",
259
- });
260
- ```
261
-
262
- #### Batch Add Text Marks
263
-
264
- ```typescript
265
- // Create chart instance
266
- const chart = new CandleView({
267
- container: document.getElementById("chart"),
268
- title: "BTC/USDT",
269
- theme: "dark",
270
- data: yourKlineData,
271
- });
272
- chart.addTextMarks([
273
- {
274
- time: 1704067600,
275
- text: "📊 Open",
276
- direction: StaticMarkDirection.Top,
277
- options: { backgroundColor: "#ff8800", textColor: "#ffffff" },
278
- },
279
- {
280
- time: 1704067700,
281
- text: "💰 Add",
282
- direction: StaticMarkDirection.Bottom,
283
- options: {
284
- backgroundColor: "#00ff88",
285
- textColor: "#ffffff",
286
- isCircular: true,
287
- },
288
- },
289
- {
290
- time: 1704067800,
291
- text: "🎯 Take Profit",
292
- direction: StaticMarkDirection.Top,
293
- options: { backgroundColor: "#44aaff", textColor: "#ffffff", fontSize: 12 },
294
- },
295
- ]);
296
- ```
297
-
298
- #### Batch Add Arrow Marks
299
-
300
- ```typescript
301
- // Create chart instance
302
- const chart = new CandleView({
303
- container: document.getElementById("chart"),
304
- title: "BTC/USDT",
305
- theme: "dark",
306
- data: yourKlineData,
307
- });
308
- chart.addArrowMarks([
309
- {
310
- time: 1704067900,
311
- direction: StaticMarkDirection.Top,
312
- options: { label: "🔻 Sell" },
313
- },
314
- {
315
- time: 1704068000,
316
- direction: StaticMarkDirection.Bottom,
317
- options: { label: "🔺 Buy" },
318
- },
319
- {
320
- time: 1704068100,
321
- direction: StaticMarkDirection.Top,
322
- options: { label: "⚠️ Caution" },
323
- },
324
- ]);
325
- ```
326
-
327
- #### Mixed Marks (Text + Arrow)
328
-
329
- ```typescript
330
- // Create chart instance
331
- const chart = new CandleView({
332
- container: document.getElementById("chart"),
333
- title: "BTC/USDT",
334
- theme: "dark",
335
- data: yourKlineData,
336
- });
337
- chart.addStaticMarks([
338
- {
339
- time: 1704068200,
340
- text: "📉 Strong Support",
341
- direction: StaticMarkDirection.Bottom,
342
- type: StaticMarkType.Text,
343
- options: { backgroundColor: "#00cc88", textColor: "#ffffff" },
344
- },
345
- {
346
- time: 1704068300,
347
- text: "",
348
- direction: StaticMarkDirection.Top,
349
- type: StaticMarkType.Arrow,
350
- options: { backgroundColor: "#ff5566", label: "Resistance" },
351
- },
352
- {
353
- time: 1704068400,
354
- text: "🏆 Target Hit",
355
- direction: StaticMarkDirection.Top,
356
- type: StaticMarkType.Text,
357
- options: {
358
- backgroundColor: "#ff44aa",
359
- textColor: "#ffffff",
360
- fontSize: 11,
361
- isCircular: false,
362
- padding: 6,
363
- },
364
- },
365
- ]);
366
- ```
367
-
368
- #### Manage Marks
369
-
370
- ```typescript
371
- // Create chart instance
372
- const chart = new CandleView({
373
- container: document.getElementById("chart"),
374
- title: "BTC/USDT",
375
- theme: "dark",
376
- data: yourKlineData,
377
- });
378
- // Get mark count
379
- const count = chart.getStaticMarkCount();
380
- console.log(`Current mark count: ${count}`);
381
- // Clear all marks
382
- chart.clearAllStaticMarks();
383
- ```
384
-
385
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/static_mark_demo.gif" alt="CandleView Static Mark" width="100%">
386
-
387
- ## Multi Panel Performance
388
-
389
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/candleview-multi-panel-2.gif" alt="CandleView Multi Panel" width="100%">
390
-
391
- ## Technical Indicators In The Sub Chart.
392
-
393
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/sub-chart.gif" width="100%">
394
-
395
- ## Preview
396
-
397
- ### Draw Graphics
398
-
399
- #### Fibonacci
400
-
401
- <table>
402
- <tr>
403
- <td align="left">
404
- <h4>Arc</h4>
405
- </td>
406
- <td align="left">
407
- <h4>Channel</h4>
408
- </td>
409
- </tr>
410
- <tr>
411
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-arc.gif" width="100%"></td>
412
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-channel.gif" width="100%"></td>
413
- </tr>
414
- <tr>
415
- <td align="left">
416
- <h4>Fan</h4>
417
- </td>
418
- <td align="left">
419
- <h4>Price Extension</h4>
420
- </td>
421
- </tr>
422
- <tr>
423
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-fan.gif" width="100%"></td>
424
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-price-extension.gif" width="100%"></td>
425
- </tr>
426
- <tr>
427
- <td align="left">
428
- <h4>Spiral</h4>
429
- </td>
430
- <td align="left">
431
- <h4>Time Expansion</h4>
432
- </td>
433
- </tr>
434
- <tr>
435
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-spiral.gif" width="100%"></td>
436
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-time-expansion.gif" width="100%"></td>
437
- </tr>
438
- <tr>
439
- <td align="left">
440
- <h4>Wedge</h4>
441
- </td>
442
- <td align="left">
443
- <h4>Retracement</h4>
444
- </td>
445
- </tr>
446
- <tr>
447
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-wedge.gif" width="100%"></td>
448
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-retracement.gif" width="100%"></td>
449
- </tr>
450
- <tr>
451
- <td align="left">
452
- <h4>Time Zoon</h4>
453
- </td>
454
- <td align="left">
455
- <h4>Circle</h4>
456
- </td>
457
- </tr>
458
- <tr>
459
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-time-zoon.gif" width="100%"></td>
460
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-circle.gif" width="100%"></td>
461
- </tr>
462
- </table>
463
-
464
- #### Gann
465
-
466
- <table>
467
- <tr>
468
- <td align="left">
469
- <h4>Box</h4>
470
- </td>
471
- <td align="left">
472
- <h4>Fan</h4>
473
- </tr>
474
- <tr>
475
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann/gann-box.gif" width="100%"></td>
476
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann/gann-fan.gif" width="100%"></td>
477
- </tr>
478
- <tr>
479
- <td align="left">
480
- <h4>Rectangle</h4>
481
- </td>
482
- </tr>
483
- <tr>
484
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann//gann-rectangle.gif" width="100%"></td>
485
- </tr>
486
- </table>
487
-
488
- #### Mark
489
-
490
- <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/mark.gif" width="100%">
491
-
492
- ### Theme
493
-
494
- <table>
495
- <tr>
496
- <td align="left">
497
- <h4>Dark</h4>
498
- </td>
499
- <td align="left">
500
- <h4>Light</h4>
501
- </td>
502
- </tr>
503
- <tr>
504
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_theme_dark.png" width="400"></td>
505
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_theme_light.png" width="400"></td>
506
- </tr>
507
- </table>
508
-
509
- ### I18n
510
-
511
- <table>
512
- <tr>
513
- <td align="left">
514
- <h4>En</h4>
515
- </td>
516
- <td align="left">
517
- <h4>zh-CN</h4>
518
- </td>
519
- </tr>
520
- <tr>
521
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_i18n_en.png" width="400"></td>
522
- <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_i18n_zh-CN.png" width="400"></td>
523
- </tr>
524
- </table>
525
-
526
- ## 🔧 Configuration Options
527
-
528
- ### ⏰ Supported Timeframes
529
-
530
- #### Second-based Timeframes
531
-
532
- | Value | Display Name | Description |
533
- | ------- | ------------------ | ----------- |
534
- | `'1S'` | 1 秒 / 1 Second | 1 second |
535
- | `'5S'` | 5 秒 / 5 Seconds | 5 seconds |
536
- | `'15S'` | 15 秒 / 15 Seconds | 15 seconds |
537
- | `'30S'` | 30 秒 / 30 Seconds | 30 seconds |
538
-
539
- #### Minute-based Timeframes
540
-
541
- | Value | Display Name | Description |
542
- | ------- | ------------------ | ----------- |
543
- | `'1M'` | 1 分 / 1 Minute | 1 minute |
544
- | `'3M'` | 3 分 / 3 Minutes | 3 minutes |
545
- | `'5M'` | 5 分 / 5 Minutes | 5 minutes |
546
- | `'15M'` | 15 分 / 15 Minutes | 15 minutes |
547
- | `'30M'` | 30 分 / 30 Minutes | 30 minutes |
548
- | `'45M'` | 45 分 / 45 Minutes | 45 minutes |
549
-
550
- #### Hour-based Timeframes
551
-
552
- | Value | Display Name | Description |
553
- | ------- | ------------------ | ----------- |
554
- | `'1H'` | 1 小时 / 1 Hour | 1 hour |
555
- | `'2H'` | 2 小时 / 2 Hours | 2 hours |
556
- | `'3H'` | 3 小时 / 3 Hours | 3 hours |
557
- | `'4H'` | 4 小时 / 4 Hours | 4 hours |
558
- | `'6H'` | 6 小时 / 6 Hours | 6 hours |
559
- | `'8H'` | 8 小时 / 8 Hours | 8 hours |
560
- | `'12H'` | 12 小时 / 12 Hours | 12 hours |
561
-
562
- #### Day-based Timeframes
563
-
564
- | Value | Display Name | Description |
565
- | ------ | ------------- | ----------- |
566
- | `'1D'` | 1 日 / 1 Day | 1 day |
567
- | `'3D'` | 3 日 / 3 Days | 3 days |
568
-
569
- #### Week-based Timeframes
570
-
571
- | Value | Display Name | Description |
572
- | ------ | -------------- | ----------- |
573
- | `'1W'` | 1 周 / 1 Week | 1 week |
574
- | `'2W'` | 2 周 / 2 Weeks | 2 weeks |
575
-
576
- #### Month-based Timeframes
577
-
578
- | Value | Display Name | Description |
579
- | -------- | --------------- | ----------- |
580
- | `'1MON'` | 1 月 / 1 Month | 1 month |
581
- | `'3MON'` | 3 月 / 3 Months | 3 months |
582
- | `'6MON'` | 6 月 / 6 Months | 6 months |
583
-
584
- ### 🌍 Supported Timezones
585
-
586
- #### Americas
587
-
588
- | Timezone ID | Display Name | UTC Offset | Major Cities |
589
- | ----------------------- | -------------------- | ----------- | -------------------------- |
590
- | `'America/New_York'` | 纽约 / New York | UTC-5/UTC-4 | New York, Washington DC |
591
- | `'America/Chicago'` | 芝加哥 / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
592
- | `'America/Denver'` | 丹佛 / Denver | UTC-7/UTC-6 | Denver, Phoenix |
593
- | `'America/Los_Angeles'` | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
594
- | `'America/Toronto'` | 多伦多 / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
595
-
596
- #### Europe
597
-
598
- | Timezone ID | Display Name | UTC Offset | Major Cities |
599
- | ----------------- | -------------------- | ----------- | -------------------- |
600
- | `'Europe/London'` | 伦敦 / London | UTC+0/UTC+1 | London, Dublin |
601
- | `'Europe/Paris'` | 巴黎 / Paris | UTC+1/UTC+2 | Paris, Berlin |
602
- | `'Europe/Berlin'` | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
603
- | `'Europe/Zurich'` | 苏黎世 / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
604
- | `'Europe/Moscow'` | 莫斯科 / Moscow | UTC+3 | Moscow, Istanbul |
605
-
606
- #### Asia
607
-
608
- | Timezone ID | Display Name | UTC Offset | Major Cities |
609
- | ------------------ | ------------------ | ---------- | ----------------------- |
610
- | `'Asia/Dubai'` | 迪拜 / Dubai | UTC+4 | Dubai, Abu Dhabi |
611
- | `'Asia/Karachi'` | 卡拉奇 / Karachi | UTC+5 | Karachi, Lahore |
612
- | `'Asia/Kolkata'` | 加尔各答 / Kolkata | UTC+5:30 | Kolkata, Mumbai |
613
- | `'Asia/Shanghai'` | 上海 / Shanghai | UTC+8 | Shanghai, Beijing |
614
- | `'Asia/Hong_Kong'` | 香港 / Hong Kong | UTC+8 | Hong Kong, Macau |
615
- | `'Asia/Singapore'` | 新加坡 / Singapore | UTC+8 | Singapore, Kuala Lumpur |
616
- | `'Asia/Tokyo'` | 东京 / Tokyo | UTC+9 | Tokyo, Seoul |
617
- | `'Asia/Seoul'` | 首尔 / Seoul | UTC+9 | Seoul, Pyongyang |
618
-
619
- #### Pacific
620
-
621
- | Timezone ID | Display Name | UTC Offset | Major Cities |
622
- | -------------------- | ----------------- | ------------- | -------------------- |
623
- | `'Australia/Sydney'` | 悉尼 / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
624
- | `'Pacific/Auckland'` | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
625
-
626
- #### Global
627
-
628
- | Timezone ID | Display Name | UTC Offset | Description |
629
- | ----------- | ------------ | ---------- | -------------------------- |
630
- | `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
631
-
632
- ## 🌟 Core Features
633
-
634
- ### 📈 Supported Technical Indicators
635
-
636
- #### Main Chart Indicators
637
-
638
- - Moving Average (MA)
639
- - Exponential Moving Average (EMA)
640
- - Bollinger Bands
641
- - Ichimoku Cloud
642
- - Donchian Channel
643
- - Envelope
644
- - Volume Weighted Average Price (VWAP)
645
- - Heat Map
646
- - Market Profile
647
-
648
- #### Sub Chart Indicators
649
-
650
- - Relative Strength Index (RSI)
651
- - Moving Average Convergence Divergence (MACD)
652
- - Volume
653
- - Parabolic SAR
654
- - KDJ Indicator
655
- - Average True Range (ATR)
656
- - Stochastic Oscillator
657
- - Commodity Channel Index (CCI)
658
- - Bollinger Bands Width
659
- - Average Directional Index (ADX)
660
- - On Balance Volume (OBV)
661
-
662
- ### 🎨 Supported Drawing Tools
663
-
664
- #### Basic Tools
665
-
666
- - Pencil, Pen, Brush, Marker Pen, Eraser
667
- - Line Segment, Horizontal Line, Vertical Line
668
- - Arrow Line, Thick Arrow Line
669
-
670
- #### Channel Tools
671
-
672
- - Parallel Channel
673
- - Linear Regression Channel
674
- - Equidistant Channel
675
- - Disjoint Channel
676
-
677
- #### Fibonacci Tools
678
-
679
- - Fibonacci Retracement
680
- - Fibonacci Time Zones
681
- - Fibonacci Arc
682
- - Fibonacci Circle
683
- - Fibonacci Spiral
684
- - Fibonacci Fan
685
- - Fibonacci Channel
686
- - Fibonacci Price Extension
687
- - Fibonacci Time Extension
688
-
689
- #### Gann Tools
690
-
691
- - Gann Fan
692
- - Gann Box
693
- - Gann Rectangle
694
-
695
- #### Pattern Tools
696
-
697
- - Andrew Pitchfork
698
- - Enhanced Andrew Pitchfork
699
- - Schiff Pitchfork
700
- - XABCD Pattern
701
- - Head and Shoulders
702
- - ABCD Pattern
703
- - Triangle ABCD Pattern
704
-
705
- #### Elliott Wave
706
-
707
- - Elliott Impulse Wave
708
- - Elliott Corrective Wave
709
- - Elliott Triangle
710
- - Elliott Double Combination
711
- - Elliott Triple Combination
712
-
713
- #### Geometric Shapes
714
-
715
- - Rectangle, Circle, Ellipse, Triangle
716
- - Sector, Curve, Double Curve
717
-
718
- #### Annotation Tools
719
-
720
- - Text Annotation, Price Note
721
- - Bubble Box, Pin, Signpost
722
- - Price Label, Flag Mark
723
- - Image Insertion
724
-
725
- #### Range Tools
726
-
727
- - Time Range, Price Range
728
- - Time-Price Range
729
- - Heat Map
730
-
731
- #### Trading Tools
732
-
733
- - Long Position, Short Position
734
- - Mock K-line
735
-
736
- ### ⏰ Supported Timeframes
737
-
738
- #### Second-based
739
-
740
- - 1s, 5s, 15s, 30s
741
-
742
- #### Minute-based
743
-
744
- - 1m, 3m, 5m, 15m
745
- - 30m, 45m
746
-
747
- #### Hour-based
748
-
749
- - 1h, 2h, 3h, 4h
750
- - 6h, 8h, 12h
751
-
752
- #### Day-based
753
-
754
- - 1d, 3d
755
-
756
- #### Week-based
757
-
758
- - 1w, 2w
759
-
760
- #### Month-based
761
-
762
- - 1M, 3M, 6M
763
-
764
- ### 🌍 Supported Timezones
765
-
766
- - New York (America/New_York)
767
- - Chicago (America/Chicago)
768
- - Denver (America/Denver)
769
- - Los Angeles (America/Los_Angeles)
770
- - Toronto (America/Toronto)
771
- - London (Europe/London)
772
- - Paris (Europe/Paris)
773
- - Frankfurt (Europe/Berlin)
774
- - Zurich (Europe/Zurich)
775
- - Moscow (Europe/Moscow)
776
- - Dubai (Asia/Dubai)
777
- - Karachi (Asia/Karachi)
778
- - Kolkata (Asia/Kolkata)
779
- - Shanghai (Asia/Shanghai)
780
- - Hong Kong (Asia/Hong_Kong)
781
- - Singapore (Asia/Singapore)
782
- - Tokyo (Asia/Tokyo)
783
- - Seoul (Asia/Seoul)
784
- - Sydney (Australia/Sydney)
785
- - Auckland (Pacific/Auckland)
786
- - UTC
787
-
788
- ### 🎯 Supported Chart Types
789
-
790
- - Candlestick Chart
791
- - Hollow Candlestick Chart
792
- - Bar Chart (OHLC)
793
- - BaseLine Chart
794
- - Line Chart
795
- - Area Chart
796
- - Step Line Chart
797
- - Heikin Ashi Chart
798
- - Histogram Chart
799
- - Line Break Chart
800
- - Mountain Chart
801
- - Baseline Area Chart
802
- - High Low Chart
803
- - HLCArea Chart
1
+ <p align="center">
2
+ <picture>
3
+ <source media="(prefers-color-scheme: dark)" srcset="./assets/logo/logo_imgtxt_dark_en.png">
4
+ <source media="(prefers-color-scheme: light)" srcset="./assets/logo/logo_imgtxt_light_en.png">
5
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/logo/logo_imgtxt_light_en.png" alt="Portal" width="300">
6
+ </picture>
7
+ </p>
8
+ <h4 align="center">
9
+ A time-series data visualization and charting engine designed specifically for the financial industry.
10
+ </h4>
11
+ <p align="center">
12
+ <a href="https://github.com/0xhappyboy/candleview/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL3.0-d1d1f6.svg?style=flat&labelColor=1C2C2E&color=BEC5C9&logo=googledocs&label=license&logoColor=BEC5C9" alt="License"></a>
13
+ <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.0+-3178C6.svg?style=flat&labelColor=1C2C2E&color=007ACC&logo=typescript&logoColor=white" alt="TypeScript"></a>
14
+ <a href="https://github.com/0xhappyboy/candleview/stargazers"><img src="https://img.shields.io/github/stars/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=FFD700&logo=github&logoColor=white&label=stars" alt="GitHub stars"></a>
15
+ <a href="https://github.com/0xhappyboy/candleview/issues"><img src="https://img.shields.io/github/issues/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=FF6B6B&logo=github&logoColor=white&label=issues" alt="GitHub issues"></a>
16
+ <a href="https://github.com/0xhappyboy/candleview/network/members"><img src="https://img.shields.io/github/forks/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=42A5F5&logo=github&logoColor=white&label=forks" alt="GitHub forks"></a>
17
+ <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/v/candleview.svg?style=flat&labelColor=1C2C2E&color=FF5722&logo=npm&logoColor=white&label=npm%20version" alt="npm version"></a>
18
+ <a href="https://github.com/0xhappyboy/candleview/releases"><img src="https://img.shields.io/github/v/tag/0xhappyboy/candleview.svg?style=flat&labelColor=1C2C2E&color=9C27B0&logo=github&logoColor=white&label=latest%20release" alt="GitHub release"></a>
19
+ <a href="https://github.com/0xhappyboy/candleview/actions"><img src="https://img.shields.io/github/actions/workflow/status/0xhappyboy/candleview/release.yml?style=flat&labelColor=1C2C2E&color=4CAF50&logo=githubactions&logoColor=white&label=build" alt="Build Status"></a><a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dt/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=total%20downloads" alt="npm downloads"></a>
20
+ <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dm/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=downloads/month" alt="npm downloads"></a>
21
+ <a href="https://www.npmjs.com/package/candleview"><img src="https://img.shields.io/npm/dw/candleview?style=flat&labelColor=1C2C2E&color=00BCD4&logo=npm&logoColor=white&label=downloads/week" alt="npm downloads"></a>
22
+ <a href="https://twitter.com/intent/follow?screen_name=candleview"><img src="https://img.shields.io/twitter/follow/candleview" alt="CandleView" /></a>
23
+ </p>
24
+ <p align="center">
25
+ <a href="./README_zh-CN.md">简体中文</a> | <a href="./README.md">English</a>
26
+ </p>
27
+
28
+ ## ⚙️ Install
29
+
30
+ ```bash
31
+ npm i @candleview/core
32
+ ```
33
+
34
+ ```bash
35
+ yarn add @candleview/core
36
+ ```
37
+
38
+ # 🌐 Link
39
+
40
+ | Website | Website(CN) | Emulator | Markets |
41
+ | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------- |
42
+ | <a href="https://candleview.vercel.app/">Website</a> | <a href="https://www.candleview.cn/">Website(CN)</a> | <a href="https://candleview.vercel.app/application">Emulator</a> | <a href="https://candleview.vercel.app/markets">Markets</a> |
43
+
44
+ # 📚 Directory
45
+
46
+ | **directory** | **describe** |
47
+ | :------------------- | :------------------------------------------------------------------------------------------------------------------- |
48
+ | **core** | CandleView Engine Core. |
49
+ | **react** | CandleView React Component. |
50
+ | **ai-proxy-service** | This is the scaffolding project for CandleView AI services, which you can use to develop AI services for CandleView. |
51
+ | **assets** | Asset Directory. |
52
+
53
+ ## 🚀 Quick Start
54
+
55
+ ```typescript
56
+ // 1. Create with container element
57
+ const chart = new CandleView({ container: document.getElementById("chart") });
58
+ // 2. Create with container selector
59
+ const chart = new CandleView({ containerSelector: "#chart" });
60
+ // 3. Create with element ID
61
+ const chart = new CandleView({ id: "chart" });
62
+ // 4. Create with parent element (auto creates container)
63
+ const chart = new CandleView({ parent: document.getElementById("wrapper") });
64
+ // 5. Create with parent selector (auto creates container)
65
+ const chart = new CandleView({ parentSelector: "#wrapper" });
66
+ ```
67
+
68
+ ### Basic Configuration
69
+
70
+ ```typescript
71
+ const candleView = new CandleView({
72
+ container: document.getElementById("chart"), // Container DOM element
73
+ title: "AAPL - Daily Chart", // Chart title
74
+ data: candleData, // Candlestick data points array
75
+ theme: "dark", // Theme: "dark" | "light"
76
+ locale: "en", // Language: "en" | "zh-cn"
77
+ showTopPanel: true, // Show top toolbar panel
78
+ showLeftPanel: true, // Show left toolbar panel
79
+ chartType: MainChartType.Candle, // Main chart type, e.g. candlestick chart
80
+ activeTimeframe: TimeframeEnum.ONE_HOUR, // Active time period, e.g. 1 hour
81
+ currentTimezone: TimezoneEnum.NEW_YORK, // Current timezone
82
+ onToolSelect: (tool) => {
83
+ console.log("Tool selected:", tool);
84
+ },
85
+ onTimeframeChange: (timeframe) => {
86
+ console.log("Timeframe changed:", timeframe);
87
+ },
88
+ onChartTypeChange: (type) => {
89
+ console.log("Chart type changed:", type);
90
+ },
91
+ onMainChartIndicatorSelect: (indicator) => {
92
+ console.log("Main chart indicator selected:", indicator);
93
+ },
94
+ onSubChartIndicatorSelect: (indicators) => {
95
+ console.log("Sub-chart indicators selected:", indicators);
96
+ },
97
+ onThemeToggle: (theme) => {
98
+ console.log("Theme toggled:", theme);
99
+ },
100
+ onCameraClick: () => {
101
+ console.log("Screenshot button clicked");
102
+ },
103
+ onFullscreenClick: () => {
104
+ console.log("Fullscreen button clicked");
105
+ },
106
+ onTimezoneSelect: (timezone) => {
107
+ console.log("Timezone changed:", timezone);
108
+ },
109
+ onTimeframeChangeCallback: (candleView, timeframe) => {
110
+ console.log("Timeframe changed (callback):", timeframe);
111
+ },
112
+ });
113
+ ```
114
+
115
+ ### JavaScript
116
+
117
+ ```typescript
118
+ const container = document.getElementById("chart");
119
+ const chart = new CandleView({ container, title: "BTC/USDT", data: klineData });
120
+ ```
121
+
122
+ ### React
123
+
124
+ ```typescript
125
+ const containerRef = useRef<HTMLDivElement>(null);
126
+ useEffect(() => { if (containerRef.current) new CandleView({ container: containerRef.current }); }, []);
127
+ return <div ref={containerRef} style={{ width: "100%", height: "500px" }} />;
128
+
129
+ ```
130
+
131
+ ### Vue3
132
+
133
+ ```typescript
134
+ const containerRef = ref<HTMLDivElement>(null);
135
+ onMounted(() => {
136
+ if (containerRef.value) new CandleView({ container: containerRef.value });
137
+ });
138
+ ```
139
+
140
+ ```html
141
+ <div ref="containerRef" style="width:100%;height:500px"></div>
142
+ ```
143
+
144
+ ### Vue2
145
+
146
+ ```typescript
147
+ mounted() { this.chart = new CandleView({ container: this.$refs.container }); },
148
+ ```
149
+
150
+ ```html
151
+ <div ref="container" style="width:100%;height:500px"></div>
152
+ ```
153
+
154
+ ## Real-Time Data Processing
155
+
156
+ ```typescript
157
+ import { CandleView, ICandleViewDataPoint } from "candleview";
158
+ let lastClose = 50000;
159
+ let currentTime = Math.floor(Date.now() / 1000);
160
+ function generateNewDataPoint(): ICandleViewDataPoint {
161
+ const changePercent = (Math.random() - 0.5) * 0.01;
162
+ const newClose = lastClose * (1 + changePercent);
163
+ const highLowRange = Math.abs(newClose - lastClose) * 0.5;
164
+ const newPoint = {
165
+ time: currentTime++,
166
+ open: lastClose,
167
+ high: Math.max(lastClose, newClose) + Math.random() * highLowRange,
168
+ low: Math.min(lastClose, newClose) - Math.random() * highLowRange,
169
+ close: newClose,
170
+ volume: Math.random() * 1000 + 500,
171
+ };
172
+
173
+ lastClose = newClose;
174
+ return newPoint;
175
+ }
176
+ const chart = new CandleView({
177
+ container: document.getElementById("chart"),
178
+ title: "BTC/USDT",
179
+ data: initialData,
180
+ });
181
+ const interval = setInterval(() => {
182
+ const newPoint = generateNewDataPoint();
183
+ chart.updateData([newPoint]);
184
+ }, 1000);
185
+ ```
186
+
187
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/real_time_data_demo.gif" alt="CandleView Static Mark" width="100%">
188
+
189
+ ## Static Mark
190
+
191
+ ### Static Mark Interface parameters
192
+
193
+ ```typescript
194
+ interface IStaticMarkOptions {
195
+ textColor?: string; // Text color, default white
196
+ backgroundColor?: string; // Background color, default red for Top, green for Bottom
197
+ isCircular?: boolean; // Circular background, default true
198
+ fontSize?: number; // Font size, default 9-11
199
+ padding?: number; // Padding, default 3
200
+ label?: string; // Label text for arrow marks
201
+ }
202
+ ```
203
+
204
+ ### Example
205
+
206
+ #### Add Single Text Mark
207
+
208
+ ```typescript
209
+ import { CandleView, StaticMarkDirection, StaticMarkType } from "candleview";
210
+ // Create chart instance
211
+ const chart = new CandleView({
212
+ container: document.getElementById("chart"),
213
+ title: "BTC/USDT",
214
+ theme: "dark",
215
+ data: yourKlineData,
216
+ });
217
+ // Top text mark (red background)
218
+ chart.addTextMark(
219
+ 1704067200, // timestamp
220
+ "📈 Resistance", // text content
221
+ StaticMarkDirection.Top, // direction: Top
222
+ {
223
+ textColor: "#ffffff",
224
+ backgroundColor: "#ff4444",
225
+ isCircular: true,
226
+ fontSize: 10,
227
+ padding: 4,
228
+ },
229
+ );
230
+ // Bottom text mark (green background)
231
+ chart.addTextMark(1704067300, "📉 Support", StaticMarkDirection.Bottom, {
232
+ textColor: "#ffffff",
233
+ backgroundColor: "#44ff44",
234
+ isCircular: true,
235
+ fontSize: 10,
236
+ padding: 4,
237
+ });
238
+ ```
239
+
240
+ #### Add Single Arrow Mark
241
+
242
+ ```typescript
243
+ // Create chart instance
244
+ const chart = new CandleView({
245
+ container: document.getElementById("chart"),
246
+ title: "BTC/USDT",
247
+ theme: "dark",
248
+ data: yourKlineData,
249
+ });
250
+ // Top arrow (sell signal)
251
+ chart.addArrowMark(1704067400, StaticMarkDirection.Top, {
252
+ label: "SELL",
253
+ backgroundColor: "#ff0000",
254
+ });
255
+ // Bottom arrow (buy signal)
256
+ chart.addArrowMark(1704067500, StaticMarkDirection.Bottom, {
257
+ label: "BUY",
258
+ backgroundColor: "#00ff00",
259
+ });
260
+ ```
261
+
262
+ #### Batch Add Text Marks
263
+
264
+ ```typescript
265
+ // Create chart instance
266
+ const chart = new CandleView({
267
+ container: document.getElementById("chart"),
268
+ title: "BTC/USDT",
269
+ theme: "dark",
270
+ data: yourKlineData,
271
+ });
272
+ chart.addTextMarks([
273
+ {
274
+ time: 1704067600,
275
+ text: "📊 Open",
276
+ direction: StaticMarkDirection.Top,
277
+ options: { backgroundColor: "#ff8800", textColor: "#ffffff" },
278
+ },
279
+ {
280
+ time: 1704067700,
281
+ text: "💰 Add",
282
+ direction: StaticMarkDirection.Bottom,
283
+ options: {
284
+ backgroundColor: "#00ff88",
285
+ textColor: "#ffffff",
286
+ isCircular: true,
287
+ },
288
+ },
289
+ {
290
+ time: 1704067800,
291
+ text: "🎯 Take Profit",
292
+ direction: StaticMarkDirection.Top,
293
+ options: { backgroundColor: "#44aaff", textColor: "#ffffff", fontSize: 12 },
294
+ },
295
+ ]);
296
+ ```
297
+
298
+ #### Batch Add Arrow Marks
299
+
300
+ ```typescript
301
+ // Create chart instance
302
+ const chart = new CandleView({
303
+ container: document.getElementById("chart"),
304
+ title: "BTC/USDT",
305
+ theme: "dark",
306
+ data: yourKlineData,
307
+ });
308
+ chart.addArrowMarks([
309
+ {
310
+ time: 1704067900,
311
+ direction: StaticMarkDirection.Top,
312
+ options: { label: "🔻 Sell" },
313
+ },
314
+ {
315
+ time: 1704068000,
316
+ direction: StaticMarkDirection.Bottom,
317
+ options: { label: "🔺 Buy" },
318
+ },
319
+ {
320
+ time: 1704068100,
321
+ direction: StaticMarkDirection.Top,
322
+ options: { label: "⚠️ Caution" },
323
+ },
324
+ ]);
325
+ ```
326
+
327
+ #### Mixed Marks (Text + Arrow)
328
+
329
+ ```typescript
330
+ // Create chart instance
331
+ const chart = new CandleView({
332
+ container: document.getElementById("chart"),
333
+ title: "BTC/USDT",
334
+ theme: "dark",
335
+ data: yourKlineData,
336
+ });
337
+ chart.addStaticMarks([
338
+ {
339
+ time: 1704068200,
340
+ text: "📉 Strong Support",
341
+ direction: StaticMarkDirection.Bottom,
342
+ type: StaticMarkType.Text,
343
+ options: { backgroundColor: "#00cc88", textColor: "#ffffff" },
344
+ },
345
+ {
346
+ time: 1704068300,
347
+ text: "",
348
+ direction: StaticMarkDirection.Top,
349
+ type: StaticMarkType.Arrow,
350
+ options: { backgroundColor: "#ff5566", label: "Resistance" },
351
+ },
352
+ {
353
+ time: 1704068400,
354
+ text: "🏆 Target Hit",
355
+ direction: StaticMarkDirection.Top,
356
+ type: StaticMarkType.Text,
357
+ options: {
358
+ backgroundColor: "#ff44aa",
359
+ textColor: "#ffffff",
360
+ fontSize: 11,
361
+ isCircular: false,
362
+ padding: 6,
363
+ },
364
+ },
365
+ ]);
366
+ ```
367
+
368
+ #### Manage Marks
369
+
370
+ ```typescript
371
+ // Create chart instance
372
+ const chart = new CandleView({
373
+ container: document.getElementById("chart"),
374
+ title: "BTC/USDT",
375
+ theme: "dark",
376
+ data: yourKlineData,
377
+ });
378
+ // Get mark count
379
+ const count = chart.getStaticMarkCount();
380
+ console.log(`Current mark count: ${count}`);
381
+ // Clear all marks
382
+ chart.clearAllStaticMarks();
383
+ ```
384
+
385
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/static_mark_demo.gif" alt="CandleView Static Mark" width="100%">
386
+
387
+ ## Multi Panel Performance
388
+
389
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/candleview-multi-panel-2.gif" alt="CandleView Multi Panel" width="100%">
390
+
391
+ ## Technical Indicators In The Sub Chart.
392
+
393
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/sub-chart.gif" width="100%">
394
+
395
+ ## Preview
396
+
397
+ ### Draw Graphics
398
+
399
+ #### Fibonacci
400
+
401
+ <table>
402
+ <tr>
403
+ <td align="left">
404
+ <h4>Arc</h4>
405
+ </td>
406
+ <td align="left">
407
+ <h4>Channel</h4>
408
+ </td>
409
+ </tr>
410
+ <tr>
411
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-arc.gif" width="100%"></td>
412
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-channel.gif" width="100%"></td>
413
+ </tr>
414
+ <tr>
415
+ <td align="left">
416
+ <h4>Fan</h4>
417
+ </td>
418
+ <td align="left">
419
+ <h4>Price Extension</h4>
420
+ </td>
421
+ </tr>
422
+ <tr>
423
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-fan.gif" width="100%"></td>
424
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-price-extension.gif" width="100%"></td>
425
+ </tr>
426
+ <tr>
427
+ <td align="left">
428
+ <h4>Spiral</h4>
429
+ </td>
430
+ <td align="left">
431
+ <h4>Time Expansion</h4>
432
+ </td>
433
+ </tr>
434
+ <tr>
435
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-spiral.gif" width="100%"></td>
436
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-time-expansion.gif" width="100%"></td>
437
+ </tr>
438
+ <tr>
439
+ <td align="left">
440
+ <h4>Wedge</h4>
441
+ </td>
442
+ <td align="left">
443
+ <h4>Retracement</h4>
444
+ </td>
445
+ </tr>
446
+ <tr>
447
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-wedge.gif" width="100%"></td>
448
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-retracement.gif" width="100%"></td>
449
+ </tr>
450
+ <tr>
451
+ <td align="left">
452
+ <h4>Time Zoon</h4>
453
+ </td>
454
+ <td align="left">
455
+ <h4>Circle</h4>
456
+ </td>
457
+ </tr>
458
+ <tr>
459
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-time-zoon.gif" width="100%"></td>
460
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/fibonacci/fibonacci-circle.gif" width="100%"></td>
461
+ </tr>
462
+ </table>
463
+
464
+ #### Gann
465
+
466
+ <table>
467
+ <tr>
468
+ <td align="left">
469
+ <h4>Box</h4>
470
+ </td>
471
+ <td align="left">
472
+ <h4>Fan</h4>
473
+ </tr>
474
+ <tr>
475
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann/gann-box.gif" width="100%"></td>
476
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann/gann-fan.gif" width="100%"></td>
477
+ </tr>
478
+ <tr>
479
+ <td align="left">
480
+ <h4>Rectangle</h4>
481
+ </td>
482
+ </tr>
483
+ <tr>
484
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/gann//gann-rectangle.gif" width="100%"></td>
485
+ </tr>
486
+ </table>
487
+
488
+ #### Mark
489
+
490
+ <img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/mark.gif" width="100%">
491
+
492
+ ### Theme
493
+
494
+ <table>
495
+ <tr>
496
+ <td align="left">
497
+ <h4>Dark</h4>
498
+ </td>
499
+ <td align="left">
500
+ <h4>Light</h4>
501
+ </td>
502
+ </tr>
503
+ <tr>
504
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_theme_dark.png" width="400"></td>
505
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_theme_light.png" width="400"></td>
506
+ </tr>
507
+ </table>
508
+
509
+ ### I18n
510
+
511
+ <table>
512
+ <tr>
513
+ <td align="left">
514
+ <h4>En</h4>
515
+ </td>
516
+ <td align="left">
517
+ <h4>zh-CN</h4>
518
+ </td>
519
+ </tr>
520
+ <tr>
521
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_i18n_en.png" width="400"></td>
522
+ <td align="center"><img src="https://raw.githubusercontent.com/0xhappyboy/candleview/main/assets/preview_i18n_zh-CN.png" width="400"></td>
523
+ </tr>
524
+ </table>
525
+
526
+ ## 🔧 Configuration Options
527
+
528
+ ### ⏰ Supported Timeframes
529
+
530
+ #### Second-based Timeframes
531
+
532
+ | Value | Display Name | Description |
533
+ | ------- | ------------------ | ----------- |
534
+ | `'1S'` | 1 秒 / 1 Second | 1 second |
535
+ | `'5S'` | 5 秒 / 5 Seconds | 5 seconds |
536
+ | `'15S'` | 15 秒 / 15 Seconds | 15 seconds |
537
+ | `'30S'` | 30 秒 / 30 Seconds | 30 seconds |
538
+
539
+ #### Minute-based Timeframes
540
+
541
+ | Value | Display Name | Description |
542
+ | ------- | ------------------ | ----------- |
543
+ | `'1M'` | 1 分 / 1 Minute | 1 minute |
544
+ | `'3M'` | 3 分 / 3 Minutes | 3 minutes |
545
+ | `'5M'` | 5 分 / 5 Minutes | 5 minutes |
546
+ | `'15M'` | 15 分 / 15 Minutes | 15 minutes |
547
+ | `'30M'` | 30 分 / 30 Minutes | 30 minutes |
548
+ | `'45M'` | 45 分 / 45 Minutes | 45 minutes |
549
+
550
+ #### Hour-based Timeframes
551
+
552
+ | Value | Display Name | Description |
553
+ | ------- | ------------------ | ----------- |
554
+ | `'1H'` | 1 小时 / 1 Hour | 1 hour |
555
+ | `'2H'` | 2 小时 / 2 Hours | 2 hours |
556
+ | `'3H'` | 3 小时 / 3 Hours | 3 hours |
557
+ | `'4H'` | 4 小时 / 4 Hours | 4 hours |
558
+ | `'6H'` | 6 小时 / 6 Hours | 6 hours |
559
+ | `'8H'` | 8 小时 / 8 Hours | 8 hours |
560
+ | `'12H'` | 12 小时 / 12 Hours | 12 hours |
561
+
562
+ #### Day-based Timeframes
563
+
564
+ | Value | Display Name | Description |
565
+ | ------ | ------------- | ----------- |
566
+ | `'1D'` | 1 日 / 1 Day | 1 day |
567
+ | `'3D'` | 3 日 / 3 Days | 3 days |
568
+
569
+ #### Week-based Timeframes
570
+
571
+ | Value | Display Name | Description |
572
+ | ------ | -------------- | ----------- |
573
+ | `'1W'` | 1 周 / 1 Week | 1 week |
574
+ | `'2W'` | 2 周 / 2 Weeks | 2 weeks |
575
+
576
+ #### Month-based Timeframes
577
+
578
+ | Value | Display Name | Description |
579
+ | -------- | --------------- | ----------- |
580
+ | `'1MON'` | 1 月 / 1 Month | 1 month |
581
+ | `'3MON'` | 3 月 / 3 Months | 3 months |
582
+ | `'6MON'` | 6 月 / 6 Months | 6 months |
583
+
584
+ ### 🌍 Supported Timezones
585
+
586
+ #### Americas
587
+
588
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
589
+ | ----------------------- | -------------------- | ----------- | -------------------------- |
590
+ | `'America/New_York'` | 纽约 / New York | UTC-5/UTC-4 | New York, Washington DC |
591
+ | `'America/Chicago'` | 芝加哥 / Chicago | UTC-6/UTC-5 | Chicago, Dallas |
592
+ | `'America/Denver'` | 丹佛 / Denver | UTC-7/UTC-6 | Denver, Phoenix |
593
+ | `'America/Los_Angeles'` | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
594
+ | `'America/Toronto'` | 多伦多 / Toronto | UTC-5/UTC-4 | Toronto, Montreal |
595
+
596
+ #### Europe
597
+
598
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
599
+ | ----------------- | -------------------- | ----------- | -------------------- |
600
+ | `'Europe/London'` | 伦敦 / London | UTC+0/UTC+1 | London, Dublin |
601
+ | `'Europe/Paris'` | 巴黎 / Paris | UTC+1/UTC+2 | Paris, Berlin |
602
+ | `'Europe/Berlin'` | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
603
+ | `'Europe/Zurich'` | 苏黎世 / Zurich | UTC+1/UTC+2 | Zurich, Vienna |
604
+ | `'Europe/Moscow'` | 莫斯科 / Moscow | UTC+3 | Moscow, Istanbul |
605
+
606
+ #### Asia
607
+
608
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
609
+ | ------------------ | ------------------ | ---------- | ----------------------- |
610
+ | `'Asia/Dubai'` | 迪拜 / Dubai | UTC+4 | Dubai, Abu Dhabi |
611
+ | `'Asia/Karachi'` | 卡拉奇 / Karachi | UTC+5 | Karachi, Lahore |
612
+ | `'Asia/Kolkata'` | 加尔各答 / Kolkata | UTC+5:30 | Kolkata, Mumbai |
613
+ | `'Asia/Shanghai'` | 上海 / Shanghai | UTC+8 | Shanghai, Beijing |
614
+ | `'Asia/Hong_Kong'` | 香港 / Hong Kong | UTC+8 | Hong Kong, Macau |
615
+ | `'Asia/Singapore'` | 新加坡 / Singapore | UTC+8 | Singapore, Kuala Lumpur |
616
+ | `'Asia/Tokyo'` | 东京 / Tokyo | UTC+9 | Tokyo, Seoul |
617
+ | `'Asia/Seoul'` | 首尔 / Seoul | UTC+9 | Seoul, Pyongyang |
618
+
619
+ #### Pacific
620
+
621
+ | Timezone ID | Display Name | UTC Offset | Major Cities |
622
+ | -------------------- | ----------------- | ------------- | -------------------- |
623
+ | `'Australia/Sydney'` | 悉尼 / Sydney | UTC+10/UTC+11 | Sydney, Melbourne |
624
+ | `'Pacific/Auckland'` | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
625
+
626
+ #### Global
627
+
628
+ | Timezone ID | Display Name | UTC Offset | Description |
629
+ | ----------- | ------------ | ---------- | -------------------------- |
630
+ | `'UTC'` | UTC / UTC | UTC+0 | Coordinated Universal Time |
631
+
632
+ ## 🌟 Core Features
633
+
634
+ ### 📈 Supported Technical Indicators
635
+
636
+ #### Main Chart Indicators
637
+
638
+ - Moving Average (MA)
639
+ - Exponential Moving Average (EMA)
640
+ - Bollinger Bands
641
+ - Ichimoku Cloud
642
+ - Donchian Channel
643
+ - Envelope
644
+ - Volume Weighted Average Price (VWAP)
645
+ - Heat Map
646
+ - Market Profile
647
+
648
+ #### Sub Chart Indicators
649
+
650
+ - Relative Strength Index (RSI)
651
+ - Moving Average Convergence Divergence (MACD)
652
+ - Volume
653
+ - Parabolic SAR
654
+ - KDJ Indicator
655
+ - Average True Range (ATR)
656
+ - Stochastic Oscillator
657
+ - Commodity Channel Index (CCI)
658
+ - Bollinger Bands Width
659
+ - Average Directional Index (ADX)
660
+ - On Balance Volume (OBV)
661
+
662
+ ### 🎨 Supported Drawing Tools
663
+
664
+ #### Basic Tools
665
+
666
+ - Pencil, Pen, Brush, Marker Pen, Eraser
667
+ - Line Segment, Horizontal Line, Vertical Line
668
+ - Arrow Line, Thick Arrow Line
669
+
670
+ #### Channel Tools
671
+
672
+ - Parallel Channel
673
+ - Linear Regression Channel
674
+ - Equidistant Channel
675
+ - Disjoint Channel
676
+
677
+ #### Fibonacci Tools
678
+
679
+ - Fibonacci Retracement
680
+ - Fibonacci Time Zones
681
+ - Fibonacci Arc
682
+ - Fibonacci Circle
683
+ - Fibonacci Spiral
684
+ - Fibonacci Fan
685
+ - Fibonacci Channel
686
+ - Fibonacci Price Extension
687
+ - Fibonacci Time Extension
688
+
689
+ #### Gann Tools
690
+
691
+ - Gann Fan
692
+ - Gann Box
693
+ - Gann Rectangle
694
+
695
+ #### Pattern Tools
696
+
697
+ - Andrew Pitchfork
698
+ - Enhanced Andrew Pitchfork
699
+ - Schiff Pitchfork
700
+ - XABCD Pattern
701
+ - Head and Shoulders
702
+ - ABCD Pattern
703
+ - Triangle ABCD Pattern
704
+
705
+ #### Elliott Wave
706
+
707
+ - Elliott Impulse Wave
708
+ - Elliott Corrective Wave
709
+ - Elliott Triangle
710
+ - Elliott Double Combination
711
+ - Elliott Triple Combination
712
+
713
+ #### Geometric Shapes
714
+
715
+ - Rectangle, Circle, Ellipse, Triangle
716
+ - Sector, Curve, Double Curve
717
+
718
+ #### Annotation Tools
719
+
720
+ - Text Annotation, Price Note
721
+ - Bubble Box, Pin, Signpost
722
+ - Price Label, Flag Mark
723
+ - Image Insertion
724
+
725
+ #### Range Tools
726
+
727
+ - Time Range, Price Range
728
+ - Time-Price Range
729
+ - Heat Map
730
+
731
+ #### Trading Tools
732
+
733
+ - Long Position, Short Position
734
+ - Mock K-line
735
+
736
+ ### ⏰ Supported Timeframes
737
+
738
+ #### Second-based
739
+
740
+ - 1s, 5s, 15s, 30s
741
+
742
+ #### Minute-based
743
+
744
+ - 1m, 3m, 5m, 15m
745
+ - 30m, 45m
746
+
747
+ #### Hour-based
748
+
749
+ - 1h, 2h, 3h, 4h
750
+ - 6h, 8h, 12h
751
+
752
+ #### Day-based
753
+
754
+ - 1d, 3d
755
+
756
+ #### Week-based
757
+
758
+ - 1w, 2w
759
+
760
+ #### Month-based
761
+
762
+ - 1M, 3M, 6M
763
+
764
+ ### 🌍 Supported Timezones
765
+
766
+ - New York (America/New_York)
767
+ - Chicago (America/Chicago)
768
+ - Denver (America/Denver)
769
+ - Los Angeles (America/Los_Angeles)
770
+ - Toronto (America/Toronto)
771
+ - London (Europe/London)
772
+ - Paris (Europe/Paris)
773
+ - Frankfurt (Europe/Berlin)
774
+ - Zurich (Europe/Zurich)
775
+ - Moscow (Europe/Moscow)
776
+ - Dubai (Asia/Dubai)
777
+ - Karachi (Asia/Karachi)
778
+ - Kolkata (Asia/Kolkata)
779
+ - Shanghai (Asia/Shanghai)
780
+ - Hong Kong (Asia/Hong_Kong)
781
+ - Singapore (Asia/Singapore)
782
+ - Tokyo (Asia/Tokyo)
783
+ - Seoul (Asia/Seoul)
784
+ - Sydney (Australia/Sydney)
785
+ - Auckland (Pacific/Auckland)
786
+ - UTC
787
+
788
+ ### 🎯 Supported Chart Types
789
+
790
+ - Candlestick Chart
791
+ - Hollow Candlestick Chart
792
+ - Bar Chart (OHLC)
793
+ - BaseLine Chart
794
+ - Line Chart
795
+ - Area Chart
796
+ - Step Line Chart
797
+ - Heikin Ashi Chart
798
+ - Histogram Chart
799
+ - Line Break Chart
800
+ - Mountain Chart
801
+ - Baseline Area Chart
802
+ - High Low Chart
803
+ - HLCArea Chart