Drawing Overlays
Drawing overlays are OverlayTemplate instances. The built-in set is registered
automatically when registerExtensions: true (the default), so you can select
any of them through useDrawingTools.
Try it
Section titled “Try it”Pick a tool, then click on the chart to draw. Press the same button again to deactivate.
Built-in overlays
Section titled “Built-in overlays”| Export | Overlay name | Description |
|---|---|---|
arrow | "arrow" | Arrow |
circle | "circle" | Circle |
rect | "rect" | Rectangle |
triangle | "triangle" | Triangle |
parallelogram | "parallelogram" | Parallelogram |
fibonacciCircle | "fibonacciCircle" | Fibonacci circle |
fibonacciSegment | "fibonacciSegment" | Fibonacci segment |
fibonacciSpiral | "fibonacciSpiral" | Fibonacci spiral |
fibonacciSpeedResistanceFan | "fibonacciSpeedResistanceFan" | Fibonacci fan |
fibonacciExtension | "fibonacciExtension" | Fibonacci extension |
fibRetracement | "fibRetracement" | Fibonacci retracement levels |
gannBox | "gannBox" | Gann box |
gannFan | "gannFan" | Gann fan (1x1, 1x2, …) |
threeWaves | "threeWaves" | 3-wave pattern |
fiveWaves | "fiveWaves" | 5-wave pattern |
eightWaves | "eightWaves" | 8-wave pattern |
anyWaves | "anyWaves" | Custom wave pattern |
elliottWave | "elliottWave" | Elliott wave (5-wave cycle, numbered vertices) |
abcd | "abcd" | ABCD pattern |
xabcd | "xabcd" | XABCD pattern |
parallelChannel | "parallelChannel" | Parallel channel |
longPosition | "longPosition" | Long position risk/reward (TP/SL with % labels) |
shortPosition | "shortPosition" | Short position risk/reward (TP/SL with % labels) |
measure | "measure" | Measure tool (price %, bar count, time delta) |
brush | "brush" | Freehand brush (Bézier smoothing) |
ray | "ray" | Infinite ray from a point |
Access the full list programmatically:
import { overlays } from "react-klinecharts-ui";// overlays === [arrow, circle, rect, triangle, …] (26 items)Manual registration
Section titled “Manual registration”If you disable the default extensions (registerExtensions={false}), register
them yourself — registerExtensions() is idempotent:
import { registerExtensions } from "react-klinecharts-ui";
registerExtensions(); // repeated calls are ignoredFeature overlays
Section titled “Feature overlays”The feature overlays orderLine, alertLine and depthOverlay are registered
automatically by registerExtensions() (default), so useOrderLines and
useAlerts work out of the box with no provider wiring. Passing them via the
provider’s overlays prop still works and is harmless:
import { orderLine } from "react-klinecharts-ui";import { depthOverlay } from "react-klinecharts-ui/extensions";
// Optional — these are already auto-registered.<KlinechartsUIProvider overlays={[orderLine, depthOverlay]}>…</KlinechartsUIProvider>;orderLine is the building block for useOrderLines;
alertLine is drawn by useAlerts; depthOverlay
renders order-book liquidity bars at each price level (update via
chart.overrideOverlay({ id, extendData })). See the
Order lines guide for a worked example.