@qfo/qfchart 0.5.0 → 0.5.5

package/README.md

@@ -21,12 +21,14 @@ QFChart is a lightweight, feature-rich financial charting library designed for b
 -   **📈 Overlay Indicators** - Add indicators directly on top of the main chart (SMA, Bollinger Bands, etc.)
 -   **🔍 Interactive Zoom** - Smooth zooming and panning with customizable data range controls
 
-### Drawing Tools
+### Drawing Tools (Plugins)
+
+A plugin system is used to allow adding custom drawing tools to the charts.
+Currently available plugins :
 
 -   **✏️ Line Drawing** - Draw trend lines and support/resistance levels
 -   **📏 Fibonacci Retracements** - Interactive Fibonacci levels with automatic ratio calculations
 -   **📐 Measure Tool** - Measure price and time distances between any two points
--   **🎨 Customizable Styles** - Full control over colors, line widths, and visual appearance
 
 ### Layout & Customization
 
@@ -47,19 +49,23 @@ QFChart is a lightweight, feature-rich financial charting library designed for b
 ### Browser (UMD)
 
 ```html
-<script src="https://unpkg.com/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
+<!-- 1. Include ECharts (Required) -->
+<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+
+<!-- 2. Include QFChart -->
+<script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
 ```
 
 ### NPM
 
 ```bash
-npm install @qfo/qfchart
+npm install @qfo/qfchart echarts
 ```
 
 ### Yarn
 
 ```bash
-yarn add @qfo/qfchart
+yarn add @qfo/qfchart echarts
 ```
 
 ## 🚀 Quick Start
@@ -125,23 +131,24 @@ chart.addIndicator('SMA_20', smaPlots, {
 
 // Add separate pane indicator (e.g., MACD)
 const macdPlots = {
-    macd: {
+    histogram: {
         data: [
+            { time: 1748217600000, value: 513.1184116809054, options: { color: '#26A69A' } },
             /* ... */
         ],
-        options: { style: 'line', color: '#2962FF' },
+        options: { style: 'histogram', color: '#26A69A' },
     },
-    signal: {
+    macd: {
         data: [
             /* ... */
         ],
-        options: { style: 'line', color: '#FF6D00' },
+        options: { style: 'line', color: '#2962FF' },
     },
-    histogram: {
+    signal: {
         data: [
             /* ... */
         ],
-        options: { style: 'histogram', color: '#26A69A' },
+        options: { style: 'line', color: '#FF6D00' },
     },
 };
 

package/dist/index.d.ts

@@ -23,13 +23,16 @@ interface IndicatorPoint {
     value: number | null;
     options?: {
         color?: string;
+        offset?: number;
     };
 }
-type IndicatorStyle = 'line' | 'columns' | 'histogram' | 'circles' | 'cross' | 'background';
+type IndicatorStyle = 'line' | 'step' | 'columns' | 'histogram' | 'circles' | 'cross' | 'background';
 interface IndicatorOptions {
     style: IndicatorStyle;
     color: string;
+    offset?: number;
     linewidth?: number;
+    smooth?: boolean;
 }
 interface IndicatorPlot {
     data: IndicatorPoint[];