QuantForgeOrg · alaa-eddine · Dec 24, 2025 · Dec 20, 2025 · Dec 20, 2025 · Dec 20, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,38 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.7] - 2025-12-24
+
+### Added
+
+-   **Shape Plot Style**
+    -   New `shape` plot style with extensive customization options for technical indicator signals.
+    -   Support for 12 shape types: `circle`, `square`, `diamond`, `triangleup`, `triangledown`, `arrowup`, `arrowdown`, `flag`, `cross`, `xcross`, `labelup`, `labeldown`.
+    -   6 size presets: `tiny`, `small`, `normal`, `large`, `huge`, `auto`.
+    -   Custom dimensions support with `width` and `height` attributes for non-uniform shapes.
+    -   5 location modes: `absolute`, `abovebar`, `belowbar`, `top`, `bottom` for flexible positioning.
+    -   Text label support with configurable color and automatic positioning based on location.
+    -   Per-point overrides for all shape attributes (shape, size, color, text, location, dimensions).
+-   **Documentation**
+    -   Comprehensive plotting system documentation (`/plots`) covering all 7 plot styles.
+    -   Detailed shape plot examples and configuration guide.
+    -   PineScript demo page showing runtime transpilation with PineTS.
+    -   Cross-signal indicator example demonstrating shape plots with EMA crossover signals.
+
+### Changed
+
+-   **Build Pipeline Modernization**
+    -   Migrated from UMD-only to hybrid ESM/CJS/UMD build system.
+    -   Added `exports` field in `package.json` for modern bundler support.
+    -   Externalized ECharts dependency - now required as peer dependency.
+    -   Separate ESM (`qfchart.min.es.js`) and UMD (`qfchart.min.browser.js`) bundles.
+    -   Updated all demo pages to include ECharts script tag.
+    -   Improved Rollup configuration for better tree-shaking and bundle optimization.
+
+### Fixed
+
+-   Binance provider hotfix for USA users connectivity issues.
+
 ## [0.5.2] - 2025-12-20
 
 ### Added

diff --git a/README.md b/README.md
@@ -49,19 +49,23 @@ Currently available plugins :
 ### Browser (UMD)
 
 ```html
+<!-- 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

diff --git a/docs/data/cross-signal.pine b/docs/data/cross-signal.pine
@@ -0,0 +1,26 @@
+//@version=6
+indicator("EMA Crossover Signals", overlay=true)
+
+// Input parameters
+fastLength = input.int(9, "Fast EMA Length", minval=1)
+slowLength = input.int(13, "Slow EMA Length", minval=1)
+
+// Calculate EMAs
+fastEMA = ta.ema(close, fastLength)
+slowEMA = ta.ema(close, slowLength)
+
+// Plot EMAs
+plot(fastEMA, "Fast EMA", color=color.blue, linewidth=2)
+plot(slowEMA, "Slow EMA", color=color.red, linewidth=2)
+
+// Detect crossovers
+bullishCross = ta.crossover(fastEMA, slowEMA)
+bearishCross = ta.crossunder(fastEMA, slowEMA)
+
+// Plot buy signals (bullish cross)
+plotshape(bullishCross, "Buy Signal", shape.arrowup, location.belowbar, 
+          color=color.green, size=size.normal, text="Buy", textcolor=color.green)
+// Plot sell signals (bearish cross)
+plotshape(bearishCross, "Sell Signal", shape.arrowdown, location.abovebar, 
+          color=color.red, size=size.small, text="Sell", textcolor=color.red)
+
diff --git a/docs/demos.md b/docs/demos.md
@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Demos
-nav_order: 5
+nav_order: 6
 permalink: /demos/
 has_children: false
 ---

diff --git a/docs/demos/basic-01.html b/docs/demos/basic-01.html
@@ -5,8 +5,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>QFChart - Demo</title>
 
-        <!-- QFChart Library (Bundled with ECharts) -->
-        <script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+        <!-- QFChart Library -->
+        <script src="../js/qfchart.min.browser.js"></script>
+
+        <!-- Dependencies for Data Loading -->
+        <script src="../js/pinets.dev.browser.js"></script>
 
         <link rel="stylesheet" href="styles.css" />
     </head>
@@ -27,9 +31,6 @@ <h1>Basic Demo</h1>
             <div id="main-chart"></div>
         </div>
 
-        <!-- Dependencies for Data Loading -->
-        <script src="https://cdn.jsdelivr.net/npm/pinets/dist/pinets.min.browser.js"></script>
-
         <script>
             // Initialize QFChart
             document.addEventListener('DOMContentLoaded', async () => {

diff --git a/docs/demos/full.html b/docs/demos/full.html
@@ -5,6 +5,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>QFChart - Demo</title>
 
+        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+        <!-- QFChart Library -->
+        <script src="../js/qfchart.min.browser.js"></script>
+
+        <!-- Dependencies for Data Loading -->
+        <script src="../js/pinets.dev.browser.js"></script>
         <link rel="stylesheet" href="styles.css" />
     </head>
 
@@ -30,11 +36,6 @@ <h1>Full featured Demo</h1>
             <div id="main-chart"><center>Loading...</center></div>
         </div>
 
-        <!-- QFChart Library (Bundled with ECharts) -->
-        <script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
-
-        <!-- Dependencies for Data Loading -->
-        <script src="https://cdn.jsdelivr.net/npm/pinets/dist/pinets.min.browser.js"></script>
         <script src="../js/indicators/sqzmom.js"></script>
         <script src="../js/indicators/macd.js"></script>
         <script src="../js/indicators/instit-bias.js"></script>

diff --git a/docs/demos/pinescript.html b/docs/demos/pinescript.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>QFChart - PineScript Demo</title>
+
+        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+        <!-- QFChart Library -->
+        <script src="../js/qfchart.min.browser.js"></script>
+
+        <!-- Dependencies for Data Loading -->
+        <script src="../js/pinets.dev.browser.js"></script>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+
+    <body>
+        <nav>
+            <a href="https://github.com/QuantForgeOrg/QFChart" target="_blank">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                    />
+                </svg>
+                QFChart on GitHub
+            </a>
+        </nav>
+        <div id="container">
+            <h1>PineScript Demo</h1>
+            <p>
+                This demo uses the
+                <a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> library to load the market data and calculate multiple
+                indicators.
+            </p>
+            <hr />
+            <div id="main-chart"><center>Loading...</center></div>
+        </div>
+
+        <script src="../js/indicators/macd.js"></script>
+
+        <script>
+            // Data Loading Helper (Simulating what was in chart.js)
+            const DATA_LENGTH = 500;
+            async function getIndicatorData(inficatorCode, tickerId, timeframe = '1w', periods = 500, stime, etime) {
+                const pineTS = new PineTS(PineTS.Provider.Binance, tickerId, timeframe, periods, stime, etime);
+                const { result, plots, marketData } = await pineTS.run(inficatorCode);
+                return { result, plots, marketData };
+            }
+
+            // Load Pine Script source code from file
+            async function loadPineScript(url) {
+                const response = await fetch(url);
+                return await response.text();
+            }
+
+            // Initialize QFChart
+            document.addEventListener('DOMContentLoaded', async () => {
+                // Load the Pine Script source code
+                const crossSignalSource = await loadPineScript('../data/cross-signal.pine');
+
+                const promises = [getIndicatorData(crossSignalSource, 'BTCUSDT', 'W', DATA_LENGTH)];
+                const results = await Promise.all(promises);
+
+                const { marketData, plots: crossSignalPlots } = results[1];
+
+                // Map Market Data to QFChart OHLCV format
+                // marketData is array of objects: { openTime, open, high, low, close, volume }
+                const ohlcvData = marketData.map((k) => ({
+                    time: k.openTime,
+                    open: k.open,
+                    high: k.high,
+                    low: k.low,
+                    close: k.close,
+                    volume: k.volume,
+                }));
+
+                const isMobileDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+                // Initialize Chart
+                const chartContainer = document.getElementById('main-chart');
+                window.chart = new QFChart.QFChart(chartContainer, {
+                    title: 'BTC/USDT', // Custom title
+                    height: '700px',
+                    padding: 0.2,
+                    databox: {
+                        position: isMobileDevice ? 'floating' : 'right',
+                    },
+                    dataZoom: {
+                        visible: true,
+                        position: 'top',
+                        height: 6,
+                        start: 50,
+                        end: 100,
+                    },
+                    layout: {
+                        mainPaneHeight: '60%',
+                        gap: 5,
+                    },
+                    controls: {
+                        collapse: true,
+                        maximize: true,
+                        fullscreen: true,
+                    },
+                });
+
+                // Set Market Data
+                chart.setMarketData(ohlcvData);
+
+                // Set Indicators
+
+                chart.addIndicator('Cross Signal', crossSignalPlots, {
+                    isOverlay: true,
+                    titleColor: '#2962FF',
+                });
+
+                // Register Measure Tool Plugin
+                const measureTool = new QFChart.MeasureTool();
+                chart.registerPlugin(measureTool);
+
+                // Register Line Tool Plugin
+                const lineTool = new QFChart.LineTool();
+                chart.registerPlugin(lineTool);
+
+                // Register Fibonacci Tool Plugin
+                const fibTool = new QFChart.FibonacciTool();
+                chart.registerPlugin(fibTool);
+            });
+        </script>
+    </body>
+</html>
diff --git a/docs/index.md b/docs/index.md
@@ -32,7 +32,8 @@ permalink: /
     <div id="main-chart"></div>
 </div>
 
-<!-- QFChart Library (Bundled with ECharts) -->
+<!-- QFChart Library and Dependencies -->
+<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
 
 <!-- Dependencies for Data Loading -->
@@ -48,16 +49,20 @@ permalink: /
 
 ### Browser (UMD)
 
-Include the bundled script in your HTML file:
+Include the ECharts library and QFChart in your HTML file:
 
 ```html
+<!-- 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
 ```
 
 ## Quick Start
@@ -132,6 +137,12 @@ const plots = {
 chart.addIndicator('SMA_14', plots, { isOverlay: true });
 ```
 
+#### Plotting System
+
+QFChart supports multiple plot styles for rendering technical indicators: `line`, `step`, `histogram`, `columns`, `circles`, `cross`, `background`, and `shape`. Each style offers different visualization options and per-point styling capabilities. The `shape` style is particularly powerful, with support for various shapes (arrows, triangles, labels), custom sizes, text labels, and flexible positioning modes.
+
+For detailed information about plot styles, options, and examples, see the [Plotting System Documentation](/plots).
+
 ### 5. Real-time Updates (Optional)
 
 For real-time data feeds (e.g., WebSocket), use `updateData()` for optimal performance:

diff --git a/docs/js/chart-scriptt.js → docs/js/chart-script.js b/docs/js/chart-scriptt.js → docs/js/chart-script.js
diff --git a/docs/js/indicators/cross-signal.pine.js b/docs/js/indicators/cross-signal.pine.js
@@ -0,0 +1,28 @@
+const crossSignalIndicator = `
+//@version=6
+indicator("EMA Crossover Signals", overlay=true)
+
+// Input parameters
+fastLength = input.int(9, "Fast EMA Length", minval=1)
+slowLength = input.int(13, "Slow EMA Length", minval=1)
+
+// Calculate EMAs
+fastEMA = ta.ema(close, fastLength)
+slowEMA = ta.ema(close, slowLength)
+
+// Plot EMAs
+plot(fastEMA, "Fast EMA", color=color.blue, linewidth=2)
+plot(slowEMA, "Slow EMA", color=color.red, linewidth=2)
+
+// Detect crossovers
+bullishCross = ta.crossover(fastEMA, slowEMA)
+bearishCross = ta.crossunder(fastEMA, slowEMA)
+
+// Plot buy signals (bullish cross)
+plotshape(bullishCross, "Buy Signal", shape.arrowup, location.belowbar, 
+          color=color.green, size=size.normal, text="Buy", textcolor=color.green)
+// Plot sell signals (bearish cross)
+plotshape(bearishCross, "Sell Signal", shape.arrowdown, location.abovebar, 
+          color=color.red, size=size.small, text="Sell", textcolor=color.red)
+
+`;