@tranding-custom-chart/react 2.0.0 → 2.1.0
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.
- package/README.md +331 -36
- package/package.json +59 -5
package/README.md
CHANGED
|
@@ -1,57 +1,352 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
>
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@tranding-custom-chart/core)
|
|
6
|
+
[](https://www.npmjs.com/package/@tranding-custom-chart/react)
|
|
7
|
+
[](https://www.npmjs.com/package/@tranding-custom-chart/renderer-canvas)
|
|
8
|
+
[](https://www.npmjs.com/package/@tranding-custom-chart/financial)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
[](#)
|
|
11
|
+
[](#)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 🌟 Key Highlights
|
|
16
|
+
|
|
17
|
+
- **⚡ Blazing 60–120 FPS Performance**: Sub-millisecond Canvas 2D dual-buffer rendering pipeline capable of streaming 5,000 to 50,000+ data points with zero frame drops using LTTB (Largest-Triangle-Three-Buckets) decimation.
|
|
18
|
+
- **🌐 100% Framework-Agnostic Core**: Mathematical foundations, scales, indicators, and Canvas 2D renderers operate with strictly zero UI framework dependencies. Works seamlessly in React, Vanilla JS, Angular, Vue, and Svelte.
|
|
19
|
+
- **📈 Pro Financial Suite**: 15+ financial series types, including Candlestick, Hollow Candlestick, Heikin-Ashi, Renko Bricks, Kagi, Three-Line Break, OHLC Bar, High-Low Range, HLC Area, Baseline, and Visible Range Volume Profile (VRVP).
|
|
20
|
+
- **📊 General & Statistical Visualizations**: Line, Bezier Curved Spline, Step Line, Bar, Horizontal Bar, Stacked Bar, Area, Pie, Doughnut, Polar Area, Radar, Scatter Plot, Bubble Chart, Box Plot, and Heatmap.
|
|
21
|
+
- **🎯 Built-In Technical Indicators**: Supertrend (ATR 10 × 3 with reversal arrows), Volume Profile with POC and Value Area, ATR, MACD (12/26/9), RSI (14), Bollinger Bands, SMA, EMA, WMA, and session-anchored VWAP.
|
|
22
|
+
- **🖊️ Interactive Technical Drawings**: 9 interactive drawing tools including Trendlines, Channels, Rays, Fibonacci Retracements, Horizontal/Vertical lines, Rectangles, Arrows, and Measurements with built-in undo/redo stack.
|
|
23
|
+
- **🎨 Dynamic Customization & Theming**: Runtime theme switching (`pro-dark`, `clean-light`, or custom), dynamic options via `applyOptions()`, and scale reconfiguration without chart recreation.
|
|
24
|
+
- **♿ WCAG 2.2 AA Accessible**: Keyboard navigation (arrow stepping, Home/End, PageUp/Down), polite ARIA live region announcements, and screen-reader HTML companion table (`AccessibleChartTable`).
|
|
25
|
+
- **🔒 Zero Telemetry & Privacy First**: 100% in-house math and rendering, zero tracking, zero external network calls.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 📦 Monorepo Package Ecosystem
|
|
30
|
+
|
|
31
|
+
The library is published on npm under the **`@tranding-custom-chart`** scope:
|
|
32
|
+
|
|
33
|
+
| Package | Role | Description |
|
|
34
|
+
| :--- | :--- | :--- |
|
|
35
|
+
| **[`@tranding-custom-chart/core`](https://www.npmjs.com/package/@tranding-custom-chart/core)** | Foundation | Scales (Linear, Log, IndexTime, ContinuousTime), LTTB downsampling, O(log N) bisection, formatters, domain contracts, event emitter, drawing geometry, and plugin manager. |
|
|
36
|
+
| **[`@tranding-custom-chart/renderer-canvas`](https://www.npmjs.com/package/@tranding-custom-chart/renderer-canvas)** | Render Engine | Multi-layer Canvas 2D engine, RAF render scheduler, sub-pixel alignment (`snapLine`, `snapRect`), high-DPI retina display backing, and 20+ chart renderers. |
|
|
37
|
+
| **[`@tranding-custom-chart/financial`](https://www.npmjs.com/package/@tranding-custom-chart/financial)** | Indicators & Layout | Technical indicators (SMA, EMA, RSI, MACD, Bollinger, Supertrend, VRVP), Renko/Heikin-Ashi generators, and proportional multi-pane vertical layout engine. |
|
|
38
|
+
| **[`@tranding-custom-chart/react`](https://www.npmjs.com/package/@tranding-custom-chart/react)** | React Adapter | Declarative JSX components (`ChartContainer`, `UniversalSeries`, `CrosshairOverlay`, `GridAxes`, `InteractiveLegend`), `useChart` hook, and multi-pane sync. |
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 🚀 Installation
|
|
43
|
+
|
|
44
|
+
### Option 1: React Application (Full Suite)
|
|
23
45
|
```bash
|
|
24
|
-
npm install @tranding-custom-chart/react @tranding-custom-chart/core @tranding-custom-chart/renderer-canvas @tranding-custom-chart/financial
|
|
46
|
+
npm install @tranding-custom-chart/react @tranding-custom-chart/core @tranding-custom-chart/renderer-canvas @tranding-custom-chart/financial
|
|
25
47
|
```
|
|
26
48
|
|
|
27
|
-
|
|
49
|
+
### Option 2: Vanilla JavaScript / TypeScript
|
|
50
|
+
```bash
|
|
51
|
+
npm install @tranding-custom-chart/core @tranding-custom-chart/renderer-canvas @tranding-custom-chart/financial
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## 💡 Quick Start Examples
|
|
57
|
+
|
|
58
|
+
### 1. React Trading Chart
|
|
59
|
+
|
|
28
60
|
```tsx
|
|
29
61
|
import React from 'react';
|
|
30
62
|
import {
|
|
31
63
|
ChartContainer,
|
|
32
|
-
|
|
33
|
-
|
|
64
|
+
CandlestickSeries,
|
|
65
|
+
VolumeSeries,
|
|
34
66
|
SupertrendSeries,
|
|
67
|
+
VolumeProfileSeries,
|
|
35
68
|
GridAxes,
|
|
36
69
|
CrosshairOverlay,
|
|
70
|
+
InteractiveLegend,
|
|
37
71
|
} from '@tranding-custom-chart/react';
|
|
38
|
-
import {
|
|
72
|
+
import {
|
|
73
|
+
createIndexTimeScale,
|
|
74
|
+
createLinearScale,
|
|
75
|
+
calculateOHLCDomain,
|
|
76
|
+
type OHLCVBar,
|
|
77
|
+
} from '@tranding-custom-chart/core';
|
|
78
|
+
import { computeSupertrend, computeVolumeProfile } from '@tranding-custom-chart/financial';
|
|
39
79
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
80
|
+
interface Props {
|
|
81
|
+
candles: OHLCVBar[];
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export function TradingChart({ candles }: Props) {
|
|
85
|
+
const xScale = createIndexTimeScale(candles.length, [40, 760]);
|
|
86
|
+
const yDomain = calculateOHLCDomain(candles);
|
|
87
|
+
const yScale = createLinearScale(yDomain, [380, 20]);
|
|
88
|
+
|
|
89
|
+
// Compute indicators
|
|
90
|
+
const supertrend = computeSupertrend(candles, { period: 10, multiplier: 3.0 });
|
|
91
|
+
const volumeProfile = computeVolumeProfile(candles, { binCount: 24, valueAreaRatio: 0.7 });
|
|
43
92
|
|
|
44
93
|
return (
|
|
45
|
-
<ChartContainer
|
|
94
|
+
<ChartContainer
|
|
95
|
+
width={800}
|
|
96
|
+
height={420}
|
|
97
|
+
xScale={xScale}
|
|
98
|
+
yScale={yScale}
|
|
99
|
+
ariaLabel="BTC/USD Trading Chart"
|
|
100
|
+
options={{
|
|
101
|
+
theme: 'pro-dark',
|
|
102
|
+
crosshair: { enabled: true },
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
46
105
|
<GridAxes />
|
|
47
|
-
<
|
|
48
|
-
<SupertrendSeries bars={
|
|
49
|
-
<
|
|
106
|
+
<CandlestickSeries bars={candles} />
|
|
107
|
+
<SupertrendSeries bars={candles} />
|
|
108
|
+
<VolumeSeries bars={candles} />
|
|
109
|
+
<VolumeProfileSeries bars={candles} />
|
|
50
110
|
<CrosshairOverlay />
|
|
111
|
+
<InteractiveLegend />
|
|
51
112
|
</ChartContainer>
|
|
52
113
|
);
|
|
53
114
|
}
|
|
54
115
|
```
|
|
55
116
|
|
|
56
|
-
|
|
57
|
-
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### 2. Vanilla JavaScript / TypeScript Canvas 2D
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
import {
|
|
123
|
+
createIndexTimeScale,
|
|
124
|
+
createLinearScale,
|
|
125
|
+
calculateOHLCDomain,
|
|
126
|
+
} from '@tranding-custom-chart/core';
|
|
127
|
+
import {
|
|
128
|
+
CanvasChartEngine,
|
|
129
|
+
renderCandlesticks,
|
|
130
|
+
renderGrid,
|
|
131
|
+
renderCrosshair,
|
|
132
|
+
} from '@tranding-custom-chart/renderer-canvas';
|
|
133
|
+
|
|
134
|
+
const container = document.getElementById('chart-container')!;
|
|
135
|
+
|
|
136
|
+
// Initialize high-DPI dual-layer Canvas engine
|
|
137
|
+
const engine = new CanvasChartEngine({
|
|
138
|
+
container,
|
|
139
|
+
width: 800,
|
|
140
|
+
height: 450,
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
const xScale = createIndexTimeScale(candles.length, [50, 750]);
|
|
144
|
+
const yScale = createLinearScale(calculateOHLCDomain(candles), [400, 20]);
|
|
145
|
+
|
|
146
|
+
// Register data rendering layer
|
|
147
|
+
engine.registerDataLayer('main', (ctx) => {
|
|
148
|
+
renderGrid(ctx, xScale, yScale, { width: 800, height: 450 });
|
|
149
|
+
renderCandlesticks(ctx, candles, xScale, yScale, {
|
|
150
|
+
upColor: '#26a69a',
|
|
151
|
+
downColor: '#ef5350',
|
|
152
|
+
barWidth: 0.8,
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
// Register interactive overlay layer
|
|
157
|
+
engine.registerOverlayLayer('crosshair', (ctx, state) => {
|
|
158
|
+
if (state.mouseX && state.mouseY) {
|
|
159
|
+
renderCrosshair(ctx, state.mouseX, state.mouseY, 800, 450);
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
// Request coalesced RAF render
|
|
164
|
+
engine.requestRender();
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
### 3. Angular Component
|
|
170
|
+
|
|
171
|
+
```typescript
|
|
172
|
+
import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
|
|
173
|
+
import { CanvasChartEngine, renderCandlesticks, renderGrid } from '@tranding-custom-chart/renderer-canvas';
|
|
174
|
+
import { createIndexTimeScale, createLinearScale, calculateOHLCDomain, type OHLCVBar } from '@tranding-custom-chart/core';
|
|
175
|
+
|
|
176
|
+
@Component({
|
|
177
|
+
selector: 'app-trading-chart',
|
|
178
|
+
template: `<div #chartContainer style="width: 100%; height: 450px;"></div>`,
|
|
179
|
+
})
|
|
180
|
+
export class TradingChartComponent implements AfterViewInit, OnDestroy {
|
|
181
|
+
@ViewChild('chartContainer') chartRef!: ElementRef<HTMLDivElement>;
|
|
182
|
+
private engine?: CanvasChartEngine;
|
|
183
|
+
|
|
184
|
+
ngAfterViewInit() {
|
|
185
|
+
this.engine = new CanvasChartEngine({
|
|
186
|
+
container: this.chartRef.nativeElement,
|
|
187
|
+
width: 800,
|
|
188
|
+
height: 450,
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
ngOnDestroy() {
|
|
193
|
+
this.engine?.destroy();
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## 📊 Comprehensive Visualizations
|
|
201
|
+
|
|
202
|
+
### Financial Series Types
|
|
203
|
+
| Series Type | Description | Key Features |
|
|
204
|
+
| :--- | :--- | :--- |
|
|
205
|
+
| **Candlestick** | Classic OHLC Japanese candlesticks | Configurable up/down colors, wick styling, sub-pixel centering |
|
|
206
|
+
| **Hollow Candlestick** | Solid down candles, hollow up candles | Traditional Wall Street visual style |
|
|
207
|
+
| **OHLC Bar** | Western tick-mark price bars | Open tick left, close tick right |
|
|
208
|
+
| **Heikin-Ashi** | Synthetic smoothed price action | Filters out intraday noise, calculates trend direction |
|
|
209
|
+
| **Renko** | Price-movement bricks | Time-independent, bricks form only on specified price movement |
|
|
210
|
+
| **Kagi** | Supply/demand vertical lines | Reversal threshold tracking (inflection points) |
|
|
211
|
+
| **Line Break** | Three-line break reversal bars | Identifies trend changes based on previous N-bar extremes |
|
|
212
|
+
| **High-Low Range** | Daily high/low price spread | Bar spread without open/close clutter |
|
|
213
|
+
| **Baseline / Percentage** | Area filled above/below baseline | Highlights performance relative to a benchmark price ($P_0$) |
|
|
214
|
+
| **HLC Area** | High-Low-Close shaded area | Visual volatility boundary |
|
|
215
|
+
|
|
216
|
+
### General & Business Visualizations
|
|
217
|
+
| Series Type | Description | Key Features |
|
|
218
|
+
| :--- | :--- | :--- |
|
|
219
|
+
| **Line** | Solid, dashed, or dotted lines | Smooth stroke, configurable tension |
|
|
220
|
+
| **Line with Markers** | Line chart with data point shapes | Circle, square, diamond, triangle markers |
|
|
221
|
+
| **Step Line** | Step-after / step-before line | Discontinuous state changes |
|
|
222
|
+
| **Bezier Spline** | Catmull-Rom $C^1$ cubic spline | Smooth curve interpolation with tension control |
|
|
223
|
+
| **Bar / Column** | Vertical category / volume bars | Grouped, auto-spacing, color-mapped |
|
|
224
|
+
| **Horizontal Bar** | Horizontal rank bars | Ideal for categorical leaderboard distributions |
|
|
225
|
+
| **Stacked Bar** | Multi-segment stacked bars | Part-to-whole categorical breakdown |
|
|
226
|
+
| **Pie & Doughnut** | Radial slice allocation | Configurable cutout ratio, hover explode effect, legend filter |
|
|
227
|
+
| **Polar Area** | Radial equidistant segments | Angle-equal, radius-scaled categorical data |
|
|
228
|
+
| **Radar (Spider)** | Multi-axis risk / performance grid | Concentric polygonal grid lines, multi-strategy overlays |
|
|
229
|
+
| **Scatter & Bubble** | 2D/3D XY data points | Variable radius, color encoding |
|
|
230
|
+
| **Box Plot** | Five-number statistical summary | Minimum, Q1, Median, Q3, Maximum, and outlier dots |
|
|
231
|
+
| **Heatmap** | 2D color-gradient matrix | Density and intensity matrix visualization |
|
|
232
|
+
|
|
233
|
+
---
|
|
234
|
+
|
|
235
|
+
## 📈 Technical Indicators (`@tranding-custom-chart/financial`)
|
|
236
|
+
|
|
237
|
+
All indicators are pure TypeScript functions with zero external dependencies:
|
|
238
|
+
|
|
239
|
+
```ts
|
|
240
|
+
import {
|
|
241
|
+
computeSMA,
|
|
242
|
+
computeEMA,
|
|
243
|
+
computeWMA,
|
|
244
|
+
computeVWAP,
|
|
245
|
+
computeRSI,
|
|
246
|
+
computeMACD,
|
|
247
|
+
computeBollingerBands,
|
|
248
|
+
computeATR,
|
|
249
|
+
computeSupertrend,
|
|
250
|
+
computeVolumeProfile,
|
|
251
|
+
} from '@tranding-custom-chart/financial';
|
|
252
|
+
|
|
253
|
+
// 1. Moving Averages
|
|
254
|
+
const sma20 = computeSMA(bars, { period: 20, source: 'close' });
|
|
255
|
+
const ema50 = computeEMA(bars, { period: 50, source: 'close' });
|
|
256
|
+
const wma14 = computeWMA(bars, { period: 14, source: 'close' });
|
|
257
|
+
const vwap = computeVWAP(bars);
|
|
258
|
+
|
|
259
|
+
// 2. Momentum & Oscillators
|
|
260
|
+
const rsi = computeRSI(bars, { period: 14 }); // Wilder's smoothed (0-100)
|
|
261
|
+
const macd = computeMACD(bars, { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 });
|
|
262
|
+
// macd -> [{ macdLine, signalLine, histogram }]
|
|
263
|
+
|
|
264
|
+
// 3. Volatility
|
|
265
|
+
const bb = computeBollingerBands(bars, { period: 20, stdDev: 2.0 });
|
|
266
|
+
// bb -> [{ upper, middle, lower }]
|
|
267
|
+
const atr = computeATR(bars, { period: 14 });
|
|
268
|
+
|
|
269
|
+
// 4. Trend Following
|
|
270
|
+
const st = computeSupertrend(bars, { period: 10, multiplier: 3.0 });
|
|
271
|
+
// st -> [{ value, direction, reversal: boolean }]
|
|
272
|
+
|
|
273
|
+
// 5. Volume Analysis (Visible Range Volume Profile - VRVP)
|
|
274
|
+
const vp = computeVolumeProfile(bars, { binCount: 24, valueAreaRatio: 0.7 });
|
|
275
|
+
console.log('POC Price:', vp.pocPrice);
|
|
276
|
+
console.log('Value Area High:', vp.valueAreaHigh);
|
|
277
|
+
console.log('Value Area Low:', vp.valueAreaLow);
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
---
|
|
281
|
+
|
|
282
|
+
## 🖊️ Interactive Technical Drawing Tools
|
|
283
|
+
|
|
284
|
+
The library includes an interactive drawing engine with coordinate invariance and an undo/redo stack:
|
|
285
|
+
|
|
286
|
+
| Tool | Type ID | Usage |
|
|
287
|
+
| :--- | :--- | :--- |
|
|
288
|
+
| **Trendline** | `trendline` | Linear regression / manual trendline with extension |
|
|
289
|
+
| **Horizontal Line** | `horizontal_line` | Key support/resistance price level |
|
|
290
|
+
| **Vertical Line** | `vertical_line` | Specific time marker / session boundary |
|
|
291
|
+
| **Channel** | `channel` | Parallel upper/lower trend corridor |
|
|
292
|
+
| **Ray** | `ray` | Semi-infinite line starting from point $P_1$ through $P_2$ |
|
|
293
|
+
| **Rectangle** | `rectangle` | Consolidation zones and price/time ranges |
|
|
294
|
+
| **Arrow** | `arrow` | Directional breakout markers |
|
|
295
|
+
| **Measure Tool** | `measure` | Pixel / price distance and percentage change calculator |
|
|
296
|
+
| **Fibonacci Retracement** | `fibonacci` | Golden ratio retracement levels (0.236, 0.382, 0.5, 0.618, 0.786) |
|
|
297
|
+
|
|
298
|
+
```tsx
|
|
299
|
+
import { DrawingOverlay } from '@tranding-custom-chart/react';
|
|
300
|
+
|
|
301
|
+
// Mount the drawing overlay inside ChartContainer
|
|
302
|
+
<DrawingOverlay
|
|
303
|
+
activeTool="trendline"
|
|
304
|
+
onDrawingComplete={(drawing) => console.log('Created:', drawing)}
|
|
305
|
+
/>
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
---
|
|
309
|
+
|
|
310
|
+
## 🎨 Theming & Customization
|
|
311
|
+
|
|
312
|
+
Switch themes dynamically at runtime without recreating the chart instance:
|
|
313
|
+
|
|
314
|
+
```tsx
|
|
315
|
+
import { ChartContainer, type DeepPartial, type ChartOptions } from '@tranding-custom-chart/react';
|
|
316
|
+
|
|
317
|
+
const customTheme: DeepPartial<ChartOptions> = {
|
|
318
|
+
theme: 'pro-dark',
|
|
319
|
+
layout: {
|
|
320
|
+
backgroundColor: '#0f172a',
|
|
321
|
+
textColor: '#94a3b8',
|
|
322
|
+
fontSize: 12,
|
|
323
|
+
},
|
|
324
|
+
grid: {
|
|
325
|
+
vertLines: { color: 'rgba(255, 255, 255, 0.05)' },
|
|
326
|
+
horzLines: { color: 'rgba(255, 255, 255, 0.05)' },
|
|
327
|
+
},
|
|
328
|
+
crosshair: {
|
|
329
|
+
mode: 'both',
|
|
330
|
+
vertLine: { color: '#38bdf8', width: 1, style: 'dashed' },
|
|
331
|
+
horzLine: { color: '#38bdf8', width: 1, style: 'dashed' },
|
|
332
|
+
},
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
<ChartContainer options={customTheme} ... />
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
---
|
|
339
|
+
|
|
340
|
+
## ♿ Accessibility (WCAG 2.2 AA)
|
|
341
|
+
|
|
342
|
+
Accessible data visualization out of the box:
|
|
343
|
+
|
|
344
|
+
- **Keyboard Stepping**: Use `ArrowLeft` / `ArrowRight` to step through candle data points; `Home` / `End` to jump to bounds; `PageUp` / `PageDown` for 10-bar strides.
|
|
345
|
+
- **Polite ARIA Speech**: Active coordinates, dates, and prices announced through ARIA live regions for screen-reader users.
|
|
346
|
+
- **Accessible HTML Fallback Table**: `<AccessibleChartTable>` renders a semantic HTML companion table hidden visually but readable by assistive tech.
|
|
347
|
+
|
|
348
|
+
---
|
|
349
|
+
|
|
350
|
+
## 📄 License
|
|
351
|
+
|
|
352
|
+
Licensed under the [MIT License](https://opensource.org/licenses/MIT). Copyright © 2024–2026 The Creator Studio.
|
package/package.json
CHANGED
|
@@ -1,9 +1,63 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tranding-custom-chart/react",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "Declarative React components
|
|
3
|
+
"version": "2.1.0",
|
|
4
|
+
"description": "Declarative React components for interactive financial and analytical Canvas 2D charts — 30+ series types (candlestick, OHLC, line, area, pie, radar, heatmap, volume profile, supertrend), WCAG 2.2 AA accessibility, drawing tools, multi-chart sync, and dynamic theming.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"author": "The Creator Studio <thecreatorstudio97@gmail.com>",
|
|
8
|
+
"homepage": "https://www.npmjs.com/package/@tranding-custom-chart/react",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"react",
|
|
11
|
+
"react-chart",
|
|
12
|
+
"react-charts",
|
|
13
|
+
"react-component",
|
|
14
|
+
"chart",
|
|
15
|
+
"charts",
|
|
16
|
+
"charting",
|
|
17
|
+
"canvas",
|
|
18
|
+
"canvas-2d",
|
|
19
|
+
"financial",
|
|
20
|
+
"financial-chart",
|
|
21
|
+
"trading",
|
|
22
|
+
"trading-chart",
|
|
23
|
+
"stock",
|
|
24
|
+
"stock-chart",
|
|
25
|
+
"crypto",
|
|
26
|
+
"forex",
|
|
27
|
+
"candlestick",
|
|
28
|
+
"candlestick-chart",
|
|
29
|
+
"ohlc",
|
|
30
|
+
"line-chart",
|
|
31
|
+
"area-chart",
|
|
32
|
+
"bar-chart",
|
|
33
|
+
"pie-chart",
|
|
34
|
+
"doughnut",
|
|
35
|
+
"radar-chart",
|
|
36
|
+
"heatmap",
|
|
37
|
+
"scatter-plot",
|
|
38
|
+
"bubble-chart",
|
|
39
|
+
"box-plot",
|
|
40
|
+
"volume-profile",
|
|
41
|
+
"supertrend",
|
|
42
|
+
"crosshair",
|
|
43
|
+
"drawing-tools",
|
|
44
|
+
"trendline",
|
|
45
|
+
"fibonacci",
|
|
46
|
+
"visualization",
|
|
47
|
+
"data-visualization",
|
|
48
|
+
"dataviz",
|
|
49
|
+
"interactive",
|
|
50
|
+
"composable",
|
|
51
|
+
"jsx",
|
|
52
|
+
"components",
|
|
53
|
+
"accessible",
|
|
54
|
+
"wcag",
|
|
55
|
+
"a11y",
|
|
56
|
+
"accessibility",
|
|
57
|
+
"typescript",
|
|
58
|
+
"tradingview-alternative",
|
|
59
|
+
"lightweight-charts-alternative"
|
|
60
|
+
],
|
|
7
61
|
"repository": {
|
|
8
62
|
"type": "git",
|
|
9
63
|
"url": "git+https://github.com/thecreatorstudio97/trend-chart.git",
|
|
@@ -22,9 +76,9 @@
|
|
|
22
76
|
"react-dom": ">=18.0.0"
|
|
23
77
|
},
|
|
24
78
|
"dependencies": {
|
|
25
|
-
"@tranding-custom-chart/core": "^2.
|
|
26
|
-
"@tranding-custom-chart/renderer-canvas": "^2.
|
|
27
|
-
"@tranding-custom-chart/financial": "^2.
|
|
79
|
+
"@tranding-custom-chart/core": "^2.1.0",
|
|
80
|
+
"@tranding-custom-chart/renderer-canvas": "^2.1.0",
|
|
81
|
+
"@tranding-custom-chart/financial": "^2.1.0"
|
|
28
82
|
},
|
|
29
83
|
"files": [
|
|
30
84
|
"dist",
|