@qfo/qfchart 0.5.0 → 0.5.2
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 +12 -9
- package/dist/index.d.ts +4 -1
- package/dist/qfchart.min.browser.js +17 -17
- package/package.json +1 -1
- package/src/components/SeriesBuilder.ts +83 -15
- package/src/types.ts +4 -1
package/README.md
CHANGED
|
@@ -21,12 +21,14 @@ QFChart is a lightweight, feature-rich financial charting library designed for b
|
|
|
21
21
|
- **📈 Overlay Indicators** - Add indicators directly on top of the main chart (SMA, Bollinger Bands, etc.)
|
|
22
22
|
- **🔍 Interactive Zoom** - Smooth zooming and panning with customizable data range controls
|
|
23
23
|
|
|
24
|
-
### Drawing Tools
|
|
24
|
+
### Drawing Tools (Plugins)
|
|
25
|
+
|
|
26
|
+
A plugin system is used to allow adding custom drawing tools to the charts.
|
|
27
|
+
Currently available plugins :
|
|
25
28
|
|
|
26
29
|
- **✏️ Line Drawing** - Draw trend lines and support/resistance levels
|
|
27
30
|
- **📏 Fibonacci Retracements** - Interactive Fibonacci levels with automatic ratio calculations
|
|
28
31
|
- **📐 Measure Tool** - Measure price and time distances between any two points
|
|
29
|
-
- **🎨 Customizable Styles** - Full control over colors, line widths, and visual appearance
|
|
30
32
|
|
|
31
33
|
### Layout & Customization
|
|
32
34
|
|
|
@@ -47,7 +49,7 @@ QFChart is a lightweight, feature-rich financial charting library designed for b
|
|
|
47
49
|
### Browser (UMD)
|
|
48
50
|
|
|
49
51
|
```html
|
|
50
|
-
<script src="https://
|
|
52
|
+
<script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
|
|
51
53
|
```
|
|
52
54
|
|
|
53
55
|
### NPM
|
|
@@ -125,23 +127,24 @@ chart.addIndicator('SMA_20', smaPlots, {
|
|
|
125
127
|
|
|
126
128
|
// Add separate pane indicator (e.g., MACD)
|
|
127
129
|
const macdPlots = {
|
|
128
|
-
|
|
130
|
+
histogram: {
|
|
129
131
|
data: [
|
|
132
|
+
{ time: 1748217600000, value: 513.1184116809054, options: { color: '#26A69A' } },
|
|
130
133
|
/* ... */
|
|
131
134
|
],
|
|
132
|
-
options: { style: '
|
|
135
|
+
options: { style: 'histogram', color: '#26A69A' },
|
|
133
136
|
},
|
|
134
|
-
|
|
137
|
+
macd: {
|
|
135
138
|
data: [
|
|
136
139
|
/* ... */
|
|
137
140
|
],
|
|
138
|
-
options: { style: 'line', color: '#
|
|
141
|
+
options: { style: 'line', color: '#2962FF' },
|
|
139
142
|
},
|
|
140
|
-
|
|
143
|
+
signal: {
|
|
141
144
|
data: [
|
|
142
145
|
/* ... */
|
|
143
146
|
],
|
|
144
|
-
options: { style: '
|
|
147
|
+
options: { style: 'line', color: '#FF6D00' },
|
|
145
148
|
},
|
|
146
149
|
};
|
|
147
150
|
|
package/dist/index.d.ts
CHANGED
|
@@ -23,13 +23,16 @@ interface IndicatorPoint {
|
|
|
23
23
|
value: number | null;
|
|
24
24
|
options?: {
|
|
25
25
|
color?: string;
|
|
26
|
+
offset?: number;
|
|
26
27
|
};
|
|
27
28
|
}
|
|
28
|
-
type IndicatorStyle = 'line' | 'columns' | 'histogram' | 'circles' | 'cross' | 'background';
|
|
29
|
+
type IndicatorStyle = 'line' | 'step' | 'columns' | 'histogram' | 'circles' | 'cross' | 'background';
|
|
29
30
|
interface IndicatorOptions {
|
|
30
31
|
style: IndicatorStyle;
|
|
31
32
|
color: string;
|
|
33
|
+
offset?: number;
|
|
32
34
|
linewidth?: number;
|
|
35
|
+
smooth?: boolean;
|
|
33
36
|
}
|
|
34
37
|
interface IndicatorPlot {
|
|
35
38
|
data: IndicatorPoint[];
|