SPB Git forge

spb/hfmarketdata

Public

Open high-frequency market data platform — FirstRate full-history downloader, DuckDB/Parquet lake, open REST API and React docs platform (www.hfmarketdata.io)

127commits 1branches 0releases
24.7 MBsize
maindefault branch
11 days agolast push
JavaScript 53.7% Python 38.3% CSS 4.6% TypeScript 3.1%

docs: encyclopédie des charts — 104 pages MDX générées depuis le catalogue (scripts/charts-docs.mjs : index indicateurs/outils par catégorie avec vignettes, fiche par indicateur et par outil avec figure 960, Open in charts), section Charts, fiches hors nav mais indexées (recherche ⌘K, prérendu, sitemap, og:image par fiche)

Simon-Pierre Boucher committed 18 days ago (Sep 7, 2026) parent a5068ad

115 changed files +7,347 −13

added hfmarketdata/web/content/guides/charts-ind-ad.mdx +73 −0
@@ -0,0 +1,73 @@
1 +export const meta = { title: 'A/D — Accumulation / Distribution', description: 'Cumulative money-flow volume, each bar weighted by where the close sits in its range.', image: '/charts/thumbs/indicator-ad-dark-lg.png' }
2 +
3 +# Accumulation / Distribution
4 +
5 +<p className="lead">Cumulative money-flow volume, each bar weighted by where the close sits in its range.</p>
6 +
7 +<ChartFigure kind="indicator" id="ad" caption="A/D with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="ad" aka={["A/D","ADL","Accumulation / Distribution line"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Accumulation / Distribution line cumulates the money-flow volume: each bar's volume multiplied by a factor between −1 and +1 that measures where the close landed inside the bar's high–low range. A close at the high counts the whole volume as accumulation, a close at the low as distribution, a mid-range close as neutral.
14 +
15 +## Formula
16 +
17 +```text
18 +CLV = ((C − L) − (H − C)) / (H − L) (0 when H = L)
19 +MFV = CLV × V
20 +A/D = A/D₁ + MFV
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `H, L, C` | high, low, close of the bar |
26 +| `V` | volume |
27 +| `CLV` | close location value, −1…+1 |
28 +| `A/D₁` | previous value of the line |
29 +
30 +## How to read it
31 +
32 +- A rising A/D line confirms an uptrend; a falling line under a rising price is distribution — the classic warning before a top.
33 +- Bullish divergence: price sets a lower low while A/D holds a higher low.
34 +- Unlike OBV, a strong reversal bar (close near the high after a gap down) adds to the line — it rewards intrabar strength, not just the close direction.
35 +- Read it with trend lines and breakouts like a price series; only the slope matters, not the level.
36 +
37 +## Default settings
38 +
39 +This indicator has no inputs — there is nothing to tune.
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and weekly bars; 1-hour bars on liquid stocks. |
48 +| **Markets** | Stocks, ETFs and futures with genuine volume. |
49 +| **Note** | Chaikin later smoothed this line into the Chaikin Oscillator and Chaikin Money Flow. |
50 +
51 +## Pairs well with
52 +
53 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
54 +- [Chaikin Money Flow](/docs/charts/indicators/cmf) — Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.
55 +- [Chaikin Oscillator](/docs/charts/indicators/chaikin-osc) — MACD of the Accumulation / Distribution line: fast EMA minus slow EMA of money flow.
56 +- [Money Flow Index](/docs/charts/indicators/mfi) — Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.
57 +
58 +## Pitfalls
59 +
60 +- It ignores gaps: a stock that gaps down 5 % and closes mid-range adds nothing negative to the line.
61 +- A bar with H = L contributes zero regardless of its volume.
62 +- Extreme-volume events (rebalancing, earnings) permanently shift the line.
63 +
64 +## History
65 +
66 +Marc Chaikin, early 1980s, building on Larry Williams's accumulation / distribution concept.
67 +
68 +## See also
69 +
70 +- [Chaikin Money Flow](/docs/charts/indicators/cmf)
71 +- [Chaikin Oscillator](/docs/charts/indicators/chaikin-osc)
72 +- [On-Balance Volume](/docs/charts/indicators/obv)
73 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-adx.mdx +76 −0
@@ -0,0 +1,76 @@
1 +export const meta = { title: 'ADX — Average Directional Index', description: 'Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.', image: '/charts/thumbs/indicator-adx-dark-lg.png' }
2 +
3 +# Average Directional Index
4 +
5 +<p className="lead">Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.</p>
6 +
7 +<ChartFigure kind="indicator" id="adx" caption="ADX 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="adx" aka={["ADX","DMI","Directional Movement"]} category="Trend" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +ADX smooths the difference between the positive and negative directional indicators (+DI, −DI), which measure how much of the true range was upward or downward movement. The ADX line reads the strength of the trend whatever its direction; the two DI lines tell you whether buyers or sellers own it.
14 +
15 +## Formula
16 +
17 +```text
18 ++DM = H_t − H_{t−1} if > L_{t−1} − L_t and > 0, else 0 (−DM symmetric)
19 ++DI = 100 · RMA(+DM, n) / RMA(TR, n), −DI likewise
20 +DX = 100 · |+DI − −DI| / (+DI + −DI)
21 +ADX = RMA(DX, n)
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `n` | Wilder smoothing length (default 14) |
27 +| `RMA` | Wilder's smoothed moving average |
28 +| `TR` | true range |
29 +
30 +## How to read it
31 +
32 +- ADX below 20–25: no trend, range tools apply; above 25: a trend worth following; above 40–50: very strong, often late.
33 +- +DI above −DI = uptrend; −DI above +DI = downtrend. A DI cross while ADX rises from below 20 is a fresh trend.
34 +- A falling ADX from a high level does not mean reversal — it means the trend is losing strength or consolidating.
35 +- ADX turning up from below 20 after a long flat period frequently precedes a breakout.
36 +- Wilder's extreme-point rule: enter on the DI cross only if price then exceeds the extreme of the crossover bar.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `length` | `14` | Wilder's standard: half of a 28-day cycle on daily bars; because ADX is doubly smoothed, 14 already lags — shorter settings are rarely useful. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily and 4-hour; 1-hour for intraday regime filtering. |
51 +| **Markets** | Every market — it is the standard trend / range filter. |
52 +| **Note** | Use ADX to decide WHICH tools to use (trend or range), not as an entry signal by itself. |
53 +
54 +## Pairs well with
55 +
56 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
57 +- [Parabolic SAR](/docs/charts/indicators/psar) — Accelerating trailing dots below or above price; a touch flips the trend.
58 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
59 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
60 +
61 +## Pitfalls
62 +
63 +- The double smoothing makes ADX slow: a trend can be half over by the time ADX crosses 25.
64 +- ADX rises in strong downtrends too — always read the DI lines for direction.
65 +- Absolute thresholds vary by instrument; calibrate 20 / 25 against the history you trade.
66 +
67 +## History
68 +
69 +J. Welles Wilder Jr., 1978, New Concepts in Technical Trading Systems.
70 +
71 +## See also
72 +
73 +- [Aroon](/docs/charts/indicators/aroon)
74 +- [Vortex](/docs/charts/indicators/vortex)
75 +- [Parabolic SAR](/docs/charts/indicators/psar)
76 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-alma.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'ALMA — Arnaud Legoux Moving Average', description: 'Gaussian-weighted average with an adjustable offset: tune smoothness against lag.', image: '/charts/thumbs/indicator-alma-dark-lg.png' }
2 +
3 +# Arnaud Legoux Moving Average
4 +
5 +<p className="lead">Gaussian-weighted average with an adjustable offset: tune smoothness against lag.</p>
6 +
7 +<ChartFigure kind="indicator" id="alma" caption="ALMA 9 0.85 6 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="alma" aka={["ALMA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +ALMA weights the bars of the window with a Gaussian bell whose centre is shifted toward the most recent bars by the offset parameter and whose width is set by sigma. Moving the centre reduces lag; widening the bell increases smoothness — two independent knobs instead of one length.
14 +
15 +## Formula
16 +
17 +```text
18 +m = offset·(n − 1), s = n / sigma
19 +w_i = exp(−(i − m)² / (2·s²)), i = 0 … n−1 (0 = oldest bar)
20 +ALMA_t = Σ w_i·P_{t−(n−1−i)} / Σ w_i
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | window length (default 9) |
26 +| `offset` | 0 … 1, where the bell peaks (1 = newest bar) |
27 +| `sigma` | bell width control — larger = narrower bell = more responsive |
28 +| `w_i` | Gaussian weight of bar i |
29 +
30 +## How to read it
31 +
32 +- Use it as a smooth trend line: slope for bias, closes across it for entries and exits.
33 +- With offset 0.85 the line keeps a small lag but filters the single-bar noise that trips shorter EMAs.
34 +- Lower the offset (0.5) for a symmetric filter that is very smooth but lags like an SMA; raise it toward 1 for speed.
35 +- Two ALMAs of different lengths cross cleaner than EMAs because the Gaussian kernel damps oscillation.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `9` | Legoux's published default; short enough for swing trading, and the Gaussian weights make it smoother than a 9 EMA. |
42 +| `offset` | `0.85` | Original default: bell centred at 85 % of the window — most weight on recent bars with a little lag traded for smoothness. |
43 +| `sigma` | `6` | Original default; sigma 6 gives a moderately narrow bell. Lower values (2–3) smooth more, higher values (8–10) track price. |
44 +| `source` | `close` | Standard settlement price. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Intraday to daily. |
53 +| **Markets** | FX and index futures, where it was designed to filter noise. |
54 +
55 +
56 +## Pairs well with
57 +
58 +- [Kaufman Adaptive Moving Average](/docs/charts/indicators/kama) — Speeds up in trends, flattens in noise: the smoothing adapts to the efficiency ratio.
59 +- [Hull Moving Average](/docs/charts/indicators/hma) — Almost lag-free smooth average built from three weighted MAs; hugs the trend.
60 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
61 +
62 +## Pitfalls
63 +
64 +- Three parameters invite over-fitting — change one at a time.
65 +- Offset near 1 degenerates into a nearly unsmoothed series.
66 +
67 +## History
68 +
69 +Arnaud Legoux and Dimitrios Kouzis-Loukas, 2009.
70 +
71 +## See also
72 +
73 +- [Hull Moving Average](/docs/charts/indicators/hma)
74 +- [Kaufman Adaptive MA](/docs/charts/indicators/kama)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-ao.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'AO — Awesome Oscillator', description: 'SMA 5 minus SMA 34 of the bar midpoint, as a histogram coloured by its own direction.', image: '/charts/thumbs/indicator-ao-dark-lg.png' }
2 +
3 +# Awesome Oscillator
4 +
5 +<p className="lead">SMA 5 minus SMA 34 of the bar midpoint, as a histogram coloured by its own direction.</p>
6 +
7 +<ChartFigure kind="indicator" id="ao" caption="AO 5 34 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="ao" aka={["AO"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Awesome Oscillator subtracts a 34-bar simple moving average of the bar midpoints from a 5-bar one, so it compares recent driving force to the longer-term one. It is drawn as a histogram whose bars are green when the value rises from the previous bar and red when it falls — the colour, not the sign, carries the first-level signal.
14 +
15 +## Formula
16 +
17 +```text
18 +mid = (high + low) / 2
19 +AO = SMA(mid, fast) − SMA(mid, slow)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `fast` | short SMA length (default 5) |
25 +| `slow` | long SMA length (default 34) |
26 +| `bar colour` | green when AO &gt; previous AO, red when AO &lt; previous AO |
27 +
28 +## How to read it
29 +
30 +- Zero-line cross: AO turning positive is a bullish momentum shift, negative is bearish.
31 +- Saucer: three bars above zero, the first two falling (red) and the third rising (green) — a buy in the direction of the trend; the mirror below zero is a sell.
32 +- Twin peaks: two troughs below zero where the second is shallower and followed by a green bar signals a bullish reversal; two peaks above zero, the second lower, signal a bearish one.
33 +- Bar colour flipping without a zero cross is a pullback inside the trend, not a reversal.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `fast` | `5` | Bill Williams' fast average — one trading week of daily bars. |
40 +| `slow` | `34` | A Fibonacci number roughly equal to seven trading weeks; Williams chose 5 / 34 for all the Profitunity tools. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily and 4-hour bars; the 5 / 34 pair is calibrated for swing trading. |
49 +| **Markets** | Futures, FX and indices — anything that trends in waves. |
50 +| **Note** | Part of Williams' Profitunity method together with the Alligator and Fractals. |
51 +
52 +## Pairs well with
53 +
54 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
55 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
56 +- [Elder Ray](/docs/charts/indicators/elder-ray) — Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.
57 +
58 +## Pitfalls
59 +
60 +- The saucer and twin-peak patterns need exact bar counts; eyeballing them produces many false setups.
61 +- Two SMAs lag: the zero cross confirms a move that is often half done.
62 +- On low-volatility bars the histogram flattens and colour flips constantly.
63 +
64 +## History
65 +
66 +Bill Williams, 1995, in Trading Chaos.
67 +
68 +## See also
69 +
70 +- [MACD](/docs/charts/indicators/macd)
71 +- [Elder Ray](/docs/charts/indicators/elder-ray)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-aroon.mdx +69 −0
@@ -0,0 +1,69 @@
1 +export const meta = { title: 'Aroon Up / Down — Aroon', description: 'How recently the n-bar high and low were made, 0–100: fresh highs = Aroon Up near 100.', image: '/charts/thumbs/indicator-aroon-dark-lg.png' }
2 +
3 +# Aroon
4 +
5 +<p className="lead">How recently the n-bar high and low were made, 0–100: fresh highs = Aroon Up near 100.</p>
6 +
7 +<ChartFigure kind="indicator" id="aroon" caption="Aroon 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="aroon" aka={["Aroon Up / Down","Aroon indicator"]} category="Trend" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Aroon Up counts how many bars have passed since the highest high of the window and Aroon Down since the lowest low, both scaled so that a fresh extreme scores 100 and an extreme at the far edge of the window scores 0. It measures the age of the trend rather than its size, which makes it good at spotting trends before they show up in moving averages.
14 +
15 +## Formula
16 +
17 +```text
18 +AroonUp = 100 · (n − barsSinceHighestHigh(n)) / n
19 +AroonDown = 100 · (n − barsSinceLowestLow(n)) / n
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | lookback length (default 14) |
25 +| `barsSince…` | age in bars of the extreme within the last n + 1 bars |
26 +
27 +## How to read it
28 +
29 +- Aroon Up above 70 with Aroon Down below 30 = established uptrend; the mirror = downtrend.
30 +- Aroon Up crossing above Aroon Down is an early trend-change signal; the cross above 50 confirms.
31 +- Both lines below 50 for a while: the market is consolidating, no recent extreme on either side.
32 +- Parallel movement of both lines near the middle means indecision — a breakout is brewing.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `14` | Chande's original: 14 bars balance sensitivity and stability on daily charts; 25 is common for a smoother read. |
39 +
40 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
41 +
42 +## Best for
43 +
44 +| | |
45 +| --- | --- |
46 +| **Timeframes** | Daily and weekly; also 1-hour for intraday trend tracking. |
47 +| **Markets** | Stocks and futures where trends alternate with consolidations. |
48 +
49 +
50 +## Pairs well with
51 +
52 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
53 +- [Vortex Indicator](/docs/charts/indicators/vortex) — Two lines from bar-to-bar range overlap: VI+ over VI− = uptrend, the cross is the signal.
54 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
55 +
56 +## Pitfalls
57 +
58 +- The lines move in steps of 100/n and jump as an extreme drops out of the window — jerky by nature.
59 +- It says nothing about the size of the move: a fresh high by one tick scores 100.
60 +
61 +## History
62 +
63 +Tushar Chande, September 1995, Technical Analysis of Stocks & Commodities ("Aroon" is Sanskrit for dawn's early light).
64 +
65 +## See also
66 +
67 +- [ADX](/docs/charts/indicators/adx)
68 +- [Donchian Channels](/docs/charts/indicators/donchian)
69 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-atr.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'ATR — Average True Range', description: 'Typical bar-to-bar movement in price units — the standard yardstick for stops and size.', image: '/charts/thumbs/indicator-atr-dark-lg.png' }
2 +
3 +# Average True Range
4 +
5 +<p className="lead">Typical bar-to-bar movement in price units — the standard yardstick for stops and size.</p>
6 +
7 +<ChartFigure kind="indicator" id="atr" caption="ATR 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="atr" aka={["ATR"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The ATR averages the true range — the bar's range extended to the previous close so gaps count — over n bars with Wilder's smoothing. It measures how much the instrument moves per bar in price units, which makes it the natural unit for stop distances, targets and position sizing across very different markets.
14 +
15 +## Formula
16 +
17 +```text
18 +TR = max(H − L, |H − C₁|, |L − C₁|)
19 +ATR = Wilder RMA(TR, n) = (ATR₁ × (n − 1) + TR) / n
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `H, L` | high and low of the bar |
25 +| `C₁` | previous close |
26 +| `n` | smoothing length (default 14) |
27 +| `ATR₁` | previous ATR value |
28 +
29 +## How to read it
30 +
31 +- Rising ATR = expanding ranges (often at trend starts and at climaxes); falling ATR = compression that usually precedes a breakout.
32 +- Stops: place them 1.5–3 ATR away from entry so normal noise does not stop you out; trail them by the same multiple (chandelier exit).
33 +- Position size: risk per trade ÷ (k × ATR) equalises the dollar risk between a quiet stock and a volatile one.
34 +- ATR has no direction — a high reading means big bars, up or down.
35 +- Compare ATR with the bar you are looking at: a bar three times the ATR is an outlier worth a second look.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `14` | Wilder's original length; the RMA weighting makes 14 behave like a ~27-bar EMA, smooth enough for stop placement. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | Every timeframe — the value is always in the units of the chart you are on. |
50 +| **Markets** | All, especially futures and FX where volatility differs enormously between instruments. |
51 +| **Note** | Divide by price to compare volatility between symbols (ATR %). |
52 +
53 +## Pairs well with
54 +
55 +- [Keltner Channels](/docs/charts/indicators/keltner) — EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.
56 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
57 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
58 +- [Historical Volatility](/docs/charts/indicators/hv) — Annualised standard deviation of log returns, in % — the volatility options are priced on.
59 +
60 +## Pitfalls
61 +
62 +- Wilder smoothing carries the memory of a shock for a long time — a gap keeps stops wide for weeks.
63 +- On daily stock bars, the overnight gap dominates TR; on 1-minute bars TR is often just the spread.
64 +- ATR in price units is not comparable between a $10 and a $1 000 stock without normalising.
65 +
66 +## History
67 +
68 +J. Welles Wilder Jr., 1978, New Concepts in Technical Trading Systems.
69 +
70 +## See also
71 +
72 +- [Keltner Channels](/docs/charts/indicators/keltner)
73 +- [Historical Volatility](/docs/charts/indicators/hv)
74 +- [Long position tool](/docs/charts/tools/long)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-auto-fib.mdx +69 −0
@@ -0,0 +1,69 @@
1 +export const meta = { title: 'Auto Fib — Auto Fibonacci (visible range)', description: 'Fibonacci retracement drawn automatically on the largest swing of the visible range.', image: '/charts/thumbs/indicator-auto-fib-dark-lg.png' }
2 +
3 +# Auto Fibonacci (visible range)
4 +
5 +<p className="lead">Fibonacci retracement drawn automatically on the largest swing of the visible range.</p>
6 +
7 +<ChartFigure kind="indicator" id="auto-fib" caption="Auto Fib with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="auto-fib" aka={["Auto Fib","Automatic retracement"]} category="Levels & structure" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The Auto Fibonacci finds the highest high and the lowest low among the bars on screen, treats the move from the earlier extreme to the later one as the swing, and plots the retracement levels 0, 23.6, 38.2, 50, 61.8, 78.6 and 100 %. It recomputes whenever you pan or zoom, so the levels always describe the swing you are looking at.
14 +
15 +## Formula
16 +
17 +```text
18 +swing = earlier extreme → later extreme of the visible bars
19 +level(r) = end − (end − start) · r, r ∈ {0, 0.236, 0.382, 0.5, 0.618, 0.786, 1}
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `start / end` | price of the first and last extreme of the visible range |
25 +| `r` | Fibonacci ratio; 0 sits at the end of the swing, 1 at its start |
26 +
27 +## How to read it
28 +
29 +- 38.2 % and 50 % are shallow pullbacks typical of strong trends; 61.8 % is the classic "golden" retracement; beyond 78.6 % the swing is usually failing.
30 +- Confluence with a moving average, a pivot or a volume-profile node makes a level much more reliable.
31 +- Zoom in to isolate one swing: the tool always uses the biggest move on screen, so a wide view measures the big trend, a narrow view the last leg.
32 +- A retracement that holds and prints a reversal candle at a level is the setup; the level alone is not.
33 +
34 +## Default settings
35 +
36 +This indicator has no inputs — there is nothing to tune.
37 +
38 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
39 +
40 +## Best for
41 +
42 +| | |
43 +| --- | --- |
44 +| **Timeframes** | Every timeframe. |
45 +| **Markets** | Every market — ratios are scale-free. |
46 +| **Note** | For a fixed anchor that does not move with the view, use the Fibonacci retracement drawing tool. |
47 +
48 +## Pairs well with
49 +
50 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
51 +- [Pivot Points](/docs/charts/indicators/pivots) — Support and resistance levels for the current period computed from the previous H, L, C.
52 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
53 +
54 +## Pitfalls
55 +
56 +- The levels move with the viewport: an alert-style reading requires the manual Fib tool.
57 +- The largest swing on screen is not always the swing that matters for your trade.
58 +- Fibonacci levels are self-fulfilling to a degree, but they are zones, not lines — expect overshoots of a few ticks.
59 +
60 +## History
61 +
62 +Fibonacci retracements were introduced to charting by Ralph Nelson Elliott (1930s–1940s) and popularised by the harmonic and swing-trading literature; the automatic visible-range version is a modern charting convenience.
63 +
64 +## See also
65 +
66 +- [Fibonacci retracement (drawing tool)](/docs/charts/tools/fib)
67 +- [ZigZag](/docs/charts/indicators/zigzag)
68 +- [Fibonacci extension (drawing tool)](/docs/charts/tools/fib-extension)
69 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-avwap.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'AVWAP — Anchored VWAP', description: 'VWAP starting from a bar you choose — the average cost of everyone in since that event.', image: '/charts/thumbs/indicator-avwap-dark-lg.png' }
2 +
3 +# Anchored VWAP
4 +
5 +<p className="lead">VWAP starting from a bar you choose — the average cost of everyone in since that event.</p>
6 +
7 +<ChartFigure kind="indicator" id="avwap" caption="AVWAP with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="avwap" aka={["AVWAP","Anchored volume-weighted average price"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The Anchored VWAP accumulates volume-weighted price from a specific bar — an earnings gap, a swing low, a Fed meeting — instead of the session open. It tells you the average price at which participants have traded since that event, so it marks where the crowd that entered after the anchor is in profit or under water. Bands at ± k σ show the dispersion around that cost basis.
14 +
15 +## Formula
16 +
17 +```text
18 +AVWAP_t = Σ_{i ≥ anchor} (TP_i · V_i) / Σ_{i ≥ anchor} V_i
19 +upper / lower = AVWAP ± bands · σ_vw
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `anchor` | timestamp of the first bar included (not set → the first loaded bar) |
25 +| `TP` | typical price (H + L + C) / 3 |
26 +| `V` | bar volume |
27 +| `bands` | σ multiples for the bands (default 1) |
28 +
29 +## How to read it
30 +
31 +- Anchor at a significant low: as long as price holds above the AVWAP, buyers since the low remain in profit and defend the level.
32 +- Anchor at a major high: the AVWAP falling from it is the resistance sellers defend.
33 +- Two AVWAPs (from the last high and the last low) pinch price into a decision zone; the break out of the pinch is the trade.
34 +- A retest of the AVWAP from above that holds is a high-quality continuation entry.
35 +- The bands widen as the move ages — a touch of the outer band far from the anchor is an extended move.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `anchor` | `—` | No anchor set: the accumulation starts at the first loaded bar. Set it to the bar of the event you want to measure from (settings → anchor). |
42 +| `bands` | `1` | One volume-weighted σ frames the normal dispersion of prices around the cost basis. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Every timeframe with volume — from 1-minute anchors at the open to daily anchors at earnings or yearly lows. |
51 +| **Markets** | Stocks, ETFs, futures, crypto with volume. |
52 +| **Note** | The anchor is in your settings only — it does not move when you scroll. |
53 +
54 +## Pairs well with
55 +
56 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
57 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
58 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
59 +
60 +## Pitfalls
61 +
62 +- A poorly chosen anchor (a random bar) measures nothing; anchor to events the market itself reacted to.
63 +- Scrolling far back past the anchor shows no line — the AVWAP only exists after its anchor.
64 +- On symbols with no volume the indicator is empty.
65 +
66 +## History
67 +
68 +Popularised by Brian Shannon (Alphatrends) in the 2000s–2010s, building on the session VWAP benchmark.
69 +
70 +## See also
71 +
72 +- [VWAP](/docs/charts/indicators/vwap)
73 +- [Volume Profile](/docs/charts/indicators/volume-profile)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-bb-pctb.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: '%B — Bollinger %B', description: 'Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.', image: '/charts/thumbs/indicator-bb-pctb-dark-lg.png' }
2 +
3 +# Bollinger %B
4 +
5 +<p className="lead">Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.</p>
6 +
7 +<ChartFigure kind="indicator" id="bb-pctb" caption="%B 20 2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="bb-pctb" aka={["%B","Percent B"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +%B expresses the price position relative to the Bollinger Bands as a single number: 0 at the lower band, 0.5 at the middle, 1 at the upper band, beyond those values outside the bands. It turns the visual "touch" of a band into a plottable oscillator that can be compared across time, screened or used for divergences.
14 +
15 +## Formula
16 +
17 +```text
18 +%B = (src − lower) / (upper − lower)
19 +with upper / lower = SMA(src, n) ± k × σ(src, n)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `src` | price source (default close) |
25 +| `n` | Bollinger length (default 20) |
26 +| `k` | standard-deviation multiplier (default 2) |
27 +
28 +## How to read it
29 +
30 +- Above 1: close above the upper band; below 0: close below the lower band — the same statistical stretch as the bands, quantified.
31 +- Bearish divergence: price makes a higher high while %B makes a lower high (the second high is less extreme relative to the bands).
32 +- Trend reading: %B holding above 0.5 for many bars is a band walk; oscillation around 0.5 is a range.
33 +- Bollinger's W-bottom test: a second price low with a higher %B than the first.
34 +- Screen with %B &lt; 0 plus a rising volume indicator for exhaustion set-ups.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | Same window as the standard Bollinger Bands so the oscillator matches what the overlay shows. |
41 +| `mult` | `2` | ±2σ bands: 0 and 1 then correspond to the classic 95 % envelope. |
42 +| `source` | `close` | Closes match the bands' own source; keep them identical to the overlay you are reading. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily and 1-hour bars; any timeframe where you already use Bollinger Bands. |
51 +| **Markets** | Stocks, ETFs, indices, crypto. |
52 +| **Note** | Add the Bollinger Bands overlay with identical settings for context. |
53 +
54 +## Pairs well with
55 +
56 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
57 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width) — Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.
58 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
59 +- [Money Flow Index](/docs/charts/indicators/mfi) — Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.
60 +
61 +## Pitfalls
62 +
63 +- A reading above 1 in a strong trend is strength, not a sell signal.
64 +- %B says nothing about the width of the bands — combine with Bandwidth.
65 +- Different settings from the overlay produce readings that do not match the picture.
66 +
67 +## History
68 +
69 +John Bollinger, 2001, Bollinger on Bollinger Bands.
70 +
71 +## See also
72 +
73 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
74 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-bb-width.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'BBW — Bollinger Bandwidth', description: 'Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.', image: '/charts/thumbs/indicator-bb-width-dark-lg.png' }
2 +
3 +# Bollinger Bandwidth
4 +
5 +<p className="lead">Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.</p>
6 +
7 +<ChartFigure kind="indicator" id="bb-width" caption="BBW 20 2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="bb-width" aka={["BBW","Bandwidth"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Bandwidth measures the distance between the upper and the lower Bollinger Band as a percentage of the middle band. It isolates the volatility component of the bands so you can compare today's compression with the last six months and spot the Squeeze — the low-volatility set-up that precedes many strong moves.
14 +
15 +## Formula
16 +
17 +```text
18 +BBW = (upper − lower) / middle × 100
19 + = 2 × k × σ(src, n) / SMA(src, n) × 100
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | Bollinger length (default 20) |
25 +| `k` | standard-deviation multiplier (default 2) |
26 +| `σ` | population standard deviation of src |
27 +
28 +## How to read it
29 +
30 +- The Squeeze: Bandwidth at its lowest level of the last ~125 bars — expect an expansion; the breakout direction comes from price, often with a head-fake first.
31 +- The Bulge: Bandwidth at a six-month high marks a volatility climax; trends often end or pause there.
32 +- Rising Bandwidth after a breakout confirms participation; a flat Bandwidth during a breakout is suspicious.
33 +- Readings are in percent of price, so they can be compared between symbols and across history.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `20` | Same window as the standard Bollinger Bands. |
40 +| `mult` | `2` | Same multiplier as the overlay so the percentage matches the visible bands. |
41 +| `source` | `close` | Closes match the bands; keep the source identical to the overlay. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | Daily bars for Squeeze screening; 1-hour for intraday compressions. |
50 +| **Markets** | Stocks and ETFs above all; also crypto and index futures. |
51 +| **Note** | Judge lows against the symbol's own history rather than a fixed threshold. |
52 +
53 +## Pairs well with
54 +
55 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
56 +- [Bollinger %B](/docs/charts/indicators/bb-pctb) — Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.
57 +- [Keltner Channels](/docs/charts/indicators/keltner) — EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.
58 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
59 +
60 +## Pitfalls
61 +
62 +- A Squeeze has no direction — trading the first move out is where head-fakes bite.
63 +- Very low Bandwidth can persist for weeks in dull markets.
64 +- The percentage form breaks down for prices near zero or negative spreads.
65 +
66 +## History
67 +
68 +John Bollinger, 2001, Bollinger on Bollinger Bands.
69 +
70 +## See also
71 +
72 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
73 +- [Bollinger %B](/docs/charts/indicators/bb-pctb)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-bollinger.mdx +78 −0
@@ -0,0 +1,78 @@
1 +export const meta = { title: 'BB — Bollinger Bands', description: 'Moving average ± k standard deviations; the band width tracks volatility.', image: '/charts/thumbs/indicator-bollinger-dark-lg.png' }
2 +
3 +# Bollinger Bands
4 +
5 +<p className="lead">Moving average ± k standard deviations; the band width tracks volatility.</p>
6 +
7 +<ChartFigure kind="indicator" id="bollinger" caption="BB 20 2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="bollinger" aka={["BB","Bollinger"]} category="Volatility" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Bollinger Bands wrap a simple moving average with an upper and a lower band placed k standard deviations away. Because the standard deviation is computed on the same window, the bands widen when price becomes agitated and pinch when it goes quiet, so the envelope adapts to the market instead of imposing a fixed percentage.
14 +
15 +## Formula
16 +
17 +```text
18 +middle = SMA(src, n)
19 +upper = middle + k × σ(src, n)
20 +lower = middle − k × σ(src, n)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `src` | price source (default close) |
26 +| `n` | window length (default 20) |
27 +| `k` | standard-deviation multiplier (default 2) |
28 +| `σ` | population standard deviation of src over the last n bars |
29 +
30 +## How to read it
31 +
32 +- A close outside a band is a statistically stretched move: in a range it leans towards mean reversion, in a trend it is a sign of strength ("walking the band").
33 +- The Squeeze: bands at their narrowest in months precede an expansion — the direction is given by the breakout bar, not by the squeeze itself.
34 +- W-bottoms and M-tops: a second low that holds inside the lower band while price is at or below the first low is a classic reversal set-up.
35 +- The middle band is the trend reference: price holding above a rising SMA 20 keeps the bias long; repeated failures at it flip the bias.
36 +- Read the width relative to its own history (see Bollinger Bandwidth) rather than in absolute price units.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `length` | `20` | About one trading month on daily bars — long enough for a stable standard deviation, short enough to react; Bollinger suggested 10 with k 1.9 and 50 with k 2.1 for other horizons. |
43 +| `mult` | `2` | ±2σ covers roughly 95 % of a normal distribution, so touches outside the bands stay rare enough to mean something. |
44 +| `source` | `close` | Closes are the settlement prices; hlc3 or ohlc4 smooth intraday gaps and outliers. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Daily and 1-hour bars for swing set-ups; intraday for squeeze breakouts. |
53 +| **Markets** | Any liquid market; especially useful on stocks and indices that alternate ranges and trends. |
54 +| **Note** | Pair with a momentum gauge to tell a band walk from an exhaustion touch. |
55 +
56 +## Pairs well with
57 +
58 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
59 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width) — Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.
60 +- [Bollinger %B](/docs/charts/indicators/bb-pctb) — Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.
61 +- [Keltner Channels](/docs/charts/indicators/keltner) — EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.
62 +
63 +## Pitfalls
64 +
65 +- Selling the upper band in a strong uptrend fights the trend — the bands describe volatility, not overbought.
66 +- The ±2σ reading assumes normally distributed returns; fat tails make outside closes more frequent than 5 %.
67 +- The bands lag: after a shock the standard deviation stays inflated for n bars.
68 +
69 +## History
70 +
71 +John Bollinger, early 1980s, formalised in Bollinger on Bollinger Bands (2001).
72 +
73 +## See also
74 +
75 +- [Bollinger %B](/docs/charts/indicators/bb-pctb)
76 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width)
77 +- [Keltner Channels](/docs/charts/indicators/keltner)
78 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-cci.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'CCI — Commodity Channel Index', description: 'Typical price minus its SMA, scaled by mean deviation; ±100 marks unusual extension.', image: '/charts/thumbs/indicator-cci-dark-lg.png' }
2 +
3 +# Commodity Channel Index
4 +
5 +<p className="lead">Typical price minus its SMA, scaled by mean deviation; ±100 marks unusual extension.</p>
6 +
7 +<ChartFigure kind="indicator" id="cci" caption="CCI 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="cci" aka={["CCI"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The CCI measures how far the typical price (high + low + close) / 3 has drifted from its own moving average, normalised by the mean absolute deviation and a 0.015 constant. The constant is chosen so that about 70–80 % of readings fall between −100 and +100; moves beyond those levels flag an unusually strong departure from the mean.
14 +
15 +## Formula
16 +
17 +```text
18 +TP = (high + low + close) / 3
19 +CCI = (TP − SMA(TP, n)) / (0.015 × meanDeviation(TP, n))
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | lookback length (default 20) |
25 +| `meanDeviation` | average of \|TP − SMA(TP, n)\| over the last n bars |
26 +| `0.015` | Lambert's scaling constant that keeps ~75 % of values inside ±100 |
27 +
28 +## How to read it
29 +
30 +- Above +100: the price is stretched well above its mean — either an overbought reading (range) or the start of a strong up-move (Lambert's original use: buy when CCI crosses above +100, exit when it falls back below).
31 +- Below −100: the mirror image — oversold in a range, or an emerging downtrend.
32 +- Zero line: CCI above 0 means the typical price is above its n-bar average; sustained readings on one side define the trend.
33 +- Divergence between CCI extremes and price extremes is a reliable warning in commodities and indices.
34 +- Very high readings (±200, ±300) are not "more overbought" — they measure how fast the price left its average.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | Lambert recommended a third of the dominant cycle; 20 bars fit the roughly 60-day cycle he studied in commodities. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily and 4-hour bars for cycle work; 20 bars intraday for short breakouts. |
49 +| **Markets** | Commodities and futures (its original purpose), indices and large-cap stocks. |
50 +| **Note** | Unbounded: the scale differs from bounded oscillators like RSI. |
51 +
52 +## Pairs well with
53 +
54 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
55 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
56 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
57 +
58 +## Pitfalls
59 +
60 +- Two schools read it in opposite ways (breakout vs mean reversion) — decide which regime you are in before using it.
61 +- Because it is unbounded, fixed levels like ±100 are statistical, not hard limits; a strong trend keeps it beyond ±100 for long stretches.
62 +- Mean deviation collapses on quiet bars, which inflates the reading when a normal-sized move finally comes.
63 +
64 +## History
65 +
66 +Donald Lambert, 1980, in Commodities magazine.
67 +
68 +## See also
69 +
70 +- [Williams %R](/docs/charts/indicators/williams)
71 +- [Standard deviation](/docs/charts/indicators/stddev)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-chaikin-osc.mdx +73 −0
@@ -0,0 +1,73 @@
1 +export const meta = { title: 'Chaikin Osc — Chaikin Oscillator', description: 'MACD of the Accumulation / Distribution line: fast EMA minus slow EMA of money flow.', image: '/charts/thumbs/indicator-chaikin-osc-dark-lg.png' }
2 +
3 +# Chaikin Oscillator
4 +
5 +<p className="lead">MACD of the Accumulation / Distribution line: fast EMA minus slow EMA of money flow.</p>
6 +
7 +<ChartFigure kind="indicator" id="chaikin-osc" caption="Chaikin 3 10 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="chaikin-osc" aka={["Chaikin Osc","CHO"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Chaikin Oscillator applies the MACD idea to the Accumulation / Distribution line: a 3-period EMA minus a 10-period EMA of the cumulative money flow. It measures the momentum of accumulation or distribution, turning the slow-moving A/D line into a fast oscillator around zero.
14 +
15 +## Formula
16 +
17 +```text
18 +A/D = Σ ((C − L) − (H − C)) / (H − L) × V
19 +CHO = EMA(A/D, fast) − EMA(A/D, slow)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `A/D` | Accumulation / Distribution line |
25 +| `fast` | short EMA length (default 3) |
26 +| `slow` | long EMA length (default 10) |
27 +
28 +## How to read it
29 +
30 +- Crosses above zero: money flow is accelerating into the stock; below zero: out of it.
31 +- Divergence is the primary signal: price at a new high while the oscillator makes a lower high means the buying pressure that drove the first high is fading.
32 +- Use in the direction of the trend: in an uptrend, buy the oscillator's dips below zero that turn back up.
33 +- Values are in volume units — compare shape and sign, not level, between symbols.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `fast` | `3` | Chaikin's original three-bar EMA — very responsive to the last few sessions of money flow. |
40 +| `slow` | `10` | A two-week EMA as the baseline; the 3 / 10 pair mirrors the fast trading version of the MACD. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily bars, as designed; 1-hour bars on very liquid stocks and futures. |
49 +| **Markets** | Stocks, ETFs, index futures. |
50 +| **Note** | Noisier than Chaikin Money Flow; use it for timing, CMF for regime. |
51 +
52 +## Pairs well with
53 +
54 +- [Accumulation / Distribution](/docs/charts/indicators/ad) — Cumulative money-flow volume, each bar weighted by where the close sits in its range.
55 +- [Chaikin Money Flow](/docs/charts/indicators/cmf) — Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.
56 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
57 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
58 +
59 +## Pitfalls
60 +
61 +- With a 3-bar EMA the line whipsaws around zero in quiet markets.
62 +- Inherits the A/D line's blindness to gaps.
63 +- Volume units make the amplitude meaningless across symbols and after splits.
64 +
65 +## History
66 +
67 +Marc Chaikin, 1980s.
68 +
69 +## See also
70 +
71 +- [Accumulation / Distribution](/docs/charts/indicators/ad)
72 +- [MACD](/docs/charts/indicators/macd)
73 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-choppiness.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'CHOP — Choppiness Index', description: 'Is the market trending or chopping? 0–100: above 61.8 = chop, below 38.2 = trend.', image: '/charts/thumbs/indicator-choppiness-dark-lg.png' }
2 +
3 +# Choppiness Index
4 +
5 +<p className="lead">Is the market trending or chopping? 0–100: above 61.8 = chop, below 38.2 = trend.</p>
6 +
7 +<ChartFigure kind="indicator" id="choppiness" caption="CHOP 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="choppiness" aka={["CHOP"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Choppiness Index compares the sum of the true ranges over n bars with the total range covered during the same window, on a logarithmic scale. When bars overlap and price goes nowhere the ratio is high; when each bar extends the move the ratio is low. It says how directional the recent path was, not which way it went.
14 +
15 +## Formula
16 +
17 +```text
18 +CHOP = 100 × log10( ΣTR(n) / (maxHigh(n) − minLow(n)) ) / log10(n)
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | lookback length (default 14) |
24 +| `ΣTR(n)` | sum of the true ranges of the last n bars |
25 +| `maxHigh − minLow` | total range covered over the same n bars |
26 +
27 +## How to read it
28 +
29 +- Above 61.8: choppy, sideways market — favour range tactics, fade extremes, avoid breakout entries.
30 +- Below 38.2: strongly directional — trend-following tools work, counter-trend fades do not.
31 +- A drop from above 61.8 to below 38.2 flags the start of a trend leg; the reverse move flags exhaustion into consolidation.
32 +- CHOP has no direction: read the sign of the move from price or a trend indicator.
33 +- Extremely high readings after a long trend often precede a violent breakout — compression before expansion.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `14` | Wilder-style two-week window on daily bars; long enough to compare a swing with its bars, short enough to catch regime changes. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and 4-hour bars for regime detection; 15-minute bars to filter intraday breakout systems. |
48 +| **Markets** | Futures, FX and indices where trend / range alternation is the main risk. |
49 +| **Note** | A filter, not a signal generator. |
50 +
51 +## Pairs well with
52 +
53 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
54 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
55 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
56 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
57 +
58 +## Pitfalls
59 +
60 +- It confirms a trend only once the trend is under way — the reading lags the first thrust.
61 +- The 38.2 / 61.8 thresholds are Fibonacci conventions, not statistical bounds; calibrate them per market.
62 +- A single gap bar inflates both numerator and denominator and can distort a short window.
63 +
64 +## History
65 +
66 +E. W. Dreiss, Australian commodity trader, 1990s.
67 +
68 +## See also
69 +
70 +- [ADX](/docs/charts/indicators/adx)
71 +- [Donchian Channels](/docs/charts/indicators/donchian)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-cmf.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'CMF — Chaikin Money Flow', description: 'Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.', image: '/charts/thumbs/indicator-cmf-dark-lg.png' }
2 +
3 +# Chaikin Money Flow
4 +
5 +<p className="lead">Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.</p>
6 +
7 +<ChartFigure kind="indicator" id="cmf" caption="CMF 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="cmf" aka={["CMF"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Chaikin Money Flow sums the money-flow volume (volume weighted by where the close sits in the bar's range) over n bars and divides it by the total volume of the same window. The result oscillates between −1 and +1: positive when closes cluster in the upper part of the bars on heavy volume, negative when they cluster near the lows.
14 +
15 +## Formula
16 +
17 +```text
18 +CLV = ((C − L) − (H − C)) / (H − L)
19 +CMF = Σ (CLV × V)(n) / Σ V(n)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `H, L, C` | high, low, close |
25 +| `V` | volume |
26 +| `n` | window length (default 20) |
27 +| `CLV` | close location value, −1…+1 |
28 +
29 +## How to read it
30 +
31 +- Above 0: net buying pressure over the window; below 0: net selling pressure. The zero line is the regime switch.
32 +- Readings above +0.25 or below −0.25 are strong; they are more reliable when they persist for several bars than when they spike.
33 +- Divergence: price at a new high with CMF failing to exceed zero warns that the rally lacks sponsorship.
34 +- Confirm breakouts: a breakout with CMF turning positive has volume behind it; one with CMF still negative is suspect.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | Chaikin's standard is 20–21 bars, about one trading month; shorter windows react faster but flip around zero constantly. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily bars primarily; 1-hour bars on liquid names. |
49 +| **Markets** | Stocks, ETFs and futures with genuine volume. |
50 +| **Note** | It is the windowed version of the Accumulation / Distribution line. |
51 +
52 +## Pairs well with
53 +
54 +- [Accumulation / Distribution](/docs/charts/indicators/ad) — Cumulative money-flow volume, each bar weighted by where the close sits in its range.
55 +- [Money Flow Index](/docs/charts/indicators/mfi) — Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.
56 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
57 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
58 +
59 +## Pitfalls
60 +
61 +- Gaps are ignored: a large gap that closes mid-range reads as neutral.
62 +- Rolling sums have a drop-off effect — a big bar leaving the window moves CMF with no new information.
63 +- Thin volume makes the ratio noisy and prone to extreme values.
64 +
65 +## History
66 +
67 +Marc Chaikin, 1980s.
68 +
69 +## See also
70 +
71 +- [Accumulation / Distribution](/docs/charts/indicators/ad)
72 +- [Chaikin Oscillator](/docs/charts/indicators/chaikin-osc)
73 +- [Money Flow Index](/docs/charts/indicators/mfi)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-cmo.mdx +71 −0
@@ -0,0 +1,71 @@
1 +export const meta = { title: 'CMO — Chande Momentum Oscillator', description: 'Sum of gains minus losses over their total, −100…100, unsmoothed; ±50 mark the extremes.', image: '/charts/thumbs/indicator-cmo-dark-lg.png' }
2 +
3 +# Chande Momentum Oscillator
4 +
5 +<p className="lead">Sum of gains minus losses over their total, −100…100, unsmoothed; ±50 mark the extremes.</p>
6 +
7 +<ChartFigure kind="indicator" id="cmo" caption="CMO 9 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="cmo" aka={["CMO"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The CMO divides the difference between the sum of up-moves and the sum of down-moves by their total over the last n bars. Unlike the RSI it uses raw sums instead of Wilder smoothing and is centred on zero, so it is faster, symmetric and reaches ±100 when every bar in the window moved the same way.
14 +
15 +## Formula
16 +
17 +```text
18 +CMO = 100 × (sum(up, n) − sum(down, n)) / (sum(up, n) + sum(down, n))
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | lookback length (default 9) |
24 +| `up` | positive close-to-close changes (0 otherwise) |
25 +| `down` | absolute negative changes (0 otherwise) |
26 +
27 +## How to read it
28 +
29 +- Above +50: overbought (equivalent to RSI 75); below −50: oversold (RSI 25).
30 +- Zero line: positive means gains outweigh losses over the window — a simple trend read.
31 +- Chande used the absolute CMO level as a trend-strength filter: high |CMO| = trending, low |CMO| = choppy.
32 +- Divergence between CMO extremes and price extremes works as with RSI, one or two bars earlier.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `9` | Chande's published default — shorter than RSI's 14 because raw sums are already less smoothed and he wanted a fast oscillator; 14 or 20 for a calmer line. |
39 +| `source` | `close` | Closes are the standard input. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Intraday to daily; the 9-bar default suits short swings. |
48 +| **Markets** | Any liquid market; the bounded scale is comparable across symbols. |
49 +| **Note** | Also used to pick the adaptive length of Chande's VIDYA moving average. |
50 +
51 +## Pairs well with
52 +
53 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
54 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
55 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
56 +
57 +## Pitfalls
58 +
59 +- Without smoothing it is noticeably noisier than RSI and can flip from +50 to −50 in a few bars.
60 +- The zero-total case (no price change in the window) returns 0, which can look like neutrality on dead bars.
61 +- A short length in a strong trend pins it near ±100 without any reversal implication.
62 +
63 +## History
64 +
65 +Tushar Chande, 1994, in The New Technical Trader (with Stanley Kroll).
66 +
67 +## See also
68 +
69 +- [Relative Strength Index](/docs/charts/indicators/rsi)
70 +- [Stochastic RSI](/docs/charts/indicators/stochrsi)
71 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-coppock.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'Coppock — Coppock Curve', description: 'WMA of two summed rates of change; a turn up from below zero marks major market bottoms.', image: '/charts/thumbs/indicator-coppock-dark-lg.png' }
2 +
3 +# Coppock Curve
4 +
5 +<p className="lead">WMA of two summed rates of change; a turn up from below zero marks major market bottoms.</p>
6 +
7 +<ChartFigure kind="indicator" id="coppock" caption="Coppock 10 14 11 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="coppock" aka={["Coppock","Coppock indicator"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Coppock Curve adds a long and a short rate of change of price and smooths the sum with a weighted moving average. Coppock built it for monthly index data to identify the start of long-term bull markets: the buy signal is the curve turning upward from negative territory, and the indicator is drawn as a histogram coloured by its sign.
14 +
15 +## Formula
16 +
17 +```text
18 +Coppock = WMA(ROC(src, long) + ROC(src, short), wma)
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `long` | longer ROC length (default 14) |
24 +| `short` | shorter ROC length (default 11) |
25 +| `wma` | weighted moving average length (default 10) |
26 +| `src` | price source (default close) |
27 +
28 +## How to read it
29 +
30 +- Buy signal: the curve bottoms below zero and turns up — historically reliable on monthly S&P 500 and Dow data.
31 +- Coppock did not define a sell signal; traders use a downturn from a high positive reading or a cross below zero as an exit.
32 +- The sign tells the regime: positive means the sum of the two ROCs is still expanding — a bull phase.
33 +- On daily bars the same rules work as a slow swing indicator, but the long-term "bottom finder" reputation applies to monthly data.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `wma` | `10` | Coppock's 10-period weighted average, chosen so the indicator turns cleanly once the two ROCs agree. |
40 +| `long` | `14` | The 14-month rate of change from Coppock's original 1962 Barron's article. |
41 +| `short` | `11` | The 11-month rate of change; 11 and 14 months were, per Coppock's anecdote, the grieving period after a loss suggested by clergy. |
42 +| `source` | `close` | Closes feed both rates of change. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Weekly and monthly bars (the design case); daily bars as a slow momentum filter. |
51 +| **Markets** | Broad indices and index ETFs; less meaningful on single volatile stocks. |
52 +| **Note** | Needs 14 + 10 bars of history before the first value. |
53 +
54 +## Pairs well with
55 +
56 +- [Rate of Change](/docs/charts/indicators/roc) — Percent change of price versus n bars ago; the zero line separates rising from falling.
57 +- [Know Sure Thing](/docs/charts/indicators/kst) — Weighted sum of four smoothed rates of change plus a signal line: multi-cycle momentum.
58 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
59 +
60 +## Pitfalls
61 +
62 +- Extremely slow: signals arrive weeks or months into the new trend.
63 +- No sell rule by design — treating a downturn as a sell produces early exits in bull markets.
64 +- On daily bars of a single stock it is just a smoothed ROC and loses its long-cycle rationale.
65 +
66 +## History
67 +
68 +Edwin Sedge Coppock, 1962, in Barron's, originally for monthly Dow Jones data.
69 +
70 +## See also
71 +
72 +- [Rate of Change](/docs/charts/indicators/roc)
73 +- [Know Sure Thing](/docs/charts/indicators/kst)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-dema.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'DEMA — Double Exponential Moving Average', description: 'EMA with the lag of its own smoothing subtracted — quicker turns, same length.', image: '/charts/thumbs/indicator-dema-dark-lg.png' }
2 +
3 +# Double Exponential Moving Average
4 +
5 +<p className="lead">EMA with the lag of its own smoothing subtracted — quicker turns, same length.</p>
6 +
7 +<ChartFigure kind="indicator" id="dema" caption="DEMA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="dema" aka={["DEMA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The DEMA takes an EMA, computes the EMA of that EMA, and subtracts the second from twice the first. The difference between the two EMAs estimates the lag, so removing it produces a line that turns sooner than a plain EMA of the same length while staying smoother than a shorter EMA.
14 +
15 +## Formula
16 +
17 +```text
18 +E1 = EMA(P, n)
19 +E2 = EMA(E1, n)
20 +DEMA = 2·E1 − E2
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | length (default 20) |
26 +| `E1` | first EMA of the source |
27 +| `E2` | EMA of E1 (the "smoothing of the smoothing") |
28 +
29 +## How to read it
30 +
31 +- Use it where you would use an EMA when you want earlier turns without shortening the length.
32 +- A DEMA / EMA pair of the same length: the DEMA leads, the EMA confirms — the gap between them measures acceleration.
33 +- Price closing across the DEMA is a faster trend-change trigger than the equivalent EMA cross.
34 +- Like every lag-corrected average it can extrapolate slightly beyond price after sharp moves.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | Same nominal length as the default EMA so the lag reduction is visible side by side; Mulloy's articles used 20 and 50. |
41 +| `source` | `close` | Closes; the double smoothing already suppresses intrabar noise. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | Daily swing and intraday trend following. |
50 +| **Markets** | Trending stocks and futures. |
51 +
52 +
53 +## Pairs well with
54 +
55 +- [Triple Exponential Moving Average](/docs/charts/indicators/tema) — Three nested EMAs recombined to cancel lag — the fastest of the EMA family.
56 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
57 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
58 +
59 +## Pitfalls
60 +
61 +- Faster turns in trends also mean more false turns in ranges.
62 +- Not a true "average" — it can sit outside the range of the prices it was computed from.
63 +
64 +## History
65 +
66 +Patrick G. Mulloy, 1994, "Smoothing Data with Faster Moving Averages", Technical Analysis of Stocks & Commodities.
67 +
68 +## See also
69 +
70 +- [Triple Exponential MA](/docs/charts/indicators/tema)
71 +- [Exponential Moving Average](/docs/charts/indicators/ema)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-donchian.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'DC — Donchian Channels', description: 'Highest high and lowest low of the last n bars: the breakout channel of trend followers.', image: '/charts/thumbs/indicator-donchian-dark-lg.png' }
2 +
3 +# Donchian Channels
4 +
5 +<p className="lead">Highest high and lowest low of the last n bars: the breakout channel of trend followers.</p>
6 +
7 +<ChartFigure kind="indicator" id="donchian" caption="DC 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="donchian" aka={["DC","Donchian","Price channel"]} category="Volatility" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Donchian Channels plot the highest high and the lowest low over the last n bars, with a middle line halfway between them. The channel steps rather than curves, and a close through it means price has just made a new n-bar extreme — the raw material of every breakout system.
14 +
15 +## Formula
16 +
17 +```text
18 +upper = max(high, n)
19 +lower = min(low, n)
20 +middle = (upper + lower) / 2
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | lookback length (default 20) |
26 +| `max / min` | rolling extremes over the last n bars, current bar included |
27 +
28 +## How to read it
29 +
30 +- A close above the upper channel = new n-bar high: trend-following entry (Turtle rule: buy 20-day breakouts, exit on a 10-day low).
31 +- A flat upper line means no new highs for n bars; a descending upper line means the trend has already turned down.
32 +- Channel width = n-bar range: contracting width is a consolidation, the widest width of the year marks climactic moves.
33 +- The middle line is a slow trend filter similar to a moving average but immune to the shape of the price path.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `20` | The Turtle traders' classic entry window — about one trading month; 55 for the slower system, 10 for the exit channel. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily bars first; weekly for position trading, 1-hour for intraday breakouts. |
48 +| **Markets** | Futures, FX and crypto — trending markets where breakouts follow through. |
49 +| **Note** | The channel is a system component; pair it with a volatility-based position size (ATR). |
50 +
51 +## Pairs well with
52 +
53 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
54 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
55 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
56 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
57 +
58 +## Pitfalls
59 +
60 +- In ranges the channel produces repeated false breakouts; ADX or Choppiness helps to skip them.
61 +- The entry is late by construction — you buy the highest price of the last n bars.
62 +- Lookback matters: 20 and 55 give completely different trade sets on the same chart.
63 +
64 +## History
65 +
66 +Richard Donchian, 1960s; basis of Richard Dennis's Turtle trading rules (1983).
67 +
68 +## See also
69 +
70 +- [Supertrend](/docs/charts/indicators/supertrend)
71 +- [ATR](/docs/charts/indicators/atr)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-dpo.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'DPO — Detrended Price Oscillator', description: 'Price minus a displaced SMA: removes the trend to expose the cycle around it.', image: '/charts/thumbs/indicator-dpo-dark-lg.png' }
2 +
3 +# Detrended Price Oscillator
4 +
5 +<p className="lead">Price minus a displaced SMA: removes the trend to expose the cycle around it.</p>
6 +
7 +<ChartFigure kind="indicator" id="dpo" caption="DPO 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="dpo" aka={["DPO"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The DPO subtracts from each price the simple moving average centred on it — the SMA shifted back by half its length plus one bar. That displacement aligns the average with the prices it summarises, so the difference isolates the short cycles around the trend instead of measuring momentum. Because of the shift, the last length / 2 + 1 bars have no value.
14 +
15 +## Formula
16 +
17 +```text
18 +shift = floor(n / 2) + 1
19 +DPO = src − SMA(src, n)[shift bars ago]
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | SMA length (default 20) |
25 +| `shift` | displacement of the average (11 bars for n = 20) |
26 +| `src` | price source (default close) |
27 +
28 +## How to read it
29 +
30 +- Peaks and troughs of the DPO mark cycle highs and lows once the trend is removed — measure the distance between troughs to estimate the cycle length.
31 +- Above zero: price is above its centred average (upper half of the cycle); below zero: lower half.
32 +- Extreme DPO values relative to recent history flag cycle overbought / oversold conditions, useful for timing pullbacks inside a trend.
33 +- The indicator ends before the last bars: it describes past cycles, not the current bar.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `20` | One trading month; cycles longer than 20 bars are treated as trend and removed. |
40 +| `source` | `close` | Closes are the standard input. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily bars for cycle analysis; weekly bars for seasonal cycles. |
49 +| **Markets** | Commodities and indices with recognisable cycles. |
50 +| **Note** | A measurement tool for cycle length rather than an entry trigger. |
51 +
52 +## Pairs well with
53 +
54 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
55 +- [Stochastic Oscillator](/docs/charts/indicators/stoch) — Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.
56 +- [Rate of Change](/docs/charts/indicators/roc) — Percent change of price versus n bars ago; the zero line separates rising from falling.
57 +
58 +## Pitfalls
59 +
60 +- The missing final bars are by design — the DPO can never tell you where the current bar stands.
61 +- Choosing a length near the dominant cycle erases the very cycle you want to see; pick about half of it.
62 +- It is not a momentum indicator despite its name and pane placement.
63 +
64 +## History
65 +
66 +Attributed to the cycle-analysis literature of the 1970s–1980s; described by Walt Bressert and in Colby's Encyclopedia of Technical Market Indicators.
67 +
68 +## See also
69 +
70 +- [Simple Moving Average](/docs/charts/indicators/sma)
71 +- [Stochastic](/docs/charts/indicators/stoch)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-elder-ray.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'Bull Power / Bear Power — Elder Ray', description: 'Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.', image: '/charts/thumbs/indicator-elder-ray-dark-lg.png' }
2 +
3 +# Elder Ray
4 +
5 +<p className="lead">Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.</p>
6 +
7 +<ChartFigure kind="indicator" id="elder-ray" caption="Elder Ray 13 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="elder-ray" aka={["Bull Power / Bear Power","Elder-Ray Index"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Elder Ray splits each bar into the buyers' ability to push the high above the 13-bar EMA (bull power) and the sellers' ability to push the low below it (bear power). The EMA stands for the consensus of value; the two histograms show how far each side managed to move price away from it, and the EMA's slope gives the trend direction.
14 +
15 +## Formula
16 +
17 +```text
18 +EMA = EMA(close, n)
19 +bull = high − EMA
20 +bear = low − EMA
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | EMA length (default 13) |
26 +| `bull` | bull power — positive when the high is above the EMA |
27 +| `bear` | bear power — negative when the low is below the EMA |
28 +
29 +## How to read it
30 +
31 +- Buy in an uptrend (rising EMA) when bear power is negative but rising — sellers are weakening while the trend is up.
32 +- Sell in a downtrend (falling EMA) when bull power is positive but falling.
33 +- Bear power making a higher low while price makes a lower low is a strong bullish divergence; bull power lower highs on higher price highs are bearish.
34 +- Bull power negative in an uptrend, or bear power positive in a downtrend, is abnormal and warns the trend is in trouble.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `13` | Elder's 13-bar EMA — his standard value proxy on daily charts, also used in the Triple Screen system. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily bars first (Elder's design), then weekly for the trend and daily for entries. |
49 +| **Markets** | Stocks and futures with reliable highs and lows. |
50 +| **Note** | Read together with the EMA slope on the price pane — add an EMA 13 overlay. |
51 +
52 +## Pairs well with
53 +
54 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
55 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
56 +- [Force Index](/docs/charts/indicators/force) — Price change × volume, EMA-smoothed: the force behind each move, bulls above zero.
57 +
58 +## Pitfalls
59 +
60 +- Both histograms are in price units — compare shapes and divergences, not absolute values across symbols.
61 +- Gaps push both powers to the same side of zero; single outlier bars distort the read.
62 +- Without the EMA slope as a filter, the individual histograms whipsaw.
63 +
64 +## History
65 +
66 +Dr. Alexander Elder, 1993, in Trading for a Living.
67 +
68 +## See also
69 +
70 +- [Exponential Moving Average](/docs/charts/indicators/ema)
71 +- [Force Index](/docs/charts/indicators/force)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-ema.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'EMA — Exponential Moving Average', description: 'Recency-weighted average that reacts faster than the SMA with less drop-off jitter.', image: '/charts/thumbs/indicator-ema-dark-lg.png' }
2 +
3 +# Exponential Moving Average
4 +
5 +<p className="lead">Recency-weighted average that reacts faster than the SMA with less drop-off jitter.</p>
6 +
7 +<ChartFigure kind="indicator" id="ema" caption="EMA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="ema" aka={["EMA","Exponentially weighted MA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The EMA blends each new price into the previous average with a fixed weight α, so recent bars dominate and the oldest bars fade out geometrically instead of falling off a cliff. It follows price more closely than an SMA of the same length while remaining smooth.
14 +
15 +## Formula
16 +
17 +```text
18 +EMA_t = α·P_t + (1 − α)·EMA_{t−1}, α = 2 / (n + 1)
19 +EMA seeded with the SMA of the first n bars
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | nominal length (default 20) |
25 +| `α` | smoothing factor, 2/(n+1) — 0.095 for n = 20 |
26 +| `P` | source price |
27 +
28 +## How to read it
29 +
30 +- Same rules as the SMA — direction of slope and side of price — but signals arrive one to three bars earlier.
31 +- The 12 / 26 pair is the backbone of MACD; the 8 / 21 pair is a popular intraday momentum ribbon.
32 +- Price riding the 9 or 20 EMA without closing across it marks a strong, orderly trend.
33 +- A widening gap between price and the EMA signals an extended move that often snaps back to the line.
34 +- EMA of a longer length (200) is a slower but smoother regime filter than the SMA equivalent.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | One month of sessions; α ≈ 0.095 keeps about 86 % of the weight inside the last 20 bars. 9 and 21 are the day-trading standards. |
41 +| `source` | `close` | The close is the value the market agreed on; use hl2 to reduce single-print spikes on thin markets. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | All timeframes; the reactivity pays most on 1-minute to 1-hour bars. |
50 +| **Markets** | Trending markets — futures, FX majors, momentum stocks. |
51 +| **Note** | When you want speed, shorten the EMA; when you want smoothness at the same speed, look at the Hull MA. |
52 +
53 +## Pairs well with
54 +
55 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
56 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
57 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
58 +
59 +## Pitfalls
60 +
61 +- Faster also means more false crossings in chop.
62 +- The first bars after the seed are not fully "warmed up": the EMA still remembers the seed for about 3n bars.
63 +- Two EMAs of nearby lengths cross constantly — keep a ratio of 2–3 between fast and slow.
64 +
65 +## History
66 +
67 +Introduced to trading by P. N. "Pete" Haurlan in the early 1960s from missile-tracking exponential smoothing; formalised in Robert Brown's statistical work of 1956.
68 +
69 +## See also
70 +
71 +- [MACD](/docs/charts/indicators/macd)
72 +- [DEMA](/docs/charts/indicators/dema)
73 +- [TEMA](/docs/charts/indicators/tema)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-envelope.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'MA Envelope — Moving Average Envelope', description: 'A moving average with bands a fixed percentage above and below — the simplest channel.', image: '/charts/thumbs/indicator-envelope-dark-lg.png' }
2 +
3 +# Moving Average Envelope
4 +
5 +<p className="lead">A moving average with bands a fixed percentage above and below — the simplest channel.</p>
6 +
7 +<ChartFigure kind="indicator" id="envelope" caption="ENV 20 2.5% with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="envelope" aka={["MA Envelope","Percentage bands","Trading bands"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The envelope draws a moving average and two lines offset by a fixed percentage of its value. Unlike Bollinger or Keltner channels the width does not adapt to volatility, which makes it a stable yardstick for "how far is too far" on a given instrument and timeframe.
14 +
15 +## Formula
16 +
17 +```text
18 +middle = MA(P, n) (SMA or EMA)
19 +upper = middle · (1 + percent/100)
20 +lower = middle · (1 − percent/100)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | moving-average length (default 20) |
26 +| `percent` | half-width of the envelope in % (default 2.5) |
27 +| `ma` | average type, sma or ema |
28 +
29 +## How to read it
30 +
31 +- In a range, touches of the bands are fade points: sell the upper, buy the lower, target the middle.
32 +- In a trend, a close outside the envelope is a breakout signal (the classic envelope system of the 1970s).
33 +- Price hugging one band for many bars is a persistent trend — do not fade it.
34 +- Adjust the percentage until roughly 90 % of the closes stay inside; the tuned width becomes a volatility benchmark.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `20` | A one-month average; the classic envelope literature used 20–25 days for stocks. |
41 +| `percent` | `2.5` | A sensible starting half-width for daily equity bars; use 0.5–1 % on intraday charts, 5–10 % on volatile crypto. |
42 +| `ma` | `sma` | Simple average as in the original studies; ema for a faster middle line. |
43 +| `source` | `close` | The percentage is applied to the average of closes. |
44 +
45 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
46 +
47 +## Best for
48 +
49 +| | |
50 +| --- | --- |
51 +| **Timeframes** | Daily for stocks; any timeframe once the percentage is tuned. |
52 +| **Markets** | Range-bound stocks and ETFs; FX pairs with stable volatility. |
53 +
54 +
55 +## Pairs well with
56 +
57 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
58 +- [Keltner Channels](/docs/charts/indicators/keltner) — EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.
59 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
60 +
61 +## Pitfalls
62 +
63 +- A fixed width ignores volatility regimes: the same 2.5 % is far too wide in calm markets and far too narrow in crashes.
64 +- Must be re-tuned per instrument and timeframe.
65 +
66 +## History
67 +
68 +Classic trading-band technique of the 1960s–1970s (J. M. Hurst's cycle envelopes, 1970); no single inventor.
69 +
70 +## See also
71 +
72 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
73 +- [Keltner Channels](/docs/charts/indicators/keltner)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-eom.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'EOM — Ease of Movement', description: 'How far price moves per unit of volume: positive = rising easily, negative = falling.', image: '/charts/thumbs/indicator-eom-dark-lg.png' }
2 +
3 +# Ease of Movement
4 +
5 +<p className="lead">How far price moves per unit of volume: positive = rising easily, negative = falling.</p>
6 +
7 +<ChartFigure kind="indicator" id="eom" caption="EOM 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="eom" aka={["EOM","EMV","Ease of Movement Value"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Ease of Movement relates the shift of a bar's midpoint to the volume it took to produce that shift, scaled by the bar's range. A big midpoint move on light volume is an "easy" move (large EOM); a small move on heavy volume is a hard one (EOM near zero). Richard Arms designed it as a smoothed line to read along with his Equivolume charts.
14 +
15 +## Formula
16 +
17 +```text
18 +distance = (H + L)/2 − (H₁ + L₁)/2
19 +boxRatio = (V / divisor) / (H − L)
20 +EOM = SMA(distance / boxRatio, n)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `H, L / H₁, L₁` | high and low of the current and previous bar |
26 +| `V` | volume |
27 +| `divisor` | volume scaling constant (default 10 000) |
28 +| `n` | smoothing length (default 14) |
29 +
30 +## How to read it
31 +
32 +- Above zero: price is advancing with little effort — the path of least resistance is up; below zero: the reverse.
33 +- Zero crosses of the smoothed line are the trading signals; the further from zero, the easier the move.
34 +- A rally with EOM sinking towards zero is meeting supply: volume is rising for less progress.
35 +- Values near zero for many bars describe a congestion where volume produces no movement.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `14` | Arms' standard two-week smoothing of the raw one-bar values, which are far too erratic to read alone. |
42 +| `divisor` | `10000` | A scaling constant that brings typical stock volumes into a readable range; raise it for very heavy volume, lower it for thin names. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily bars, as designed. |
51 +| **Markets** | Stocks and ETFs with consistent volume. |
52 +| **Note** | The divisor only scales the output — pick one that keeps values readable and leave it. |
53 +
54 +## Pairs well with
55 +
56 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
57 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
58 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
59 +- [Chaikin Money Flow](/docs/charts/indicators/cmf) — Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.
60 +
61 +## Pitfalls
62 +
63 +- A bar with zero range or zero volume contributes zero by convention, which can dampen the average.
64 +- Scale depends on the divisor and on the share count — never compare levels between symbols.
65 +- Midpoint-based: a wide bar that closes where it opened still registers movement.
66 +
67 +## History
68 +
69 +Richard W. Arms Jr., 1989, Volume Cycles in the Stock Market.
70 +
71 +## See also
72 +
73 +- [On-Balance Volume](/docs/charts/indicators/obv)
74 +- [Volume](/docs/charts/indicators/volume-ma)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-force.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'Force — Force Index', description: 'Price change × volume, EMA-smoothed: the force behind each move, bulls above zero.', image: '/charts/thumbs/indicator-force-dark-lg.png' }
2 +
3 +# Force Index
4 +
5 +<p className="lead">Price change × volume, EMA-smoothed: the force behind each move, bulls above zero.</p>
6 +
7 +<ChartFigure kind="indicator" id="force" caption="Force 13 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="force" aka={["Force","FI","Elder Force Index"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Force Index multiplies the close-to-close change by the bar's volume, so a move counts more when it is large and when many shares changed hands, then smooths the product with an exponential moving average. Alexander Elder designed it to gauge the power of bulls (positive) and bears (negative) behind every rally and decline.
14 +
15 +## Formula
16 +
17 +```text
18 +raw = (C − C₁) × V
19 +Force = EMA(raw, n)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `C, C₁` | current and previous close |
25 +| `V` | volume |
26 +| `n` | EMA length (default 13) |
27 +
28 +## How to read it
29 +
30 +- Above zero: bulls in control; below zero: bears. The zero cross of the 13-bar version marks intermediate trend changes.
31 +- Elder's pullback entry: in an uptrend (rising 22-day EMA of price), buy when the 2-bar Force Index dips below zero.
32 +- Divergence: price at a new high with a lower Force Index high means the rally has less volume-weighted push behind it.
33 +- A sharp spike in Force Index on a breakout confirms it; a breakout with a small Force Index is a candidate for failure.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `13` | Elder's intermediate-term setting (a 2-bar EMA is his short-term trigger); 13 filters daily noise while keeping turns visible. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily bars as designed; weekly for position trades. |
48 +| **Markets** | Stocks and futures with real volume; not meaningful on FX tick counts. |
49 +| **Note** | Part of Elder's Triple Screen — use it with a trend filter on a higher timeframe. |
50 +
51 +## Pairs well with
52 +
53 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
54 +- [Elder Ray](/docs/charts/indicators/elder-ray) — Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.
55 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
56 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
57 +
58 +## Pitfalls
59 +
60 +- The amplitude is in price × volume units and explodes on high-priced, high-volume names — read the shape, not the level.
61 +- A single earnings-day bar dominates the EMA for many bars.
62 +- Splits and volume adjustments change the scale of the history.
63 +
64 +## History
65 +
66 +Dr Alexander Elder, 1993, Trading for a Living.
67 +
68 +## See also
69 +
70 +- [Elder Ray](/docs/charts/indicators/elder-ray)
71 +- [EMA](/docs/charts/indicators/ema)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-hma.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'HMA — Hull Moving Average', description: 'Almost lag-free smooth average built from three weighted MAs; hugs the trend.', image: '/charts/thumbs/indicator-hma-dark-lg.png' }
2 +
3 +# Hull Moving Average
4 +
5 +<p className="lead">Almost lag-free smooth average built from three weighted MAs; hugs the trend.</p>
6 +
7 +<ChartFigure kind="indicator" id="hma" caption="HMA 16 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="hma" aka={["HMA","Hull MA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The HMA combines two WMAs (length n and n/2) to cancel most of the lag, then smooths the result with a WMA of length √n to remove the noise the correction introduced. The line is remarkably smooth yet turns almost with price.
14 +
15 +## Formula
16 +
17 +```text
18 +raw_t = 2·WMA(P, n/2) − WMA(P, n)
19 +HMA_t = WMA(raw, √n)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | length (default 16) |
25 +| `WMA(x, k)` | linearly weighted average of x over k bars |
26 +| `√n` | rounded to the nearest integer (4 for n = 16) |
27 +
28 +## How to read it
29 +
30 +- Trade the colour of the slope: HMA rising = long bias, falling = short bias; turns are the signal.
31 +- Because the lag is small, price rarely strays far from the HMA in trends — a close on the wrong side is meaningful.
32 +- Use a long HMA (55–100) as a smooth trend backdrop and a short one (9–21) for entries.
33 +- The HMA can overshoot: after a sharp move it briefly runs past price before settling.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `16` | Alan Hull's original example; a perfect square so √n = 4 exactly. 9 and 21 are also squares-friendly popular lengths. |
40 +| `source` | `close` | Closes; the HMA is already smooth, so a smoothed source is rarely needed. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Intraday to daily; shines on 5-minute to 1-hour bars where lag is costly. |
49 +| **Markets** | Trending futures, crypto and momentum stocks. |
50 +| **Note** | Not a support / resistance line — treat it as a direction indicator. |
51 +
52 +## Pairs well with
53 +
54 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
55 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
56 +- [Weighted Moving Average](/docs/charts/indicators/wma) — Linearly weighted average: the newest bar counts n times the oldest — faster than the SMA.
57 +
58 +## Pitfalls
59 +
60 +- The 2·WMA − WMA step is an extrapolation: the HMA can print values outside the recent price range.
61 +- In tight ranges the frequent slope changes produce whipsaws — add a volatility filter.
62 +- Lengths that are not perfect squares round √n and behave slightly differently from what the length suggests.
63 +
64 +## History
65 +
66 +Alan Hull, 2005 (Australia), published on his site and in Active Investing.
67 +
68 +## See also
69 +
70 +- [Weighted Moving Average](/docs/charts/indicators/wma)
71 +- [Kaufman Adaptive MA](/docs/charts/indicators/kama)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-hv.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'HV — Historical Volatility', description: 'Annualised standard deviation of log returns, in % — the volatility options are priced on.', image: '/charts/thumbs/indicator-hv-dark-lg.png' }
2 +
3 +# Historical Volatility
4 +
5 +<p className="lead">Annualised standard deviation of log returns, in % — the volatility options are priced on.</p>
6 +
7 +<ChartFigure kind="indicator" id="hv" caption="HV 10 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="hv" aka={["HV","Realised volatility","Statistical volatility"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Historical volatility is the standard deviation of the logarithmic close-to-close returns over n bars, scaled to a yearly figure by the square root of the number of periods per year and expressed in percent. It is the realised counterpart of the implied volatility quoted by options, and the volatility unit used in risk models.
14 +
15 +## Formula
16 +
17 +```text
18 +r = ln(C / C₁)
19 +HV = σ(r, n) × √annual × 100
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `C, C₁` | current and previous close |
25 +| `n` | window length (default 10) |
26 +| `annual` | periods per year (default 252 trading days) |
27 +| `σ` | population standard deviation |
28 +
29 +## How to read it
30 +
31 +- Compare with implied volatility: IV well above HV means options are expensive relative to what the stock actually does; IV below HV means they are cheap.
32 +- Volatility clusters and mean-reverts: extremely low HV rarely lasts; spikes decay over weeks.
33 +- Rising HV during a decline is the usual "fear" signature; rising HV during a rally is rarer and often unstable.
34 +- A 20 % annualised HV means roughly a 1.26 % daily one-standard-deviation move (20 / √252).
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `10` | Two trading weeks — a fast realised-vol estimate; 20 or 30 is common for comparison with 30-day implied volatility. |
41 +| `annual` | `252` | US equity trading days per year; use 365 for crypto, 24 × 252 for 1-hour equity bars, 390 × 252 for 1-minute bars. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | Daily bars, where the 252 convention applies directly. |
50 +| **Markets** | Stocks, ETFs and indices with listed options; crypto with annual set to 365. |
51 +| **Note** | On intraday bars adjust the periods-per-year input or the annualised number is meaningless. |
52 +
53 +## Pairs well with
54 +
55 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
56 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width) — Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.
57 +- [Standard Deviation](/docs/charts/indicators/stddev) — Rolling standard deviation of price over n bars — raw dispersion in price units.
58 +
59 +## Pitfalls
60 +
61 +- With a 10-bar window one large return dominates the estimate.
62 +- Close-to-close ignores intrabar ranges; ATR or Parkinson estimators capture them.
63 +- Wrong periods-per-year on intraday charts inflates or deflates the figure by orders of magnitude.
64 +
65 +## History
66 +
67 +Standard statistical measure; adopted as the realised-volatility benchmark with the Black–Scholes model (1973).
68 +
69 +## See also
70 +
71 +- [ATR](/docs/charts/indicators/atr)
72 +- [Standard Deviation](/docs/charts/indicators/stddev)
73 +- [Options chains & Greeks](/docs/options)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-ichimoku.mdx +80 −0
@@ -0,0 +1,80 @@
1 +export const meta = { title: 'Ichimoku Cloud — Ichimoku Kinko Hyo', description: 'Five lines and a cloud: trend, momentum, support and resistance in one equilibrium chart.', image: '/charts/thumbs/indicator-ichimoku-dark-lg.png' }
2 +
3 +# Ichimoku Kinko Hyo
4 +
5 +<p className="lead">Five lines and a cloud: trend, momentum, support and resistance in one equilibrium chart.</p>
6 +
7 +<ChartFigure kind="indicator" id="ichimoku" caption="Ichimoku 9 26 52 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="ichimoku" aka={["Ichimoku Cloud","Ichimoku"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Ichimoku plots two midpoint lines (Tenkan and Kijun), a cloud built from two spans projected 26 bars ahead (Senkou A and B) and the close shifted 26 bars back (Chikou). Everything is derived from midpoints of highs and lows rather than averages, and the forward displacement means the chart shows where support and resistance will be, not only where they were.
14 +
15 +## Formula
16 +
17 +```text
18 +Tenkan = (max H + min L over 9) / 2
19 +Kijun = (max H + min L over 26) / 2
20 +SenkouA = (Tenkan + Kijun) / 2, plotted 26 bars ahead
21 +SenkouB = (max H + min L over 52) / 2, plotted 26 bars ahead
22 +Chikou = close, plotted 26 bars back
23 +```
24 +
25 +| Symbol | Meaning |
26 +| --- | --- |
27 +| `conversion` | Tenkan-sen length (9) |
28 +| `base` | Kijun-sen length (26) |
29 +| `spanB` | Senkou span B length (52) |
30 +| `displacement` | forward shift of the cloud and backward shift of Chikou (26) |
31 +
32 +## How to read it
33 +
34 +- Price above the cloud = bullish, below = bearish, inside = neutral; the cloud is the zone of equilibrium and support / resistance.
35 +- Tenkan crossing above Kijun (TK cross) is a buy signal — strong above the cloud, weak below it.
36 +- Cloud colour (Senkou A above B) shows the future trend bias; a thin cloud is easy to break, a thick one is strong support / resistance.
37 +- Chikou above the price of 26 bars ago confirms bullish momentum; Chikou tangled in past candles means indecision.
38 +- Kijun is the equilibrium of the last 26 bars: price far from it tends to snap back ("Kijun gravity").
39 +
40 +## Default settings
41 +
42 +| Input | Default | Why |
43 +| --- | --- | --- |
44 +| `conversion` | `9` | A week and a half of the six-day Japanese trading week of the 1930s. |
45 +| `base` | `26` | One trading month of six-day weeks — also the displacement of the cloud. |
46 +| `spanB` | `52` | Two trading months, the slow component of the cloud. |
47 +| `displacement` | `26` | The cloud is projected one month forward and Chikou one month back, matching the Kijun period. |
48 +
49 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
50 +
51 +## Best for
52 +
53 +| | |
54 +| --- | --- |
55 +| **Timeframes** | Daily and weekly, where it was designed; 4-hour and 1-hour for FX intraday. |
56 +| **Markets** | Indices, FX and stocks with long swings; less useful on choppy small caps. |
57 +| **Note** | Read the whole system at once — a single line in isolation is not Ichimoku. |
58 +
59 +## Pairs well with
60 +
61 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
62 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
63 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
64 +
65 +## Pitfalls
66 +
67 +- Five lines clutter fast intraday charts; hide Chikou or the Tenkan if you need clarity.
68 +- The 9 / 26 / 52 defaults assume the historical six-day week; modern adaptations (7 / 22 / 44) exist but the classic numbers remain the ones the market watches.
69 +- Signals inside the cloud are unreliable by construction — wait for a clean exit.
70 +
71 +## History
72 +
73 +Goichi Hosoda (pen name Ichimoku Sanjin), developed in the 1930s and published in 1968–1969 after three decades of refinement.
74 +
75 +## See also
76 +
77 +- [ADX](/docs/charts/indicators/adx)
78 +- [Donchian Channels](/docs/charts/indicators/donchian)
79 +- [Charting guide](/docs/charts)
80 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-kama.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'KAMA — Kaufman Adaptive Moving Average', description: 'Speeds up in trends, flattens in noise: the smoothing adapts to the efficiency ratio.', image: '/charts/thumbs/indicator-kama-dark-lg.png' }
2 +
3 +# Kaufman Adaptive Moving Average
4 +
5 +<p className="lead">Speeds up in trends, flattens in noise: the smoothing adapts to the efficiency ratio.</p>
6 +
7 +<ChartFigure kind="indicator" id="kama" caption="KAMA 10 2 30 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="kama" aka={["KAMA","Adaptive MA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +KAMA measures how directional the last n bars were — the net move divided by the sum of every bar-to-bar move — and turns that efficiency ratio into a variable EMA constant between a fast and a slow speed. In a clean trend it behaves like a 2-period EMA; in chop it slows to a 30-period EMA and stops reacting.
14 +
15 +## Formula
16 +
17 +```text
18 +ER = |P_t − P_{t−n}| / Σ_{i=1}^{n} |P_{t−i+1} − P_{t−i}|
19 +SC = [ER·(2/(fast+1) − 2/(slow+1)) + 2/(slow+1)]²
20 +KAMA_t = KAMA_{t−1} + SC·(P_t − KAMA_{t−1})
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | efficiency-ratio window (default 10) |
26 +| `ER` | efficiency ratio, 1 = perfectly directional, 0 = pure noise |
27 +| `fast / slow` | EMA lengths of the fastest and slowest allowed speeds (2 / 30) |
28 +| `SC` | smoothing constant of the bar |
29 +
30 +## How to read it
31 +
32 +- A flat KAMA means the market is inefficient (noisy): stand aside or fade extremes.
33 +- When KAMA starts to slope and price closes on the sloping side, a trend has become efficient — that is the entry.
34 +- Price crossing a flat KAMA is not a signal; crossing a sloping KAMA is.
35 +- Kaufman's own filter: enter when KAMA moves more than a small multiple of its recent standard deviation.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `10` | Kaufman's recommendation: two weeks of daily bars are enough to judge directional efficiency. |
42 +| `fast` | `2` | Fastest allowed EMA (α = 0.667) so the line can nearly track price in a perfect trend. |
43 +| `slow` | `30` | Slowest allowed EMA (α = 0.065) so the line practically freezes in noise. |
44 +| `source` | `close` | Closes; noise in the source directly lowers the efficiency ratio. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Daily and 1-hour bars; effective on any timeframe with alternating trends and ranges. |
53 +| **Markets** | Futures and FX, where trend / noise regimes alternate. |
54 +| **Note** | Read the flatness of the line as an information signal in its own right. |
55 +
56 +## Pairs well with
57 +
58 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
59 +- [Choppiness Index](/docs/charts/indicators/choppiness) — Is the market trending or chopping? 0–100: above 61.8 = chop, below 38.2 = trend.
60 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
61 +
62 +## Pitfalls
63 +
64 +- The squared smoothing constant makes KAMA very slow to restart after a long range — the first leg of a new trend is often missed.
65 +- Efficiency does not mean profitability: a slow, steady grind scores high while a fast volatile trend can score low.
66 +
67 +## History
68 +
69 +Perry J. Kaufman, 1995, in Smarter Trading (refined in Trading Systems and Methods).
70 +
71 +## See also
72 +
73 +- [Choppiness Index](/docs/charts/indicators/choppiness)
74 +- [Arnaud Legoux MA](/docs/charts/indicators/alma)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-keltner.mdx +76 −0
@@ -0,0 +1,76 @@
1 +export const meta = { title: 'KC — Keltner Channels', description: 'EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.', image: '/charts/thumbs/indicator-keltner-dark-lg.png' }
2 +
3 +# Keltner Channels
4 +
5 +<p className="lead">EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.</p>
6 +
7 +<ChartFigure kind="indicator" id="keltner" caption="KC 20 2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="keltner" aka={["KC","Keltner"]} category="Volatility" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Keltner Channels surround an exponential moving average with bands placed a multiple of the Average True Range above and below it. The ATR reacts to gaps and intrabar ranges rather than to close-to-close dispersion, so the channel is smoother than Bollinger Bands and less prone to sudden expansions.
14 +
15 +## Formula
16 +
17 +```text
18 +middle = EMA(close, n)
19 +upper = middle + k × ATR(m)
20 +lower = middle − k × ATR(m)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | EMA length (default 20) |
26 +| `k` | ATR multiplier (default 2) |
27 +| `m` | ATR length, Wilder smoothing (default 10) |
28 +| `ATR` | average true range: mean of max(H−L, \|H−C₁\|, \|L−C₁\|) |
29 +
30 +## How to read it
31 +
32 +- Closes beyond the upper channel in an uptrend signal strong momentum; a return inside the channel is the first sign of a pause.
33 +- In a range, channel touches act as dynamic support and resistance around the EMA.
34 +- Squeeze: when Bollinger Bands move inside the Keltner Channel, volatility is compressed — the exit of the Bollinger Bands is the breakout signal (Carter's TTM Squeeze logic).
35 +- The slope of the middle EMA gives the bias; trade channel pullbacks in the direction of that slope.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `20` | One trading month of daily bars, matching the Bollinger default so the two channels can be compared directly. |
42 +| `mult` | `2` | Two ATRs contain most normal swings; Chester Keltner used 1.5, Linda Raschke popularised 2 × ATR. |
43 +| `atrLength` | `10` | A 10-bar ATR follows changes in range faster than the 20-bar basis while staying smooth thanks to Wilder's smoothing. |
44 +
45 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
46 +
47 +## Best for
48 +
49 +| | |
50 +| --- | --- |
51 +| **Timeframes** | Daily and 4-hour / 1-hour bars for trend pullbacks; works on 5-minute bars in liquid futures. |
52 +| **Markets** | Futures, FX and indices where gaps and true range matter. |
53 +| **Note** | Preferred over Bollinger when you want stable bands during news spikes. |
54 +
55 +## Pairs well with
56 +
57 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
58 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
59 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
60 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
61 +
62 +## Pitfalls
63 +
64 +- A single wide-range bar inflates the ATR for m bars and moves the channel abruptly.
65 +- Fixed multiples ignore the distribution of returns — a 2 × ATR touch is not a probability statement.
66 +- On thin markets the true range is dominated by spreads and wicks.
67 +
68 +## History
69 +
70 +Chester W. Keltner, 1960, in How to Make Money in Commodities (SMA basis); the EMA + ATR form is Linda Raschke's 1980s refinement.
71 +
72 +## See also
73 +
74 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
75 +- [ATR](/docs/charts/indicators/atr)
76 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-klinger.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'KVO — Klinger Oscillator', description: 'EMA 34 minus EMA 55 of signed volume, with a signal line — long-term money flow turns.', image: '/charts/thumbs/indicator-klinger-dark-lg.png' }
2 +
3 +# Klinger Oscillator
4 +
5 +<p className="lead">EMA 34 minus EMA 55 of signed volume, with a signal line — long-term money flow turns.</p>
6 +
7 +<ChartFigure kind="indicator" id="klinger" caption="KVO 34 55 13 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="klinger" aka={["KVO","Klinger Volume Oscillator"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Klinger Volume Oscillator signs each bar's volume by the direction of its typical price, then takes the difference between a 34-period and a 55-period EMA of that signed volume; a 13-period EMA of the oscillator serves as the signal line. Stephen Klinger built it to track long-term money flow while staying sensitive enough to catch short-term turns.
14 +
15 +## Formula
16 +
17 +```text
18 +TP = (H + L + C) / 3
19 +SV = +V if TP ≥ TP₁, −V otherwise
20 +KVO = EMA(SV, fast) − EMA(SV, slow)
21 +signal = EMA(KVO, signal)
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `TP, TP₁` | typical price of the current and previous bar |
27 +| `SV` | signed volume |
28 +| `fast / slow` | EMA lengths (defaults 34 / 55) |
29 +| `signal` | signal EMA length (default 13) |
30 +
31 +## How to read it
32 +
33 +- KVO crossing above its signal line while price is above its 100-bar EMA is the classic long trigger; the mirror for shorts.
34 +- Zero line: above it, the fast money-flow average exceeds the slow one — accumulation; below, distribution.
35 +- Divergence between price highs and KVO highs is the strongest warning it gives.
36 +- Ignore signals against the direction of the long-term price trend.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `fast` | `34` | Fibonacci-inspired lengths chosen by Klinger: 34 bars tracks roughly seven weeks of daily money flow. |
43 +| `slow` | `55` | The next Fibonacci number, about eleven weeks — the baseline the fast EMA is compared with. |
44 +| `signal` | `13` | A 13-bar EMA (again Fibonacci) smooths the oscillator enough for crossovers without adding weeks of lag. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Daily bars; weekly for long-term positioning. |
53 +| **Markets** | Stocks, ETFs and futures with real volume. |
54 +| **Note** | A slow indicator — expect few signals and use it to confirm, not to time. |
55 +
56 +## Pairs well with
57 +
58 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
59 +- [Chaikin Money Flow](/docs/charts/indicators/cmf) — Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.
60 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
61 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
62 +
63 +## Pitfalls
64 +
65 +- Needs well over 55 bars of history before the lines stabilise.
66 +- This is the simplified signed-volume form; Klinger's original volume-force formula (with trend and cumulative-measure terms) produces different values.
67 +- Volume units: the amplitude changes with the symbol and after splits.
68 +
69 +## History
70 +
71 +Stephen J. Klinger, 1997, Technical Analysis of Stocks & Commodities.
72 +
73 +## See also
74 +
75 +- [Chaikin Money Flow](/docs/charts/indicators/cmf)
76 +- [MACD](/docs/charts/indicators/macd)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-kst.mdx +82 −0
@@ -0,0 +1,82 @@
1 +export const meta = { title: 'KST — Know Sure Thing', description: 'Weighted sum of four smoothed rates of change plus a signal line: multi-cycle momentum.', image: '/charts/thumbs/indicator-kst-dark-lg.png' }
2 +
3 +# Know Sure Thing
4 +
5 +<p className="lead">Weighted sum of four smoothed rates of change plus a signal line: multi-cycle momentum.</p>
6 +
7 +<ChartFigure kind="indicator" id="kst" caption="KST with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="kst" aka={["KST","Pring's KST"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +KST combines four rates of change of different lengths, each smoothed by its own simple moving average and weighted 1 to 4 with the longest horizon counting most. Summing several cycles gives a smoother momentum curve than any single ROC, and a moving-average signal line turns it into a crossover system.
14 +
15 +## Formula
16 +
17 +```text
18 +KST = 1×SMA(ROC(src, r1), s1) + 2×SMA(ROC(src, r2), s2)
19 + + 3×SMA(ROC(src, r3), s3) + 4×SMA(ROC(src, r4), s4)
20 +signal = SMA(KST, sig)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `r1…r4` | ROC lengths (default 10, 15, 20, 30) |
26 +| `s1…s4` | SMA lengths applied to each ROC (default 10, 10, 10, 15) |
27 +| `sig` | signal SMA length (default 9) |
28 +| `src` | price source (default close) |
29 +
30 +## How to read it
31 +
32 +- KST crossing above its signal line is a buy, crossing below a sell — Pring's primary rule.
33 +- Zero line: positive KST means the weighted momentum of all four cycles is net bullish.
34 +- Divergence between KST peaks and price peaks is more trustworthy than on a single ROC because several horizons must agree.
35 +- The direction of the signal line itself confirms the intermediate trend; trade crossovers only in that direction.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `roc1` | `10` | Pring's daily short-term set: the shortest cycle, two trading weeks. |
42 +| `roc2` | `15` | Three trading weeks. |
43 +| `roc3` | `20` | One trading month. |
44 +| `roc4` | `30` | Six weeks — the longest horizon, given the heaviest weight (4). |
45 +| `sma1` | `10` | Smoothing of the 10-bar ROC. |
46 +| `sma2` | `10` | Smoothing of the 15-bar ROC. |
47 +| `sma3` | `10` | Smoothing of the 20-bar ROC. |
48 +| `sma4` | `15` | Longer smoothing for the longest ROC so all four components have similar noise levels. |
49 +| `signal` | `9` | Nine-bar signal, the same convention as MACD. |
50 +| `source` | `close` | Closes feed every rate of change. |
51 +
52 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
53 +
54 +## Best for
55 +
56 +| | |
57 +| --- | --- |
58 +| **Timeframes** | Daily bars with these defaults; Pring published other sets for weekly and monthly charts. |
59 +| **Markets** | Indices, sectors and ETFs where cycle blending is meaningful. |
60 +| **Note** | Needs at least 45 bars of history before the first value. |
61 +
62 +## Pairs well with
63 +
64 +- [Rate of Change](/docs/charts/indicators/roc) — Percent change of price versus n bars ago; the zero line separates rising from falling.
65 +- [Coppock Curve](/docs/charts/indicators/coppock) — WMA of two summed rates of change; a turn up from below zero marks major market bottoms.
66 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
67 +
68 +## Pitfalls
69 +
70 +- Nine parameters invite over-fitting; keep one of Pring's published sets.
71 +- Lag grows with the longest component — the 30-bar ROC smoothed over 15 bars reacts slowly.
72 +- The 1-2-3-4 weighting means the long cycle dominates: short-term turns barely move the line.
73 +
74 +## History
75 +
76 +Martin J. Pring, 1992, in Technical Analysis of Stocks & Commodities.
77 +
78 +## See also
79 +
80 +- [Rate of Change](/docs/charts/indicators/roc)
81 +- [Coppock Curve](/docs/charts/indicators/coppock)
82 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-lsma.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'LSMA — Linear Regression (LSMA + channel)', description: 'End point of the best-fit line over n bars, with a ±k·σ channel of the residuals.', image: '/charts/thumbs/indicator-lsma-dark-lg.png' }
2 +
3 +# Linear Regression (LSMA + channel)
4 +
5 +<p className="lead">End point of the best-fit line over n bars, with a ±k·σ channel of the residuals.</p>
6 +
7 +<ChartFigure kind="indicator" id="lsma" caption="LSMA 25 2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="lsma" aka={["LSMA","Least squares MA","Linear regression curve","Regression channel"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +For every bar the indicator fits a straight line through the last n prices by least squares and plots the value of that line at the current bar; the result is a moving average that leans toward where the trend is heading rather than where it has been. The channel adds bands at ± mult standard deviations of the fit residuals, framing how far price strays from its local trend.
14 +
15 +## Formula
16 +
17 +```text
18 +fit P_i ≈ a + b·i over the last n bars (ordinary least squares)
19 +LSMA_t = a + b·(n − 1)
20 +upper / lower = LSMA_t ± mult · σ(residuals)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | regression window (default 25) |
26 +| `a, b` | intercept and slope of the fitted line |
27 +| `σ(residuals)` | standard deviation of price minus the fitted line over the window |
28 +| `mult` | channel width in σ (default 2) |
29 +
30 +## How to read it
31 +
32 +- The slope of the LSMA is the local trend; a change of sign is an early trend-change alert.
33 +- Price at the upper band is stretched above its trend — expect mean reversion in ranges, or a continuation flag in strong trends.
34 +- A narrowing channel signals a quiet, orderly trend; a widening one signals a breakout or a breakdown of the fit.
35 +- The LSMA leads the SMA of the same length by roughly n/2 bars — compare them to see the lag you save.
36 +- Because it extrapolates, the LSMA can print outside the price range after a sharp reversal.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `length` | `25` | About five weeks of daily bars — long enough for a meaningful regression, short enough to bend with swings. |
43 +| `mult` | `2` | Two standard deviations contain roughly 95 % of the residuals if they are normal — the same convention as Bollinger Bands. |
44 +| `source` | `close` | Closes define the fitted line; hl2 gives a slightly smoother fit. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Daily and 4-hour swing charts; intraday on 15-minute and above. |
53 +| **Markets** | Any market; especially readable on trending stocks and indices. |
54 +| **Note** | For a channel anchored between two chosen bars, use the Regression trend drawing tool instead. |
55 +
56 +## Pairs well with
57 +
58 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
59 +- [Standard Deviation](/docs/charts/indicators/stddev) — Rolling standard deviation of price over n bars — raw dispersion in price units.
60 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
61 +
62 +## Pitfalls
63 +
64 +- A linear fit through a curved move (parabolic rally) is misleading — the channel will look violated while the trend is intact.
65 +- The channel is symmetric and assumes roughly normal residuals; gaps and spikes break that assumption.
66 +- Long windows fit the past well and the present poorly: the end point lags at turns.
67 +
68 +## History
69 +
70 +Least-squares regression dates to Legendre and Gauss (1805–1809); its use as a moving average and channel was popularised by Gilbert Raff (1991) and Tushar Chande.
71 +
72 +## See also
73 +
74 +- [Regression trend (drawing tool)](/docs/charts/tools/regression)
75 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
76 +- [Standard Deviation](/docs/charts/indicators/stddev)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-macd.mdx +79 −0
@@ -0,0 +1,79 @@
1 +export const meta = { title: 'MACD — Moving Average Convergence Divergence', description: 'Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.', image: '/charts/thumbs/indicator-macd-dark-lg.png' }
2 +
3 +# Moving Average Convergence Divergence
4 +
5 +<p className="lead">Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.</p>
6 +
7 +<ChartFigure kind="indicator" id="macd" caption="MACD 12 26 9 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="macd" aka={["MACD"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The MACD line is the distance between a fast and a slow exponential moving average, so it measures whether short-term prices are pulling away from or converging towards the longer trend. A signal EMA of the MACD line and the histogram of their difference turn that distance into crossovers and momentum readings.
14 +
15 +## Formula
16 +
17 +```text
18 +MACD = EMA(src, fast) − EMA(src, slow)
19 +signal = EMA(MACD, signal)
20 +histogram = MACD − signal
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `fast` | short EMA length (default 12) |
26 +| `slow` | long EMA length (default 26) |
27 +| `signal` | EMA length applied to the MACD line (default 9) |
28 +| `src` | price source (default close) |
29 +
30 +## How to read it
31 +
32 +- MACD above zero: the fast average is above the slow one — bullish regime; below zero, bearish regime.
33 +- MACD crossing above the signal line is a bullish crossover; the histogram flipping from negative to positive shows the same event.
34 +- Histogram bars shrinking towards zero mean momentum is fading before the crossover actually happens — the earliest warning.
35 +- Bearish divergence: price makes a higher high while the MACD (or its histogram) makes a lower high.
36 +- Distance from zero matters: crossovers far from zero after an extended move are more reliable than crossovers hugging the zero line.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `fast` | `12` | Appel built the default on the 1970s six-day trading week: 12 bars ≈ two weeks. |
43 +| `slow` | `26` | 26 bars ≈ one month of six-day weeks; 12 / 26 keeps the same ratio traders still use on daily bars. |
44 +| `signal` | `9` | Nine bars ≈ one and a half weeks, quick enough to catch turns without flipping every day. |
45 +| `source` | `close` | The EMAs are computed on closes; hl2 or ohlc4 reduce gap noise on intraday bars. |
46 +
47 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
48 +
49 +## Best for
50 +
51 +| | |
52 +| --- | --- |
53 +| **Timeframes** | Daily and weekly first; on intraday bars the standard lengths still work but the zero line loses meaning. |
54 +| **Markets** | Trending stocks, indices and futures; any liquid market with sustained moves. |
55 +| **Note** | A trend-following momentum tool — do not expect it to time reversals in a tight range. |
56 +
57 +## Pairs well with
58 +
59 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
60 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
61 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
62 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
63 +
64 +## Pitfalls
65 +
66 +- In sideways markets the two EMAs braid around each other and the crossovers whipsaw.
67 +- The MACD is in price units, so its values are not comparable across symbols or after a large price change.
68 +- The histogram peaks and troughs are the signal — the crossover itself is late.
69 +
70 +## History
71 +
72 +Gerald Appel, late 1970s; the histogram was added by Thomas Aspray in 1986.
73 +
74 +## See also
75 +
76 +- [Exponential Moving Average](/docs/charts/indicators/ema)
77 +- [True Strength Index](/docs/charts/indicators/tsi)
78 +- [Charting guide](/docs/charts)
79 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-mass.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'Mass — Mass Index', description: 'Sum of range-EMA ratios; a bulge above 27 then back under 26.5 flags a reversal.', image: '/charts/thumbs/indicator-mass-dark-lg.png' }
2 +
3 +# Mass Index
4 +
5 +<p className="lead">Sum of range-EMA ratios; a bulge above 27 then back under 26.5 flags a reversal.</p>
6 +
7 +<ChartFigure kind="indicator" id="mass" caption="Mass 9 25 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="mass" aka={["Mass","MI"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Mass Index sums, over 25 bars, the ratio between a 9-period EMA of the high–low range and a double-smoothed EMA of the same range. It rises when ranges expand faster than their smoothed baseline and falls when they contract. Donald Dorsey used it to spot the "reversal bulge": a widening of ranges that tends to end the prevailing trend.
14 +
15 +## Formula
16 +
17 +```text
18 +ratio = EMA(H − L, e) / EMA(EMA(H − L, e), e)
19 +Mass = Σ ratio over the last s bars
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `H − L` | bar range |
25 +| `e` | EMA length (default 9) |
26 +| `s` | summation window (default 25) |
27 +
28 +## How to read it
29 +
30 +- Reversal bulge: Mass rises above 27 then falls back below 26.5 — a trend reversal is likely; the direction comes from a 9-day EMA of price (falling EMA → buy, rising EMA → sell).
31 +- Values around 25 are the neutral zone; the index does not tell direction on its own.
32 +- A bulge that fails to cross 27 (peaks near 26.5) is a weaker warning — treat it as volatility expansion, not a reversal.
33 +- Use it to time exits of an existing position rather than fresh entries.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `ema` | `9` | Dorsey's original nine-bar EMA — fast enough to register a change of range within two weeks. |
40 +| `sum` | `25` | Summing 25 ratios (each ≈ 1 in quiet markets) centres the index near 25 and puts 27 / 26.5 at meaningful distances. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily bars, as designed; weekly for long-term positions. |
49 +| **Markets** | Stocks and indices with well-formed swings. |
50 +| **Note** | The 26.5 / 27 thresholds were calibrated on daily data — recalibrate on other timeframes. |
51 +
52 +## Pairs well with
53 +
54 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
55 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
56 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
57 +
58 +## Pitfalls
59 +
60 +- The index needs roughly 9 + 9 + 25 bars before its value is meaningful — expect a long warm-up.
61 +- Bulges are rare; forcing trades on near-misses destroys the edge.
62 +- It is direction-blind: without the EMA rule, a bulge is just "something will move".
63 +
64 +## History
65 +
66 +Donald Dorsey, 1992, Technical Analysis of Stocks & Commodities.
67 +
68 +## See also
69 +
70 +- [ATR](/docs/charts/indicators/atr)
71 +- [EMA](/docs/charts/indicators/ema)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-mfi.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'MFI — Money Flow Index', description: 'Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.', image: '/charts/thumbs/indicator-mfi-dark-lg.png' }
2 +
3 +# Money Flow Index
4 +
5 +<p className="lead">Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.</p>
6 +
7 +<ChartFigure kind="indicator" id="mfi" caption="MFI 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="mfi" aka={["MFI","Volume-weighted RSI"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Money Flow Index applies the RSI logic to money flow — typical price times volume — instead of to price changes alone. Bars with a rising typical price add positive flow, bars with a falling one add negative flow, and the ratio over n bars is mapped to 0–100. Volume gives extra weight to the bars where real money moved.
14 +
15 +## Formula
16 +
17 +```text
18 +TP = (H + L + C) / 3
19 +flow = TP × V (positive if TP > TP₁, negative if TP < TP₁)
20 +MFR = Σ positive flow(n) / Σ negative flow(n)
21 +MFI = 100 − 100 / (1 + MFR)
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `TP, TP₁` | typical price of the current and previous bar |
27 +| `V` | volume |
28 +| `n` | lookback length (default 14) |
29 +| `MFR` | money flow ratio |
30 +
31 +## How to read it
32 +
33 +- Above 80: overbought; below 20: oversold — narrower zones than RSI's 70 / 30 because volume makes the index more volatile.
34 +- Divergences are its strength: price at a new high with MFI at a lower high means the new high came on lighter money flow.
35 +- Failure swings (an oscillator high below 80 followed by a break of its recent low) are stronger than the levels alone.
36 +- Sustained readings above 50 mark accumulation regimes; below 50, distribution.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `length` | `14` | Mirrors Wilder's RSI window so the two oscillators can be read side by side; 10 for faster intraday reads. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily and 1-hour bars. |
51 +| **Markets** | Stocks, ETFs, futures and crypto with real volume. |
52 +| **Note** | Read it next to the RSI: when they disagree, volume is telling you something. |
53 +
54 +## Pairs well with
55 +
56 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
57 +- [Chaikin Money Flow](/docs/charts/indicators/cmf) — Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.
58 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
59 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
60 +
61 +## Pitfalls
62 +
63 +- In strong trends MFI can stay above 80 for a long time — extreme readings are not reversals.
64 +- Volume spikes (news, expiries) dominate a 14-bar window and produce false extremes.
65 +- Uses the typical price direction, so a bar can close down yet add positive flow if its range shifted up.
66 +
67 +## History
68 +
69 +Gene Quong and Avrum Soudack, 1989, Technical Analysis of Stocks & Commodities.
70 +
71 +## See also
72 +
73 +- [RSI](/docs/charts/indicators/rsi)
74 +- [Chaikin Money Flow](/docs/charts/indicators/cmf)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-momentum.mdx +70 −0
@@ -0,0 +1,70 @@
1 +export const meta = { title: 'Mom — Momentum', description: 'Price minus price n bars ago, in price units; the zero line is the trend switch.', image: '/charts/thumbs/indicator-momentum-dark-lg.png' }
2 +
3 +# Momentum
4 +
5 +<p className="lead">Price minus price n bars ago, in price units; the zero line is the trend switch.</p>
6 +
7 +<ChartFigure kind="indicator" id="momentum" caption="Mom 10 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="momentum" aka={["Mom","Price momentum"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Momentum is the raw difference between the current price and the price n bars earlier. It is the Rate of Change without the division: same shape, but expressed in points instead of percent, which keeps it directly comparable to the price scale of the chart.
14 +
15 +## Formula
16 +
17 +```text
18 +Mom = src − src[n bars ago]
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | lookback length in bars (default 10) |
24 +| `src` | price source (default close) |
25 +
26 +## How to read it
27 +
28 +- Above zero: price is higher than n bars ago; below zero: lower. The zero cross is the basic trend signal.
29 +- The slope matters more than the level: momentum peaking while price still rises is the classic warning of a maturing move.
30 +- A moving average of the momentum line (add an SMA to the pane) acts as a signal line for crossovers.
31 +- Compare peaks: a higher price high with a lower momentum high is a bearish divergence.
32 +
33 +## Default settings
34 +
35 +| Input | Default | Why |
36 +| --- | --- | --- |
37 +| `length` | `10` | Ten bars — two trading weeks on daily data — is the value used in most textbooks; 12 and 20 are the other common choices. |
38 +| `source` | `close` | Closes are the standard; hl2 smooths intraday gaps. |
39 +
40 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
41 +
42 +## Best for
43 +
44 +| | |
45 +| --- | --- |
46 +| **Timeframes** | Daily bars for swing work; shorter lengths on hourly bars. |
47 +| **Markets** | Single instruments — the point scale is not comparable across symbols. |
48 +| **Note** | Prefer ROC when comparing several assets. |
49 +
50 +## Pairs well with
51 +
52 +- [Rate of Change](/docs/charts/indicators/roc) — Percent change of price versus n bars ago; the zero line separates rising from falling.
53 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
54 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
55 +
56 +## Pitfalls
57 +
58 +- Measured in price units, so a reading of 5 means something different on a $20 stock and a $2 000 index.
59 +- Like ROC, it jumps when an old outlier bar leaves the window.
60 +- Unbounded, so there are no fixed overbought / oversold levels.
61 +
62 +## History
63 +
64 +One of the oldest indicators in technical analysis; described in Edwards and Magee (1948) and formalised in the early charting literature.
65 +
66 +## See also
67 +
68 +- [Rate of Change](/docs/charts/indicators/roc)
69 +- [MACD](/docs/charts/indicators/macd)
70 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-obv.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'OBV — On-Balance Volume', description: 'Running total of volume signed by the close direction; should confirm price trends.', image: '/charts/thumbs/indicator-obv-dark-lg.png' }
2 +
3 +# On-Balance Volume
4 +
5 +<p className="lead">Running total of volume signed by the close direction; should confirm price trends.</p>
6 +
7 +<ChartFigure kind="indicator" id="obv" caption="OBV with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="obv" aka={["OBV"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +On-Balance Volume adds the bar's volume when the close is higher than the previous close, subtracts it when lower, and leaves it unchanged on an equal close. The cumulative line rises when up-days carry more volume than down-days, revealing accumulation or distribution that price alone can hide.
14 +
15 +## Formula
16 +
17 +```text
18 +OBV = OBV₁ + V if C > C₁
19 + = OBV₁ − V if C < C₁
20 + = OBV₁ if C = C₁
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `V` | volume of the bar |
26 +| `C, C₁` | current and previous close |
27 +| `OBV₁` | previous OBV value |
28 +
29 +## How to read it
30 +
31 +- Confirmation: a rising price with a rising OBV is a healthy trend; a rising price with a flat or falling OBV is a trend running on thin participation.
32 +- Bullish divergence: price makes a lower low while OBV makes a higher low — buyers are absorbing supply before price turns.
33 +- OBV breakouts often lead price breakouts by a few bars (Granville's "volume precedes price").
34 +- Only the slope and the shape matter — the absolute level depends on where the series starts.
35 +- Draw trend lines and support / resistance on OBV exactly as on price.
36 +
37 +## Default settings
38 +
39 +This indicator has no inputs — there is nothing to tune.
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and weekly bars, where volume is cleanest; usable on 1-hour bars for liquid stocks. |
48 +| **Markets** | Stocks, ETFs and futures with real volume; not meaningful on FX tick counts. |
49 +| **Note** | Compare OBV with a moving average of itself to define its trend. |
50 +
51 +## Pairs well with
52 +
53 +- [Accumulation / Distribution](/docs/charts/indicators/ad) — Cumulative money-flow volume, each bar weighted by where the close sits in its range.
54 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
55 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
56 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
57 +
58 +## Pitfalls
59 +
60 +- One extreme-volume day (index rebalancing, options expiry) moves the line forever — OBV never forgets.
61 +- A tiny up-close counts the whole day's volume as buying; the close direction is a crude sign.
62 +- The level restarts with the loaded history: only relative moves are comparable between charts.
63 +
64 +## History
65 +
66 +Joseph Granville, 1963, Granville's New Key to Stock Market Profits.
67 +
68 +## See also
69 +
70 +- [Accumulation / Distribution](/docs/charts/indicators/ad)
71 +- [Chaikin Money Flow](/docs/charts/indicators/cmf)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-pivots.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'Floor pivots — Pivot Points', description: 'Support and resistance levels for the current period computed from the previous H, L, C.', image: '/charts/thumbs/indicator-pivots-dark-lg.png' }
2 +
3 +# Pivot Points
4 +
5 +<p className="lead">Support and resistance levels for the current period computed from the previous H, L, C.</p>
6 +
7 +<ChartFigure kind="indicator" id="pivots" caption="Pivots classic day with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="pivots" aka={["Floor pivots","PP","Daily pivots"]} category="Levels & structure" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Pivot Points derive a central pivot and symmetric support / resistance levels from the previous period's high, low and close; they are fixed for the whole period, so every participant sees the same lines. Four formula families are offered — classic floor pivots, Fibonacci-ratio pivots, Camarilla intraday levels and Woodie's open-weighted pivots — on a daily, weekly or monthly period.
14 +
15 +## Formula
16 +
17 +```text
18 +classic: P = (H + L + C) / 3, R1 = 2P − L, S1 = 2P − H, R2 = P + (H − L), S2 = P − (H − L), R3 = H + 2(P − L), S3 = L − 2(H − P)
19 +fibonacci: P as classic; R/S_k = P ± {0.382, 0.618, 1.000} · (H − L)
20 +camarilla: R/S_k = C ± (H − L) · {1.1/12, 1.1/6, 1.1/4, 1.1/2} (R1…R4, S1…S4)
21 +woodie: P = (H + L + 2·O_current) / 4, then classic R/S
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `H, L, C` | high, low and close of the PREVIOUS period |
27 +| `O_current` | open of the current period (Woodie only) |
28 +| `type` | classic \| fibonacci \| camarilla \| woodie |
29 +| `period` | day \| week \| month — the bars are grouped from their own timestamps |
30 +
31 +## How to read it
32 +
33 +- Price above the central pivot: bullish session bias, look for longs at S1 or on a pivot retest; below: bearish bias.
34 +- R1 / S1 are the first targets and common fade zones; R2 / S2 and beyond mark trend days.
35 +- Camarilla R3 / S3 are the classic intraday fade levels and R4 / S4 the breakout levels.
36 +- Levels that coincide across periods (daily S1 on the weekly pivot) are the strongest.
37 +- Weekly and monthly pivots on a daily chart frame the swing-trading map.
38 +
39 +## Default settings
40 +
41 +| Input | Default | Why |
42 +| --- | --- | --- |
43 +| `type` | `classic` | The original floor-trader formula, still the reference everyone watches. |
44 +| `period` | `day` | Daily pivots from the previous session are the intraday standard; switch to week or month on daily charts. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Intraday (1- to 30-minute) with daily pivots; daily charts with weekly or monthly pivots. |
53 +| **Markets** | Index futures, FX and liquid stocks — instruments where floor traders and algos share the same levels. |
54 +| **Note** | On daily bars a "day" period produces one level per bar — use week or month. |
55 +
56 +## Pairs well with
57 +
58 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
59 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
60 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
61 +
62 +## Pitfalls
63 +
64 +- The levels come from the previous period only; a gap open puts price far from them and they lose relevance for the session.
65 +- Different vendors use different session boundaries (RTH vs 24 h) and get slightly different pivots; ours follow the bars' calendar day.
66 +- Fading R3 / S3 in a strong trend day is the classic pivot-trader loss.
67 +
68 +## History
69 +
70 +Floor-trader formula from the Chicago pits (1930s–1980s), popularised in print by Larry Williams and later Mark Fisher; Camarilla by Nick Scott (1989), Woodie's variant by Ken Wood.
71 +
72 +## See also
73 +
74 +- [VWAP](/docs/charts/indicators/vwap)
75 +- [Horizontal line (drawing tool)](/docs/charts/tools/hline)
76 +- [Time zones & sessions](/docs/time-zones)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-psar.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'PSAR — Parabolic SAR', description: 'Accelerating trailing dots below or above price; a touch flips the trend.', image: '/charts/thumbs/indicator-psar-dark-lg.png' }
2 +
3 +# Parabolic SAR
4 +
5 +<p className="lead">Accelerating trailing dots below or above price; a touch flips the trend.</p>
6 +
7 +<ChartFigure kind="indicator" id="psar" caption="SAR 0.02 0.02 0.2 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="psar" aka={["PSAR","SAR","Stop and Reverse"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The Parabolic SAR plots a stop level that starts far from price and accelerates toward it as the trend makes new extremes, tracing a parabola. When price touches the dots the position is stopped and reversed, so the indicator is always long or short. Dots below price mark an uptrend (bull), dots above mark a downtrend (bear).
14 +
15 +## Formula
16 +
17 +```text
18 +SAR_{t+1} = SAR_t + AF·(EP − SAR_t)
19 +AF starts at `start`, += `increment` at each new extreme, capped at `max`
20 +SAR may not enter the range of the previous two bars; a touch reverses the trend
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `EP` | extreme point of the current trend (highest high or lowest low) |
26 +| `AF` | acceleration factor |
27 +| `start / increment / max` | 0.02 / 0.02 / 0.20 by default |
28 +
29 +## How to read it
30 +
31 +- Dots below price: uptrend, hold longs with the last dot as the stop; dots above: downtrend.
32 +- The dots accelerate toward price the longer the trend lasts — the system takes profits automatically on ageing moves.
33 +- A flip after a long run is a strong exit; a flip after three or four bars is usually chop.
34 +- The vertical distance between price and the dot is your current risk in price units.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `start` | `0.02` | Wilder's original: the stop begins moving at 2 % of the distance to the extreme per bar. |
41 +| `increment` | `0.02` | Each new extreme adds 2 % of acceleration — the parabola's curvature. |
42 +| `max` | `0.2` | The cap of 20 % stops the dots from catching price in a healthy trend; raise it to exit faster. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily and 4-hour trend following; intraday on 15-minute and above. |
51 +| **Markets** | Trending futures and FX; Wilder designed it for commodities. |
52 +| **Note** | Wilder himself advised using it only when ADX says a trend exists. |
53 +
54 +## Pairs well with
55 +
56 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
57 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
58 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
59 +
60 +## Pitfalls
61 +
62 +- In ranges the SAR flips every few bars and loses money on every flip — it has no built-in trend filter.
63 +- The starting stop is far from price, so the initial risk after a flip can be large.
64 +- Gaps through the dots trigger the reversal at a worse price than the dot.
65 +
66 +## History
67 +
68 +J. Welles Wilder Jr., 1978, New Concepts in Technical Trading Systems.
69 +
70 +## See also
71 +
72 +- [ADX](/docs/charts/indicators/adx)
73 +- [Supertrend](/docs/charts/indicators/supertrend)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-roc.mdx +71 −0
@@ -0,0 +1,71 @@
1 +export const meta = { title: 'ROC — Rate of Change', description: 'Percent change of price versus n bars ago; the zero line separates rising from falling.', image: '/charts/thumbs/indicator-roc-dark-lg.png' }
2 +
3 +# Rate of Change
4 +
5 +<p className="lead">Percent change of price versus n bars ago; the zero line separates rising from falling.</p>
6 +
7 +<ChartFigure kind="indicator" id="roc" caption="ROC 9 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="roc" aka={["ROC","Price Rate of Change"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Rate of Change is the percentage difference between the current price and the price n bars earlier. It is the simplest pure-momentum measure: positive when price is higher than it was, negative when lower, and its slope shows whether that momentum is accelerating or fading.
14 +
15 +## Formula
16 +
17 +```text
18 +ROC = (src − src[n bars ago]) / src[n bars ago] × 100
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | lookback length in bars (default 9) |
24 +| `src` | price source (default close) |
25 +
26 +## How to read it
27 +
28 +- Above zero: price is up over the lookback; below zero: down. Crossings of the zero line are simple trend-change signals.
29 +- ROC turning down while still positive means the advance is decelerating — often the first sign of a top.
30 +- Extreme readings relative to the indicator's own history (not fixed levels) mark overbought / oversold conditions.
31 +- Divergence: a new price high on a lower ROC high shows the rally is slowing.
32 +
33 +## Default settings
34 +
35 +| Input | Default | Why |
36 +| --- | --- | --- |
37 +| `length` | `9` | Nine bars is a short swing horizon — about two weeks of daily bars; 12 and 25 are the other classic lengths (Pring). |
38 +| `source` | `close` | Closes give the standard reading; hl2 damps single-bar spikes. |
39 +
40 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
41 +
42 +## Best for
43 +
44 +| | |
45 +| --- | --- |
46 +| **Timeframes** | Daily and weekly bars for momentum comparisons; short lengths intraday. |
47 +| **Markets** | Any liquid market; percent scaling makes readings comparable across symbols. |
48 +| **Note** | Also used as a relative-strength ranking tool between assets. |
49 +
50 +## Pairs well with
51 +
52 +- [Momentum](/docs/charts/indicators/momentum) — Price minus price n bars ago, in price units; the zero line is the trend switch.
53 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
54 +- [Coppock Curve](/docs/charts/indicators/coppock) — WMA of two summed rates of change; a turn up from below zero marks major market bottoms.
55 +
56 +## Pitfalls
57 +
58 +- A single large bar entering or leaving the lookback window creates a jump unrelated to today's action.
59 +- No fixed bounds, so "overbought" must be judged against the indicator's own recent range.
60 +- Short lengths on 1-minute bars are mostly noise.
61 +
62 +## History
63 +
64 +A classical momentum measure; popularised by Martin Pring in Technical Analysis Explained (1980).
65 +
66 +## See also
67 +
68 +- [Momentum](/docs/charts/indicators/momentum)
69 +- [Know Sure Thing](/docs/charts/indicators/kst)
70 +- [Coppock Curve](/docs/charts/indicators/coppock)
71 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-rsi.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'RSI — Relative Strength Index', description: 'Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.', image: '/charts/thumbs/indicator-rsi-dark-lg.png' }
2 +
3 +# Relative Strength Index
4 +
5 +<p className="lead">Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.</p>
6 +
7 +<ChartFigure kind="indicator" id="rsi" caption="RSI 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="rsi" aka={["RSI"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The RSI compares the average gain to the average loss over the last n bars and maps the ratio onto a 0–100 scale. It rises when up-closes dominate and falls when down-closes do, so it reads the speed of a move rather than its direction alone.
14 +
15 +## Formula
16 +
17 +```text
18 +RS = avgGain(n) / avgLoss(n) (Wilder smoothing)
19 +RSI = 100 − 100 / (1 + RS)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | lookback length (default 14) |
25 +| `avgGain` | Wilder-smoothed mean of positive close-to-close changes |
26 +| `avgLoss` | Wilder-smoothed mean of the absolute negative changes |
27 +
28 +## How to read it
29 +
30 +- Above 70: overbought — the move is stretched, not necessarily over; in a strong trend RSI can stay above 70 for weeks.
31 +- Below 30: oversold — same caveat in a downtrend.
32 +- Bearish divergence: price prints a higher high while RSI prints a lower high (and the mirror for bullish divergence).
33 +- Trend filter: in uptrends RSI tends to hold 40–90, in downtrends 10–60 (Constance Brown's range rule).
34 +- The 50 line separates bullish from bearish momentum regimes.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `14` | Wilder's original choice — half of a 28-day lunar cycle on daily bars; 9 or 7 for faster intraday reads, 21–25 for smoother swing signals. |
41 +| `source` | `close` | Closes carry the settlement information; hl2 or ohlc4 smooth gaps on volatile intraday series. |
42 +
43 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
44 +
45 +## Best for
46 +
47 +| | |
48 +| --- | --- |
49 +| **Timeframes** | Every timeframe; the 14-period reading is most meaningful on 1-hour and daily bars. |
50 +| **Markets** | Liquid stocks, indices, FX and crypto; ranges rather than strong trends. |
51 +| **Note** | Combine with a trend filter before acting on overbought / oversold readings. |
52 +
53 +## Pairs well with
54 +
55 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
56 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
57 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
58 +
59 +## Pitfalls
60 +
61 +- Selling every 70 in a bull trend is the classic way to fight the tape.
62 +- Divergences can persist for many bars before price turns — they are context, not triggers.
63 +- A short length produces many false extremes on 1-minute bars.
64 +
65 +## History
66 +
67 +J. Welles Wilder Jr., 1978, in New Concepts in Technical Trading Systems.
68 +
69 +## See also
70 +
71 +- [Stochastic RSI](/docs/charts/indicators/stochrsi)
72 +- [Chande Momentum Oscillator](/docs/charts/indicators/cmo)
73 +- [Charting guide](/docs/charts)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-rvi.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'RVI — Relative Vigor Index', description: 'Close-minus-open over high-minus-low, symmetrically smoothed, with a signal line.', image: '/charts/thumbs/indicator-rvi-dark-lg.png' }
2 +
3 +# Relative Vigor Index
4 +
5 +<p className="lead">Close-minus-open over high-minus-low, symmetrically smoothed, with a signal line.</p>
6 +
7 +<ChartFigure kind="indicator" id="rvi" caption="RVI 10 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="rvi" aka={["RVI","RVGI"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Relative Vigor Index compares where bars close relative to where they open with the bar range: prices tend to close above the open in rising markets and below it in falling ones. Both numerator and denominator are passed through a four-bar symmetric weighted filter and a simple moving average, and the signal line is the same filter applied to the RVI.
14 +
15 +## Formula
16 +
17 +```text
18 +sym(x) = (x + 2·x[1] + 2·x[2] + x[3]) / 6
19 +RVI = SMA(sym(close − open), n) / SMA(sym(high − low), n)
20 +signal = sym(RVI)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | averaging length (default 10) |
26 +| `sym` | four-bar symmetric weighted filter (1-2-2-1) |
27 +| `x[k]` | value k bars earlier |
28 +
29 +## How to read it
30 +
31 +- RVI crossing above its signal line is a buy, below a sell; the zero line tells whether closes are on average above or below opens.
32 +- Positive and rising: bars are closing in their upper halves — buyers control the session.
33 +- Divergence between RVI and price is Ehlers' preferred use: a lower RVI high on a higher price high warns of exhaustion.
34 +- Values live roughly between −0.5 and +0.5; the engine shows three decimals.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `length` | `10` | Ehlers' default, tuned to the dominant short cycle of daily equity data; the 1-2-2-1 filter adds about three bars of smoothing. |
41 +
42 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
43 +
44 +## Best for
45 +
46 +| | |
47 +| --- | --- |
48 +| **Timeframes** | Daily and hourly bars; the symmetric filter suits regular bar spacing. |
49 +| **Markets** | Liquid stocks, futures and FX where open and close are meaningful (not thin crypto pairs). |
50 +| **Note** | Sensitive to gaps because close − open ignores them. |
51 +
52 +## Pairs well with
53 +
54 +- [Stochastic Oscillator](/docs/charts/indicators/stoch) — Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.
55 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
56 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
57 +
58 +## Pitfalls
59 +
60 +- Bars with a gap open can show strong "vigor" even when the day itself was flat.
61 +- Small values with several decimals make level reading awkward — use crossovers and shape.
62 +- Illiquid instruments with random open prices produce noise.
63 +
64 +## History
65 +
66 +John F. Ehlers, 2002, in Technical Analysis of Stocks & Commodities.
67 +
68 +## See also
69 +
70 +- [Stochastic](/docs/charts/indicators/stoch)
71 +- [Relative Strength Index](/docs/charts/indicators/rsi)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-sma.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'SMA — Simple Moving Average', description: 'Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.', image: '/charts/thumbs/indicator-sma-dark-lg.png' }
2 +
3 +# Simple Moving Average
4 +
5 +<p className="lead">Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.</p>
6 +
7 +<ChartFigure kind="indicator" id="sma" caption="SMA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="sma" aka={["SMA","Moving average","Arithmetic mean"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The SMA averages the last n values of the source with equal weights, so every bar in the window counts the same and a bar leaving the window matters as much as the one entering it. It lags price by roughly half its length, which is exactly what makes it a calm reference for the direction of the trend.
14 +
15 +## Formula
16 +
17 +```text
18 +SMA_t = (P_t + P_{t−1} + … + P_{t−n+1}) / n
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | window length (default 20) |
24 +| `P` | source price (close by default) |
25 +
26 +## How to read it
27 +
28 +- Price above a rising SMA = uptrend; below a falling SMA = downtrend. The slope matters more than the crossing.
29 +- Crossovers of two SMAs (50 over 200 = "golden cross", 50 under 200 = "death cross") are slow but widely watched regime signals.
30 +- In trends the SMA acts as dynamic support or resistance — pullbacks that hold the 20 or 50 SMA are continuation setups.
31 +- A flat SMA with price whipsawing through it means no trend: switch to range tools.
32 +- The 200-day SMA is the institutional line between bull and bear markets for equities.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `20` | One month of daily trading sessions; 10 tracks the swing, 50 the intermediate trend, 200 the primary trend. |
39 +| `source` | `close` | Closes carry the settlement information; hl2 or ohlc4 smooth the noise of gappy intraday series. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and weekly for regime reading; 1-hour and above for dynamic support. |
48 +| **Markets** | Every liquid instrument; the 50 / 200 combination is an equity-index standard. |
49 +| **Note** | Use two lengths (fast / slow) to read acceleration of the trend, not one. |
50 +
51 +## Pairs well with
52 +
53 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
54 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
55 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
56 +
57 +## Pitfalls
58 +
59 +- The equal weighting produces a "drop-off effect": the line can jump when an old extreme bar leaves the window even if price is quiet.
60 +- Crossover systems bleed in sideways markets — dozens of small losses between two good trends.
61 +- Half-length lag means the SMA confirms turns late; it is a filter, not a timing tool.
62 +
63 +## History
64 +
65 +Classic tool of technical analysis, popularised by the chartists of the 1920s–1930s (Richard Schabacker, Robert Rhea); no single author.
66 +
67 +## See also
68 +
69 +- [Exponential Moving Average](/docs/charts/indicators/ema)
70 +- [Hull Moving Average](/docs/charts/indicators/hma)
71 +- [Charting guide](/docs/charts)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-stddev.mdx +71 −0
@@ -0,0 +1,71 @@
1 +export const meta = { title: 'StdDev — Standard Deviation', description: 'Rolling standard deviation of price over n bars — raw dispersion in price units.', image: '/charts/thumbs/indicator-stddev-dark-lg.png' }
2 +
3 +# Standard Deviation
4 +
5 +<p className="lead">Rolling standard deviation of price over n bars — raw dispersion in price units.</p>
6 +
7 +<ChartFigure kind="indicator" id="stddev" caption="StdDev 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="stddev" aka={["StdDev","σ"]} category="Volatility" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The rolling standard deviation measures how far the source price scatters around its n-bar mean, in price units. It is the volatility term inside the Bollinger Bands shown on its own, and it rises with agitation regardless of direction.
14 +
15 +## Formula
16 +
17 +```text
18 +σ = √( Σ (srcᵢ − mean(src, n))² / n )
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `src` | price source (default close) |
24 +| `n` | window length (default 20) |
25 +| `mean` | simple moving average over the same window |
26 +
27 +## How to read it
28 +
29 +- High and rising: prices are dispersing — trend acceleration or a blow-off; low and falling: consolidation.
30 +- Extreme lows relative to the last months precede expansions (the same logic as the Bollinger Squeeze).
31 +- Compare σ with the ATR: σ rises on trending closes even when bar ranges are steady, ATR rises on wide bars even in a range.
32 +- Direction-blind: use with price or a trend gauge.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `20` | One trading month — the same window as the standard Bollinger Bands, so this pane shows exactly their half-width divided by the multiplier. |
39 +| `source` | `close` | Closes are the standard input; hlc3 damps the effect of single gaps. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Any; the value is in the price units of the chart. |
48 +| **Markets** | All. |
49 +| **Note** | Divide by price (or use Historical Volatility) to compare between symbols. |
50 +
51 +## Pairs well with
52 +
53 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
54 +- [Historical Volatility](/docs/charts/indicators/hv) — Annualised standard deviation of log returns, in % — the volatility options are priced on.
55 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
56 +
57 +## Pitfalls
58 +
59 +- Population formula (divides by n): slightly lower than the sample estimate used in statistics packages.
60 +- A trending price inflates σ even when bars are small — it measures dispersion around a mean, not choppiness.
61 +- Not comparable across symbols or timeframes without normalisation.
62 +
63 +## History
64 +
65 +Classical statistic (Karl Pearson coined the term in 1893); used in charting since the Bollinger Bands of the 1980s.
66 +
67 +## See also
68 +
69 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
70 +- [Historical Volatility](/docs/charts/indicators/hv)
71 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-stoch.mdx +74 −0
@@ -0,0 +1,74 @@
1 +export const meta = { title: 'Stoch — Stochastic Oscillator', description: 'Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.', image: '/charts/thumbs/indicator-stoch-dark-lg.png' }
2 +
3 +# Stochastic Oscillator
4 +
5 +<p className="lead">Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.</p>
6 +
7 +<ChartFigure kind="indicator" id="stoch" caption="Stoch 14 3 3 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="stoch" aka={["Stoch","Slow stochastic","%K %D"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The stochastic measures the position of the latest close inside the highest high and lowest low of the last k bars: 100 means a close at the top of the range, 0 at the bottom. A first smoothing gives the slow %K, a second one the %D signal line, and the crossovers between the two are the classic signals.
14 +
15 +## Formula
16 +
17 +```text
18 +raw %K = (close − lowest(low, k)) / (highest(high, k) − lowest(low, k)) × 100
19 +%K = SMA(raw %K, smooth)
20 +%D = SMA(%K, d)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `k` | range lookback in bars (default 14) |
26 +| `smooth` | smoothing of the raw %K → slow %K (default 3) |
27 +| `d` | smoothing of %K → signal line (default 3) |
28 +
29 +## How to read it
30 +
31 +- Above 80: closes are near the top of the range — overbought; below 20: near the bottom — oversold.
32 +- %K crossing %D below 20 (bullish) or above 80 (bearish) is Lane's original signal; a cross in the middle of the scale carries little weight.
33 +- Divergence between the oscillator peaks and price peaks precedes most range reversals — Lane considered it the only signal that matters.
34 +- In a strong trend the stochastic rides above 80 (or below 20) for long stretches: a pullback that only reaches 50 is a continuation, not a reversal.
35 +
36 +## Default settings
37 +
38 +| Input | Default | Why |
39 +| --- | --- | --- |
40 +| `k` | `14` | Lane's own charts used 5 to 14 bars; 14 became the standard because it covers roughly three weeks of daily bars. |
41 +| `d` | `3` | Three-bar signal line, unchanged since Lane's original definition. |
42 +| `smooth` | `3` | The extra three-bar smoothing turns the fast stochastic into the slow version, which is what most traders mean by "stochastic". |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | All timeframes; particularly readable on 15-minute to daily bars. |
51 +| **Markets** | Range-bound markets — FX pairs, mean-reverting stocks, commodities in consolidation. |
52 +| **Note** | Use %K / %D crosses only in the direction of the higher-timeframe trend. |
53 +
54 +## Pairs well with
55 +
56 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
57 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
58 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
59 +
60 +## Pitfalls
61 +
62 +- A ranging indicator applied to a trending market: overbought readings persist and shorting them loses.
63 +- When the range of the last k bars is zero the engine outputs 0 — flat pre-market bars can produce odd spikes.
64 +- Very short k values on 1-minute bars oscillate between the extremes almost every bar.
65 +
66 +## History
67 +
68 +George C. Lane, late 1950s, popularised in his 1984 article "Lane's Stochastics".
69 +
70 +## See also
71 +
72 +- [Stochastic RSI](/docs/charts/indicators/stochrsi)
73 +- [Williams %R](/docs/charts/indicators/williams)
74 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-stochrsi.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'StochRSI — Stochastic RSI', description: 'Stochastic applied to RSI: a faster 0–100 oscillator with %K / %D and 20 / 80 zones.', image: '/charts/thumbs/indicator-stochrsi-dark-lg.png' }
2 +
3 +# Stochastic RSI
4 +
5 +<p className="lead">Stochastic applied to RSI: a faster 0–100 oscillator with %K / %D and 20 / 80 zones.</p>
6 +
7 +<ChartFigure kind="indicator" id="stochrsi" caption="StochRSI 14 14 3 3 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="stochrsi" aka={["StochRSI","Stoch RSI"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +StochRSI locates the current RSI inside its own high–low range of the last n bars, then smooths the result into %K and a %D signal line. It is an oscillator of an oscillator: it hits its extremes far more often than the RSI itself, which makes it a timing tool rather than a regime gauge.
14 +
15 +## Formula
16 +
17 +```text
18 +raw = (RSI − min(RSI, n)) / (max(RSI, n) − min(RSI, n)) × 100
19 +%K = SMA(raw, k)
20 +%D = SMA(%K, d)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `RSI` | RSI of the source over rsiLength bars (default 14) |
26 +| `n` | stochLength — bars of RSI history used for the range (default 14) |
27 +| `k` | smoothing of the raw stochastic (default 3) |
28 +| `d` | smoothing of %K that gives the signal line (default 3) |
29 +
30 +## How to read it
31 +
32 +- Above 80 / below 20: overbought / oversold — expect many visits per trend; wait for %K to cross back through the level before acting.
33 +- %K crossing above %D from below 20 is the classic buy timing signal; the mirror from above 80 is the sell signal.
34 +- Readings pinned near 0 or 100 for several bars mean RSI sits at the edge of its own range: strong, one-sided momentum.
35 +- Use the RSI (or a moving average) to decide the direction, StochRSI to time the entry inside that direction.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `rsiLength` | `14` | Same as the standard RSI, so the two indicators can be compared side by side. |
42 +| `stochLength` | `14` | Chande and Kroll used the same length for the RSI and its stochastic range. |
43 +| `k` | `3` | Three-bar smoothing tames the raw series, which otherwise jumps between 0 and 100. |
44 +| `d` | `3` | A three-bar signal line, as in the classic slow stochastic. |
45 +| `source` | `close` | Closes feed the underlying RSI. |
46 +
47 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
48 +
49 +## Best for
50 +
51 +| | |
52 +| --- | --- |
53 +| **Timeframes** | Intraday to daily; it shines on 5-minute to 1-hour bars where RSI alone rarely reaches its extremes. |
54 +| **Markets** | Range-bound stocks, FX pairs and crypto. |
55 +| **Note** | Too sensitive for a stand-alone signal on trending markets. |
56 +
57 +## Pairs well with
58 +
59 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
60 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
61 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
62 +
63 +## Pitfalls
64 +
65 +- Twice as noisy as RSI: every small RSI wiggle inside a narrow range becomes a full 0–100 swing.
66 +- A flat RSI range (max ≈ min) produces meaningless 0 readings — check the underlying RSI first.
67 +- The smoothing adds lag on top of the RSI lag; on daily bars signals arrive after the first leg of the move.
68 +
69 +## History
70 +
71 +Tushar Chande and Stanley Kroll, 1994, in The New Technical Trader.
72 +
73 +## See also
74 +
75 +- [Relative Strength Index](/docs/charts/indicators/rsi)
76 +- [Stochastic](/docs/charts/indicators/stoch)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-supertrend.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'ST — Supertrend', description: 'ATR-based trailing stop that flips colour with the trend — one line, long or short.', image: '/charts/thumbs/indicator-supertrend-dark-lg.png' }
2 +
3 +# Supertrend
4 +
5 +<p className="lead">ATR-based trailing stop that flips colour with the trend — one line, long or short.</p>
6 +
7 +<ChartFigure kind="indicator" id="supertrend" caption="ST 10 3 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="supertrend" aka={["ST","ATR trailing stop"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +Supertrend places a stop line a multiple of the ATR below price in an uptrend and above price in a downtrend; the line only ratchets in the direction of the trend and flips when a close crosses it. The result is a single, unambiguous trend state with a built-in stop level.
14 +
15 +## Formula
16 +
17 +```text
18 +basicUpper = HL2 + mult·ATR(n), basicLower = HL2 − mult·ATR(n)
19 +finalLower ratchets up while the trend is up (never decreases)
20 +finalUpper ratchets down while the trend is down
21 +flip: close crosses the active line
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `n` | ATR length (default 10) |
27 +| `mult` | ATR multiplier (default 3) |
28 +| `HL2` | bar midpoint (H + L) / 2 |
29 +
30 +## How to read it
31 +
32 +- Green line below price = uptrend, stay long; red line above price = downtrend, stay short or flat.
33 +- The line itself is the trailing stop: a close beyond it flips the state — that is the exit and the reverse signal.
34 +- Distance between price and the line is the room the trade has before the stop; large distance after a run means a late entry.
35 +- Pullbacks that approach but do not close through the line are continuation entries in the direction of the trend.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `10` | Two weeks of daily bars for the ATR — Olivier Seban's original setting, quick enough for swing trades. |
42 +| `mult` | `3` | Three ATRs keep the stop outside normal noise; 2 is tighter for intraday, 4 for position trades. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Daily and 4-hour for swing trading; 15-minute and above intraday. |
51 +| **Markets** | Trending futures, crypto and stocks. |
52 +| **Note** | It is a stop-and-reverse system: in ranges it will whipsaw by design. |
53 +
54 +## Pairs well with
55 +
56 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
57 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
58 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
59 +
60 +## Pitfalls
61 +
62 +- Sideways markets produce a string of small losing flips — filter with ADX or a higher-timeframe trend.
63 +- The flip happens on the close that crosses the line; intrabar pierces do not count and the entry is at the next open.
64 +- A large multiplier gives back a lot of profit before flipping.
65 +
66 +## History
67 +
68 +Olivier Seban, 2009 (France), building on Wilder's ATR and volatility-stop ideas.
69 +
70 +## See also
71 +
72 +- [Average True Range](/docs/charts/indicators/atr)
73 +- [Parabolic SAR](/docs/charts/indicators/psar)
74 +- [Keltner Channels](/docs/charts/indicators/keltner)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-tema.mdx +71 −0
@@ -0,0 +1,71 @@
1 +export const meta = { title: 'TEMA — Triple Exponential Moving Average', description: 'Three nested EMAs recombined to cancel lag — the fastest of the EMA family.', image: '/charts/thumbs/indicator-tema-dark-lg.png' }
2 +
3 +# Triple Exponential Moving Average
4 +
5 +<p className="lead">Three nested EMAs recombined to cancel lag — the fastest of the EMA family.</p>
6 +
7 +<ChartFigure kind="indicator" id="tema" caption="TEMA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="tema" aka={["TEMA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The TEMA extends the DEMA idea one level further: it combines an EMA, the EMA of that EMA and the EMA of that result so that the lag terms cancel out. The line reacts almost immediately to changes of direction while keeping the smoothness of an exponential filter.
14 +
15 +## Formula
16 +
17 +```text
18 +E1 = EMA(P, n), E2 = EMA(E1, n), E3 = EMA(E2, n)
19 +TEMA = 3·E1 − 3·E2 + E3
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | length (default 20) |
25 +| `E1, E2, E3` | single, double and triple smoothed EMAs of the source |
26 +
27 +## How to read it
28 +
29 +- Direction of the slope is the primary read; the TEMA turns within a bar or two of price.
30 +- TEMA above a slower TEMA or SMA = trend up; a close back through the TEMA is an early exit.
31 +- Use it as the fast line of a crossover system to reduce the lag of classic EMA pairs.
32 +- The overshoot after a spike is larger than the DEMA's — wait for one bar of confirmation.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `20` | Matches the EMA / DEMA defaults so the three curves can be compared directly; 21 and 50 are common alternates. |
39 +| `source` | `close` | Standard; the triple smoothing makes the source choice nearly irrelevant. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Intraday (5-minute to 1-hour) and daily. |
48 +| **Markets** | Fast-moving futures and crypto, momentum stocks. |
49 +
50 +
51 +## Pairs well with
52 +
53 +- [Double Exponential Moving Average](/docs/charts/indicators/dema) — EMA with the lag of its own smoothing subtracted — quicker turns, same length.
54 +- [TRIX](/docs/charts/indicators/trix) — Percent change of a triple-smoothed EMA with a signal line; filters out short-lived noise.
55 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
56 +
57 +## Pitfalls
58 +
59 +- The most sensitive of the family — expect whipsaws in ranges and use it with a trend filter such as ADX.
60 +- Overshoots can make the TEMA a poor stop reference.
61 +- Needs about 3n bars of warm-up before the nested EMAs stabilise.
62 +
63 +## History
64 +
65 +Patrick G. Mulloy, 1994, Technical Analysis of Stocks & Commodities (companion to the DEMA).
66 +
67 +## See also
68 +
69 +- [DEMA](/docs/charts/indicators/dema)
70 +- [TRIX](/docs/charts/indicators/trix)
71 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-trix.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'TRIX', description: 'Percent change of a triple-smoothed EMA with a signal line; filters out short-lived noise.', image: '/charts/thumbs/indicator-trix-dark-lg.png' }
2 +
3 +# TRIX
4 +
5 +<p className="lead">Percent change of a triple-smoothed EMA with a signal line; filters out short-lived noise.</p>
6 +
7 +<ChartFigure kind="indicator" id="trix" caption="TRIX 15 9 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="trix" aka={["TRIX","Triple exponential average rate of change"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +TRIX smooths the price three times with an EMA of the same length, then takes the one-bar percent change of that triple EMA. The triple smoothing removes cycles shorter than the length while the rate-of-change step keeps the indicator centred on zero, so TRIX shows the direction and acceleration of the underlying trend with very little noise.
14 +
15 +## Formula
16 +
17 +```text
18 +e1 = EMA(src, n); e2 = EMA(e1, n); e3 = EMA(e2, n)
19 +TRIX = (e3 − e3[1]) / e3[1] × 100
20 +signal = EMA(TRIX, s)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `n` | EMA length applied three times (default 15) |
26 +| `s` | signal EMA length (default 9) |
27 +| `e3[1]` | triple EMA one bar earlier |
28 +| `src` | price source (default close) |
29 +
30 +## How to read it
31 +
32 +- Above zero: the smoothed trend is rising; below zero: falling. Zero crosses are slow but rarely false.
33 +- TRIX crossing its signal line gives earlier entries than the zero cross, at the cost of a few whipsaws.
34 +- Divergence between TRIX peaks and price peaks precedes trend exhaustion, often by many bars because of the smoothing.
35 +- The slope of TRIX (rising vs falling) reads the trend's acceleration — a flattening TRIX in positive territory is a maturing advance.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `length` | `15` | Hutson's default; three passes of a 15-bar EMA filter roughly a one-month cycle on daily bars. |
42 +| `signal` | `9` | The same nine-bar signal convention as the MACD. |
43 +| `source` | `close` | Closes feed the first EMA. |
44 +
45 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
46 +
47 +## Best for
48 +
49 +| | |
50 +| --- | --- |
51 +| **Timeframes** | Daily and weekly bars; on intraday bars shorten the length or accept long lag. |
52 +| **Markets** | Trending indices, ETFs and large caps where noise filtering pays off. |
53 +| **Note** | Values are tiny (hundredths of a percent) — read the shape, not the number. |
54 +
55 +## Pairs well with
56 +
57 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
58 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
59 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
60 +
61 +## Pitfalls
62 +
63 +- Three EMA passes plus a signal line means substantial lag; turns are confirmed late.
64 +- The percent scale is minute (e.g. 0.05), so the axis needs several decimals — the engine uses 4.
65 +- Sideways markets keep TRIX braided around zero with no useful signal.
66 +
67 +## History
68 +
69 +Jack Hutson, 1983, in Technical Analysis of Stocks & Commodities.
70 +
71 +## See also
72 +
73 +- [Triple EMA](/docs/charts/indicators/tema)
74 +- [MACD](/docs/charts/indicators/macd)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-tsi.mdx +76 −0
@@ -0,0 +1,76 @@
1 +export const meta = { title: 'TSI — True Strength Index', description: 'Double-smoothed price change over double-smoothed absolute change, −100…100, with signal.', image: '/charts/thumbs/indicator-tsi-dark-lg.png' }
2 +
3 +# True Strength Index
4 +
5 +<p className="lead">Double-smoothed price change over double-smoothed absolute change, −100…100, with signal.</p>
6 +
7 +<ChartFigure kind="indicator" id="tsi" caption="TSI 25 13 13 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="tsi" aka={["TSI"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The TSI takes one-bar price changes, smooths them twice with EMAs (a long then a short one), and divides by the same double smoothing of the absolute changes. The ratio is bounded between −100 and +100 and stays close to the sign of the trend, giving a momentum line that is smooth yet responsive; a signal EMA adds crossovers.
14 +
15 +## Formula
16 +
17 +```text
18 +m = src − src[1]
19 +TSI = 100 × EMA(EMA(m, long), short) / EMA(EMA(|m|, long), short)
20 +signal = EMA(TSI, sig)
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `long` | first EMA length (default 25) |
26 +| `short` | second EMA length (default 13) |
27 +| `sig` | signal EMA length (default 13) |
28 +| `src` | price source (default close) |
29 +
30 +## How to read it
31 +
32 +- Zero-line cross: TSI positive means smoothed up-moves outweigh down-moves — bullish regime.
33 +- Signal-line crossovers give the entries; the zero line gives the regime filter.
34 +- Overbought / oversold: readings beyond ±25 are stretched for most stocks; the exact level depends on the instrument.
35 +- Divergence between TSI and price is cleaner than on RSI thanks to the double smoothing.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `long` | `25` | Blau's first smoothing, long enough to remove day-to-day noise. |
42 +| `short` | `13` | Blau's second smoothing, roughly half the first; 25 / 13 was his published pair. |
43 +| `signal` | `13` | A signal EMA equal to the short smoothing, as in Blau's examples (7 is a common faster choice). |
44 +| `source` | `close` | Closes are the standard input. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Daily and 4-hour bars; the defaults are calibrated for swing trading. |
53 +| **Markets** | Stocks, indices, FX — anything with persistent trends. |
54 +| **Note** | Bounded like RSI but with far fewer whipsaws in trends. |
55 +
56 +## Pairs well with
57 +
58 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
59 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
60 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
61 +
62 +## Pitfalls
63 +
64 +- The double smoothing means a substantial lag on turns; treat crossovers as confirmation.
65 +- No universal overbought level — calibrate ±25 / ±35 to the instrument's history.
66 +- Needs about 40 bars of history before it stabilises.
67 +
68 +## History
69 +
70 +William Blau, 1991, in Technical Analysis of Stocks & Commodities, later in Momentum, Direction, and Divergence (1995).
71 +
72 +## See also
73 +
74 +- [MACD](/docs/charts/indicators/macd)
75 +- [Relative Strength Index](/docs/charts/indicators/rsi)
76 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-ultimate.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'UO — Ultimate Oscillator', description: 'Buying pressure over true range on 7, 14 and 28 bars, weighted 4-2-1, on a 0–100 scale.', image: '/charts/thumbs/indicator-ultimate-dark-lg.png' }
2 +
3 +# Ultimate Oscillator
4 +
5 +<p className="lead">Buying pressure over true range on 7, 14 and 28 bars, weighted 4-2-1, on a 0–100 scale.</p>
6 +
7 +<ChartFigure kind="indicator" id="ultimate" caption="UO 7 14 28 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="ultimate" aka={["UO","Ultimate"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Ultimate Oscillator measures buying pressure — how far the close sits above the true low — as a share of the true range, averaged over three lookbacks (short, medium, long) and combined with weights 4, 2 and 1. Blending three horizons reduces the false divergences that plague single-period oscillators, which was Williams' stated goal.
14 +
15 +## Formula
16 +
17 +```text
18 +BP = close − min(low, prevClose)
19 +TR = max(high, prevClose) − min(low, prevClose)
20 +avg(n) = sum(BP, n) / sum(TR, n)
21 +UO = 100 × (4 × avg(fast) + 2 × avg(mid) + avg(slow)) / 7
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `fast / mid / slow` | the three lookbacks (default 7 / 14 / 28) |
27 +| `BP` | buying pressure of the bar |
28 +| `TR` | true range of the bar (gap-adjusted) |
29 +
30 +## How to read it
31 +
32 +- Below 30: oversold; above 70: overbought — Williams used these as the setup zones, not as signals.
33 +- Bullish setup: price makes a lower low while UO makes a higher low (divergence) with the first low below 30; the buy triggers when UO breaks above the high between the two lows.
34 +- Bearish setup: the mirror image with a UO high above 70 and a break below the intermediate trough.
35 +- The 50 line separates net buying pressure from net selling pressure across the three horizons.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `fast` | `7` | Williams' short horizon — about one and a half weeks of daily bars. |
42 +| `mid` | `14` | Twice the fast length, the classic two-week / Wilder horizon. |
43 +| `slow` | `28` | Twice the mid length; the 1-2-4 spacing keeps the three cycles harmonically related. |
44 +
45 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
46 +
47 +## Best for
48 +
49 +| | |
50 +| --- | --- |
51 +| **Timeframes** | Daily bars for the original divergence method; 1-hour bars with the same lengths for intraday swings. |
52 +| **Markets** | Stocks, futures and FX with reliable highs and lows. |
53 +| **Note** | Designed for divergence trading rather than simple level crossings. |
54 +
55 +## Pairs well with
56 +
57 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
58 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
59 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
60 +
61 +## Pitfalls
62 +
63 +- The full setup (divergence + zone + breakout) is rare; forcing partial setups defeats the point.
64 +- Needs true highs and lows — the daily-bar approximation on thin or gappy series degrades the reading.
65 +- Weights 4-2-1 make the fast component dominant, so it is faster than a 28-bar look suggests.
66 +
67 +## History
68 +
69 +Larry Williams, 1976, published in Technical Analysis of Stocks & Commodities in 1985.
70 +
71 +## See also
72 +
73 +- [Relative Strength Index](/docs/charts/indicators/rsi)
74 +- [Average True Range](/docs/charts/indicators/atr)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-volume-ma.mdx +73 −0
@@ -0,0 +1,73 @@
1 +export const meta = { title: 'Vol MA — Volume', description: 'Volume histogram coloured by bar direction with its moving average in its own pane.', image: '/charts/thumbs/indicator-volume-ma-dark-lg.png' }
2 +
3 +# Volume
4 +
5 +<p className="lead">Volume histogram coloured by bar direction with its moving average in its own pane.</p>
6 +
7 +<ChartFigure kind="indicator" id="volume-ma" caption="Vol MA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="volume-ma" aka={["Vol MA","Volume + MA"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Volume pane draws the number of shares or contracts traded per bar as a histogram — green when the bar closed up, red when it closed down — and overlays a simple moving average of volume as the "normal" level. It is the reference against which every other volume indicator is judged.
14 +
15 +## Formula
16 +
17 +```text
18 +volume = V
19 +ma = SMA(V, n)
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `V` | volume of the bar (contracts for futures, shares for stocks) |
25 +| `n` | moving-average length (default 20) |
26 +
27 +## How to read it
28 +
29 +- Bars far above the average are the events: breakouts, gaps, news, capitulation — the direction of the bar says who won.
30 +- Volume should expand in the direction of the trend and dry up on pullbacks; the reverse pattern is distribution.
31 +- Climax volume (several times the average) at the end of a long move often marks exhaustion.
32 +- A breakout on below-average volume is the most common failed breakout.
33 +- On intraday charts expect the U-shape: heavy at the open and close, light at lunch.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `20` | One trading month of bars gives a stable "normal volume" that adapts to the current interest in the symbol. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | All; daily for events, intraday for session structure. |
48 +| **Markets** | Stocks, ETFs, futures and crypto; FX volume is a tick count and much weaker. |
49 +| **Note** | The main-pane volume histogram (Settings) is the same data; this pane adds the average. |
50 +
51 +## Pairs well with
52 +
53 +- [On-Balance Volume](/docs/charts/indicators/obv) — Running total of volume signed by the close direction; should confirm price trends.
54 +- [Volume Oscillator](/docs/charts/indicators/volume-osc) — Fast volume EMA vs slow volume EMA, in %: is participation rising or fading?
55 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
56 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
57 +
58 +## Pitfalls
59 +
60 +- Daily bars mix regular hours and extended trading depending on the source — check the session convention.
61 +- Adjusted equity series may also adjust volume for splits; unadjusted ones do not.
62 +- Colour is the close-vs-open direction of the bar, not up vs previous close.
63 +
64 +## History
65 +
66 +Volume analysis dates to Charles Dow (1900s) and Richard Wyckoff (1930s); the coloured histogram with a moving average is the standard charting-software form.
67 +
68 +## See also
69 +
70 +- [On-Balance Volume](/docs/charts/indicators/obv)
71 +- [Volume Profile](/docs/charts/indicators/volume-profile)
72 +- [Charting guide](/docs/charts)
73 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-volume-osc.mdx +72 −0
@@ -0,0 +1,72 @@
1 +export const meta = { title: 'VO — Volume Oscillator', description: 'Fast volume EMA vs slow volume EMA, in %: is participation rising or fading?', image: '/charts/thumbs/indicator-volume-osc-dark-lg.png' }
2 +
3 +# Volume Oscillator
4 +
5 +<p className="lead">Fast volume EMA vs slow volume EMA, in %: is participation rising or fading?</p>
6 +
7 +<ChartFigure kind="indicator" id="volume-osc" caption="VO 5 10 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="volume-osc" aka={["VO","PVO"]} category="Volume" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Volume Oscillator measures the percentage difference between a fast and a slow exponential moving average of volume. Positive values mean recent volume is above its longer-term norm — the move is attracting participation; negative values mean interest is drying up.
14 +
15 +## Formula
16 +
17 +```text
18 +VO = (EMA(V, fast) − EMA(V, slow)) / EMA(V, slow) × 100
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `V` | volume |
24 +| `fast` | short EMA length (default 5) |
25 +| `slow` | long EMA length (default 10) |
26 +
27 +## How to read it
28 +
29 +- Above zero during a breakout: the move has volume support; below zero during a breakout: suspect.
30 +- A rally with the oscillator falling towards zero is losing sponsors — classic late-trend signature.
31 +- Rising VO during a decline confirms selling pressure; rising VO after a long decline can mark capitulation.
32 +- It is direction-blind: read it with price to know what the volume is voting for.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `fast` | `5` | One trading week of volume. |
39 +| `slow` | `10` | Two trading weeks as the reference level — short by design so the oscillator reacts within a few sessions. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily bars; also 5- to 15-minute bars for intraday breakout confirmation. |
48 +| **Markets** | Stocks, ETFs, futures and crypto. |
49 +| **Note** | A percentage, so readings are comparable between symbols. |
50 +
51 +## Pairs well with
52 +
53 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
54 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
55 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
56 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
57 +
58 +## Pitfalls
59 +
60 +- Volume has a strong weekly and intraday seasonality (Friday afternoons, lunch hour) that the short EMAs register as signals.
61 +- Index rebalancing and expiry days spike the oscillator without any message about the trend.
62 +- With 5 / 10 it whipsaws around zero constantly in calm markets.
63 +
64 +## History
65 +
66 +Generic volume-momentum construction; popularised in charting packages in the 1990s (the MetaStock "Percentage Volume Oscillator").
67 +
68 +## See also
69 +
70 +- [Volume](/docs/charts/indicators/volume-ma)
71 +- [Chaikin Oscillator](/docs/charts/indicators/chaikin-osc)
72 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-volume-profile.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'VP — Volume Profile (visible range)', description: 'Volume traded at each price level of the visible bars, with POC and value area.', image: '/charts/thumbs/indicator-volume-profile-dark-lg.png' }
2 +
3 +# Volume Profile (visible range)
4 +
5 +<p className="lead">Volume traded at each price level of the visible bars, with POC and value area.</p>
6 +
7 +<ChartFigure kind="indicator" id="volume-profile" caption="VP 24 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="volume-profile" aka={["VP","VPVR","Market profile"]} category="Volume" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The Volume Profile redistributes the volume of every visible bar across the price levels the bar covered and stacks the result as a horizontal histogram on the right of the chart. The longest row is the Point of Control (POC); the contiguous rows around it that hold 70 % of the volume form the value area, bounded by VAH and VAL. It shows where trading actually happened, not when.
14 +
15 +## Formula
16 +
17 +```text
18 +for each visible bar: volume spread uniformly over [low, high] into `rows` price bins
19 +POC = bin with the largest volume
20 +VA = smallest set of contiguous bins around POC holding valueArea % of the total → VAH / VAL
21 +```
22 +
23 +| Symbol | Meaning |
24 +| --- | --- |
25 +| `rows` | number of price bins across the visible high–low range (default 24) |
26 +| `valueArea` | share of the total volume inside the value area, in % (default 70) |
27 +| `POC` | Point of Control, the most-traded price |
28 +| `VAH / VAL` | value-area high and low |
29 +
30 +## How to read it
31 +
32 +- The POC and the value area act as magnets and as support / resistance: price tends to return to heavy volume and to move fast through thin volume.
33 +- High-volume nodes (wide rows) are agreement zones where consolidations form; low-volume nodes are rejection zones that price crosses quickly.
34 +- Acceptance: price building volume above the old VAH means the market accepts higher prices; a quick return inside the value area is a failed auction.
35 +- The profile is recomputed as you pan and zoom — frame the swing you want to analyse before reading it.
36 +- A "P" shape (volume at the top) is short covering into a high; a "b" shape (volume at the bottom) is long liquidation into a low.
37 +
38 +## Default settings
39 +
40 +| Input | Default | Why |
41 +| --- | --- | --- |
42 +| `rows` | `24` | Two dozen bins keep the shape readable at any zoom level; raise to 50–100 on a large screen or a wide price range. |
43 +| `valueArea` | `70` | One standard deviation of a normal distribution covers ~68 % — the Market Profile convention rounds it to 70 %. |
44 +
45 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
46 +
47 +## Best for
48 +
49 +| | |
50 +| --- | --- |
51 +| **Timeframes** | Intraday (5-minute to 1-hour bars) for session profiles; daily bars for multi-month composites. |
52 +| **Markets** | Futures and liquid stocks with reliable volume; not meaningful on FX pairs whose volume is a tick count. |
53 +| **Note** | The profile covers exactly the bars on screen — set the visible range deliberately. |
54 +
55 +## Pairs well with
56 +
57 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
58 +- [Pivot Points](/docs/charts/indicators/pivots) — Support and resistance levels for the current period computed from the previous H, L, C.
59 +- [Auto Fibonacci (visible range)](/docs/charts/indicators/auto-fib) — Fibonacci retracement drawn automatically on the largest swing of the visible range.
60 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
61 +
62 +## Pitfalls
63 +
64 +- Spreading each bar's volume uniformly over its range is an approximation — 1-minute bars give a far more faithful profile than daily bars.
65 +- Zero-volume minutes are not in the dataset, so intraday profiles only see traded prices.
66 +- Changing the zoom changes the profile: two screenshots of "the same" profile rarely match.
67 +
68 +## History
69 +
70 +Derived from J. Peter Steidlmayer's Market Profile (CBOT, 1984); the visible-range volume histogram is a 2000s charting-software adaptation.
71 +
72 +## See also
73 +
74 +- [VWAP](/docs/charts/indicators/vwap)
75 +- [Pivot Points](/docs/charts/indicators/pivots)
76 +- [Charting guide](/docs/charts)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-vortex.mdx +70 −0
@@ -0,0 +1,70 @@
1 +export const meta = { title: 'VI — Vortex Indicator', description: 'Two lines from bar-to-bar range overlap: VI+ over VI− = uptrend, the cross is the signal.', image: '/charts/thumbs/indicator-vortex-dark-lg.png' }
2 +
3 +# Vortex Indicator
4 +
5 +<p className="lead">Two lines from bar-to-bar range overlap: VI+ over VI− = uptrend, the cross is the signal.</p>
6 +
7 +<ChartFigure kind="indicator" id="vortex" caption="VI 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="vortex" aka={["VI","VI+ / VI−"]} category="Trend" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +The Vortex Indicator measures upward movement as the distance from the previous low to the current high and downward movement as the distance from the previous high to the current low, sums each over n bars and normalises by the summed true range. The two lines oscillate around 1 and their crossovers identify the start of a new trend.
14 +
15 +## Formula
16 +
17 +```text
18 +VM+ = |H_t − L_{t−1}|, VM− = |L_t − H_{t−1}|
19 +VI+ = Σ_n VM+ / Σ_n TR, VI− = Σ_n VM− / Σ_n TR
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `n` | summation length (default 14) |
25 +| `TR` | true range of the bar |
26 +| `VI+ / VI−` | positive and negative vortex lines |
27 +
28 +## How to read it
29 +
30 +- VI+ crossing above VI− signals an uptrend; VI− crossing above VI+ signals a downtrend.
31 +- The wider the gap between the two lines, the stronger the trend; converging lines warn of exhaustion.
32 +- Both lines near 1 with frequent crosses = no trend; wait for a decisive separation.
33 +- Botes and Siepman suggest entering on the cross and placing the stop at the extreme of the crossover bar.
34 +
35 +## Default settings
36 +
37 +| Input | Default | Why |
38 +| --- | --- | --- |
39 +| `length` | `14` | The authors' recommended default for daily bars; they suggest 13–21 depending on the cycle length of the instrument. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and weekly; longer settings intraday. |
48 +| **Markets** | Futures and stocks with clear trending phases. |
49 +
50 +
51 +## Pairs well with
52 +
53 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
54 +- [Aroon](/docs/charts/indicators/aroon) — How recently the n-bar high and low were made, 0–100: fresh highs = Aroon Up near 100.
55 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
56 +
57 +## Pitfalls
58 +
59 +- Whipsaws in ranges like every crossover system — the authors advise filtering with a trend-strength measure.
60 +- Gaps inflate one vortex movement dramatically for n bars.
61 +
62 +## History
63 +
64 +Etienne Botes and Douglas Siepman, January 2010, Technical Analysis of Stocks & Commodities.
65 +
66 +## See also
67 +
68 +- [ADX](/docs/charts/indicators/adx)
69 +- [Aroon](/docs/charts/indicators/aroon)
70 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-vwap.mdx +75 −0
@@ -0,0 +1,75 @@
1 +export const meta = { title: 'VWAP — Volume-Weighted Average Price', description: 'Volume-weighted average price since the session open — the institutional fair value.', image: '/charts/thumbs/indicator-vwap-dark-lg.png' }
2 +
3 +# Volume-Weighted Average Price
4 +
5 +<p className="lead">Volume-weighted average price since the session open — the institutional fair value.</p>
6 +
7 +<ChartFigure kind="indicator" id="vwap" caption="VWAP session with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="vwap" aka={["VWAP","Session VWAP"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +VWAP accumulates price × volume and divides by the accumulated volume from the anchor onward, restarting at every new session on intraday bars. It is the benchmark against which execution desks measure fills, which makes it a magnet and a battleground for intraday price. Optional bands at ± k volume-weighted standard deviations frame how far price has drifted from fair value.
14 +
15 +## Formula
16 +
17 +```text
18 +VWAP_t = Σ_{session} (TP_i · V_i) / Σ_{session} V_i, TP = (H + L + C) / 3
19 +upper / lower = VWAP ± bands · σ_vw, σ_vw = √( Σ V_i·(TP_i − VWAP)² / Σ V_i )
20 +```
21 +
22 +| Symbol | Meaning |
23 +| --- | --- |
24 +| `TP` | typical price of the bar |
25 +| `V` | bar volume |
26 +| `anchor` | session (restart each calendar day) or all (accumulate from the first loaded bar) |
27 +| `bands` | number of volume-weighted σ for the optional bands (0 = off) |
28 +
29 +## How to read it
30 +
31 +- Price above VWAP: buyers are in control of the session; below: sellers. The first test of VWAP after the open is a key decision point.
32 +- Institutions buying below VWAP and selling above it means VWAP acts as intraday support / resistance.
33 +- A steadily rising VWAP with price above it is a trend day; price crossing VWAP repeatedly is a rotation day.
34 +- With bands on, ±1σ marks normal drift, ±2σ an extended move that often reverts toward VWAP.
35 +- The gap between VWAP and price at the close tells you who won the day.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `anchor` | `session` | Execution benchmarks are per trading day, so the accumulation restarts at each calendar-day change on intraday bars. |
42 +| `bands` | `0` | Off by default to keep the classic single line; 1 or 2 σ adds the standard-deviation channel. |
43 +
44 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
45 +
46 +## Best for
47 +
48 +| | |
49 +| --- | --- |
50 +| **Timeframes** | Intraday only — 1-minute to 1-hour bars. On daily bars use the "all" anchor or the Anchored VWAP. |
51 +| **Markets** | Stocks, ETFs and futures with real volume; not meaningful on FX pairs without volume. |
52 +| **Note** | Bars without volume yield no value. |
53 +
54 +## Pairs well with
55 +
56 +- [Anchored VWAP](/docs/charts/indicators/avwap) — VWAP starting from a bar you choose — the average cost of everyone in since that event.
57 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
58 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
59 +
60 +## Pitfalls
61 +
62 +- On daily bars a session anchor resets every bar — switch the anchor to "all" or use the Anchored VWAP.
63 +- Early in the session VWAP is built from a few bars and swings wildly; give it 15–30 minutes.
64 +- Pre-market volume is included when the data contains it, which shifts the session value.
65 +
66 +## History
67 +
68 +Introduced as an execution benchmark by equity trading desks in the late 1980s (Berkowitz, Logue and Noser, 1988).
69 +
70 +## See also
71 +
72 +- [Anchored VWAP](/docs/charts/indicators/avwap)
73 +- [Volume Profile](/docs/charts/indicators/volume-profile)
74 +- [Time zones & sessions](/docs/time-zones)
75 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-williams.mdx +69 −0
@@ -0,0 +1,69 @@
1 +export const meta = { title: '%R — Williams %R', description: 'Inverted stochastic on a −100…0 scale: above −20 overbought, below −80 oversold.', image: '/charts/thumbs/indicator-williams-dark-lg.png' }
2 +
3 +# Williams %R
4 +
5 +<p className="lead">Inverted stochastic on a −100…0 scale: above −20 overbought, below −80 oversold.</p>
6 +
7 +<ChartFigure kind="indicator" id="williams" caption="%R 14 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="williams" aka={["%R","Williams Percent Range"]} category="Momentum" pane="Own pane under the price" />
10 +
11 +## What it measures
12 +
13 +Williams %R measures how far the latest close sits below the highest high of the last n bars, as a share of the high–low range. It is the unsmoothed fast stochastic turned upside down: 0 is a close at the top of the range, −100 a close at the bottom.
14 +
15 +## Formula
16 +
17 +```text
18 +%R = (highest(high, n) − close) / (highest(high, n) − lowest(low, n)) × −100
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | lookback length in bars (default 14) |
24 +| `highest / lowest` | extreme high and low of the last n bars including the current one |
25 +
26 +## How to read it
27 +
28 +- Above −20: the close is in the top fifth of the range — overbought; below −80: bottom fifth — oversold.
29 +- Williams' own rule: wait for %R to leave the extreme zone (cross back below −20 or above −80) before taking the reversal.
30 +- A failure to reach −20 during a rally (or −80 during a decline) shows the trend is losing its ability to close near the extremes — an early exhaustion clue.
31 +- Because it is unsmoothed, %R reacts a bar earlier than the slow stochastic but with more noise.
32 +
33 +## Default settings
34 +
35 +| Input | Default | Why |
36 +| --- | --- | --- |
37 +| `length` | `14` | Williams originally used 10 bars; 14 aligns it with the RSI and stochastic lookbacks most traders already watch. |
38 +
39 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
40 +
41 +## Best for
42 +
43 +| | |
44 +| --- | --- |
45 +| **Timeframes** | Intraday and daily; on weekly bars a 14-period %R covers a quarter and turns slowly. |
46 +| **Markets** | Futures, FX and indices in ranges; Williams designed it for commodity trading. |
47 +| **Note** | A pure timing gauge — pair it with a trend filter. |
48 +
49 +## Pairs well with
50 +
51 +- [Stochastic Oscillator](/docs/charts/indicators/stoch) — Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.
52 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
53 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
54 +
55 +## Pitfalls
56 +
57 +- Reads −50 whenever the range is flat (engine convention), which can look like a neutral signal on illiquid bars.
58 +- Without smoothing it spends many consecutive bars pinned at 0 or −100 in a trend — those are not reversal signals.
59 +- The negative scale confuses newcomers: −10 is the overbought side, −90 the oversold side.
60 +
61 +## History
62 +
63 +Larry Williams, 1973, in How I Made One Million Dollars Last Year Trading Commodities.
64 +
65 +## See also
66 +
67 +- [Stochastic](/docs/charts/indicators/stoch)
68 +- [Commodity Channel Index](/docs/charts/indicators/cci)
69 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-wma.mdx +70 −0
@@ -0,0 +1,70 @@
1 +export const meta = { title: 'WMA — Weighted Moving Average', description: 'Linearly weighted average: the newest bar counts n times the oldest — faster than the SMA.', image: '/charts/thumbs/indicator-wma-dark-lg.png' }
2 +
3 +# Weighted Moving Average
4 +
5 +<p className="lead">Linearly weighted average: the newest bar counts n times the oldest — faster than the SMA.</p>
6 +
7 +<ChartFigure kind="indicator" id="wma" caption="WMA 20 with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="wma" aka={["WMA","Linearly weighted MA","LWMA"]} category="Trend" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The WMA assigns weights 1, 2, …, n to the bars of the window from oldest to newest and divides by their sum. It sits between the SMA and the EMA in responsiveness and is the building block of the Hull Moving Average.
14 +
15 +## Formula
16 +
17 +```text
18 +WMA_t = Σ_{i=0}^{n−1} (n − i)·P_{t−i} / (n·(n+1)/2)
19 +```
20 +
21 +| Symbol | Meaning |
22 +| --- | --- |
23 +| `n` | window length (default 20) |
24 +| `P_\{t−i\}` | source price i bars ago |
25 +| `n·(n+1)/2` | sum of the weights 1 + 2 + … + n |
26 +
27 +## How to read it
28 +
29 +- Read like any moving average: slope for direction, price side for bias, crossings of two lengths for regime changes.
30 +- The WMA turns earlier than an SMA of the same length, so a WMA / SMA crossover is an early-warning of a trend change.
31 +- Because the oldest bars carry little weight, the WMA has almost no drop-off effect.
32 +- Compare with the EMA: the WMA has a hard window (a bar older than n has zero weight), the EMA never fully forgets.
33 +
34 +## Default settings
35 +
36 +| Input | Default | Why |
37 +| --- | --- | --- |
38 +| `length` | `20` | One month of sessions, comparable to the default SMA and EMA so the three can be laid side by side. |
39 +| `source` | `close` | Standard settlement price; switch to hlc3 for a typical-price version. |
40 +
41 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
42 +
43 +## Best for
44 +
45 +| | |
46 +| --- | --- |
47 +| **Timeframes** | Daily and intraday swing charts. |
48 +| **Markets** | Any liquid market; often used on FX where traders want speed without EMA memory. |
49 +
50 +
51 +## Pairs well with
52 +
53 +- [Hull Moving Average](/docs/charts/indicators/hma) — Almost lag-free smooth average built from three weighted MAs; hugs the trend.
54 +- [Simple Moving Average](/docs/charts/indicators/sma) — Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.
55 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
56 +
57 +## Pitfalls
58 +
59 +- Still lags by about a third of its length — it is not a leading indicator.
60 +- The heavy recency weight amplifies a single outlier bar for several periods.
61 +
62 +## History
63 +
64 +Classic weighting scheme from time-series statistics; adopted by technical analysts in the 1970s, no single author.
65 +
66 +## See also
67 +
68 +- [Hull Moving Average](/docs/charts/indicators/hma)
69 +- [Simple Moving Average](/docs/charts/indicators/sma)
70 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-ind-zigzag.mdx +77 −0
@@ -0,0 +1,77 @@
1 +export const meta = { title: 'Zig Zag — ZigZag', description: 'Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.', image: '/charts/thumbs/indicator-zigzag-dark-lg.png' }
2 +
3 +# ZigZag
4 +
5 +<p className="lead">Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.</p>
6 +
7 +<ChartFigure kind="indicator" id="zigzag" caption="ZigZag 5% with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="indicator" id="zigzag" aka={["Zig Zag","Swing filter"]} category="Levels & structure" pane="Overlay on the price pane" />
10 +
11 +## What it measures
12 +
13 +The ZigZag joins successive pivot points — a new pivot is confirmed only once price has moved against the current leg by at least the chosen deviation, in percent or in ATR multiples. Everything smaller is ignored, leaving the skeleton of the swings: the raw material for wave counts, pattern recognition and support / resistance mapping.
14 +
15 +## Formula
16 +
17 +```text
18 +leg continues while price extends its extreme
19 +pivot confirmed when reversal ≥ deviation % of the pivot price (mode percent)
20 + or ≥ atrMult · ATR(atrLength) (mode atr)
21 +the last point is the provisional extreme of the current leg
22 +```
23 +
24 +| Symbol | Meaning |
25 +| --- | --- |
26 +| `deviation` | minimum reversal in % (default 5) |
27 +| `mode` | percent or atr |
28 +| `atrLength / atrMult` | ATR window and multiple used in atr mode (14 × 3) |
29 +
30 +## How to read it
31 +
32 +- Higher highs and higher lows on the ZigZag = uptrend; lower highs and lower lows = downtrend; the first failed swing is the warning.
33 +- Each pivot is a natural anchor for Fibonacci retracements, trend lines and pitchforks.
34 +- Compare the length of successive legs: shrinking impulses and growing corrections signal a maturing trend.
35 +- The last segment is provisional — it will move until the reversal confirms the pivot.
36 +
37 +## Default settings
38 +
39 +| Input | Default | Why |
40 +| --- | --- | --- |
41 +| `deviation` | `5` | A 5 % swing filter on daily stock bars keeps only meaningful swings; use 0.5–1 % intraday, 10 %+ on crypto. |
42 +| `mode` | `percent` | Percent deviation is scale-free and the traditional choice; atr adapts the filter to current volatility. |
43 +| `atrLength` | `14` | Wilder's standard ATR window, used only in atr mode. |
44 +| `atrMult` | `3` | Three ATRs approximate a "significant" swing in most markets, used only in atr mode. |
45 +
46 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
47 +
48 +## Best for
49 +
50 +| | |
51 +| --- | --- |
52 +| **Timeframes** | Every timeframe — tune the deviation to the timeframe. |
53 +| **Markets** | Any market; essential for Elliott wave and harmonic-pattern work. |
54 +| **Note** | The ZigZag describes the past; only the confirmed pivots are fixed. |
55 +
56 +## Pairs well with
57 +
58 +- [Auto Fibonacci (visible range)](/docs/charts/indicators/auto-fib) — Fibonacci retracement drawn automatically on the largest swing of the visible range.
59 +- [Pivot Points](/docs/charts/indicators/pivots) — Support and resistance levels for the current period computed from the previous H, L, C.
60 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
61 +
62 +## Pitfalls
63 +
64 +- The last leg repaints by design: never backtest signals on the provisional pivot as if it were known in real time.
65 +- Too small a deviation returns to noise; too large removes the swings you trade.
66 +- Percent mode treats a 5 % move the same in calm and violent regimes — atr mode fixes that.
67 +
68 +## History
69 +
70 +Classic charting technique formalised as an indicator in the 1980s (notably by Arthur Merrill's filtered waves, 1977); no single author.
71 +
72 +## See also
73 +
74 +- [Auto Fibonacci](/docs/charts/indicators/auto-fib)
75 +- [Elliott impulse wave (drawing tool)](/docs/charts/tools/elliott-impulse)
76 +- [XABCD pattern (drawing tool)](/docs/charts/tools/xabcd)
77 +- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-indicators.mdx +27 −0
@@ -0,0 +1,27 @@
1 +export const meta = { title: 'Indicator encyclopedia', description: 'Every one of the 60 indicators of the HF Market Data charts explained and illustrated: what it measures, the formula, how to read it, why the defaults, pitfalls and history — each with a chart rendered by our own engine.' }
2 +
3 +# Indicator encyclopedia
4 +
5 +<p className="lead">60 indicators, each explained like a serious trading manual — what it measures, the exact formula, how to read it, why the default settings are what they are, what it pairs with, where it fails — and illustrated with the same synthetic daily chart rendered by our own engine, in your theme.</p>
6 +
7 +Every indicator is one click away in the [charts](/charts) — open the **Indicator library** (<kbd>⌘</kbd> <kbd>I</kbd>) for the same sheets next to the chart, or use the *Open in charts* button on each page. See also the [drawing tools](/docs/charts/tools) and the [charting guide](/docs/charts).
8 +
9 +## Trend
10 +
11 +<CatalogGrid kind="indicator" items={[{"id":"sma","name":"Simple Moving Average","oneLiner":"Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.","aka":"SMA"},{"id":"ema","name":"Exponential Moving Average","oneLiner":"Recency-weighted average that reacts faster than the SMA with less drop-off jitter.","aka":"EMA"},{"id":"wma","name":"Weighted Moving Average","oneLiner":"Linearly weighted average: the newest bar counts n times the oldest — faster than the SMA.","aka":"WMA"},{"id":"hma","name":"Hull Moving Average","oneLiner":"Almost lag-free smooth average built from three weighted MAs; hugs the trend.","aka":"HMA"},{"id":"dema","name":"Double Exponential Moving Average","oneLiner":"EMA with the lag of its own smoothing subtracted — quicker turns, same length.","aka":"DEMA"},{"id":"tema","name":"Triple Exponential Moving Average","oneLiner":"Three nested EMAs recombined to cancel lag — the fastest of the EMA family.","aka":"TEMA"},{"id":"kama","name":"Kaufman Adaptive Moving Average","oneLiner":"Speeds up in trends, flattens in noise: the smoothing adapts to the efficiency ratio.","aka":"KAMA"},{"id":"alma","name":"Arnaud Legoux Moving Average","oneLiner":"Gaussian-weighted average with an adjustable offset: tune smoothness against lag.","aka":"ALMA"},{"id":"lsma","name":"Linear Regression (LSMA + channel)","oneLiner":"End point of the best-fit line over n bars, with a ±k·σ channel of the residuals.","aka":"LSMA"},{"id":"envelope","name":"Moving Average Envelope","oneLiner":"A moving average with bands a fixed percentage above and below — the simplest channel.","aka":"MA Envelope"},{"id":"vwap","name":"Volume-Weighted Average Price","oneLiner":"Volume-weighted average price since the session open — the institutional fair value.","aka":"VWAP"},{"id":"avwap","name":"Anchored VWAP","oneLiner":"VWAP starting from a bar you choose — the average cost of everyone in since that event.","aka":"AVWAP"},{"id":"supertrend","name":"Supertrend","oneLiner":"ATR-based trailing stop that flips colour with the trend — one line, long or short.","aka":"ST"},{"id":"psar","name":"Parabolic SAR","oneLiner":"Accelerating trailing dots below or above price; a touch flips the trend.","aka":"PSAR"},{"id":"ichimoku","name":"Ichimoku Kinko Hyo","oneLiner":"Five lines and a cloud: trend, momentum, support and resistance in one equilibrium chart.","aka":"Ichimoku Cloud"},{"id":"vortex","name":"Vortex Indicator","oneLiner":"Two lines from bar-to-bar range overlap: VI+ over VI− = uptrend, the cross is the signal.","aka":"VI"},{"id":"aroon","name":"Aroon","oneLiner":"How recently the n-bar high and low were made, 0–100: fresh highs = Aroon Up near 100.","aka":"Aroon Up / Down"},{"id":"adx","name":"Average Directional Index","oneLiner":"Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.","aka":"ADX"}]} />
12 +
13 +## Momentum
14 +
15 +<CatalogGrid kind="indicator" items={[{"id":"rsi","name":"Relative Strength Index","oneLiner":"Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.","aka":"RSI"},{"id":"stochrsi","name":"Stochastic RSI","oneLiner":"Stochastic applied to RSI: a faster 0–100 oscillator with %K / %D and 20 / 80 zones.","aka":"StochRSI"},{"id":"macd","name":"Moving Average Convergence Divergence","oneLiner":"Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.","aka":"MACD"},{"id":"stoch","name":"Stochastic Oscillator","oneLiner":"Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.","aka":"Stoch"},{"id":"williams","name":"Williams %R","oneLiner":"Inverted stochastic on a −100…0 scale: above −20 overbought, below −80 oversold.","aka":"%R"},{"id":"cci","name":"Commodity Channel Index","oneLiner":"Typical price minus its SMA, scaled by mean deviation; ±100 marks unusual extension.","aka":"CCI"},{"id":"roc","name":"Rate of Change","oneLiner":"Percent change of price versus n bars ago; the zero line separates rising from falling.","aka":"ROC"},{"id":"momentum","name":"Momentum","oneLiner":"Price minus price n bars ago, in price units; the zero line is the trend switch.","aka":"Mom"},{"id":"ao","name":"Awesome Oscillator","oneLiner":"SMA 5 minus SMA 34 of the bar midpoint, as a histogram coloured by its own direction.","aka":"AO"},{"id":"trix","name":"TRIX","oneLiner":"Percent change of a triple-smoothed EMA with a signal line; filters out short-lived noise.","aka":"TRIX"},{"id":"ultimate","name":"Ultimate Oscillator","oneLiner":"Buying pressure over true range on 7, 14 and 28 bars, weighted 4-2-1, on a 0–100 scale.","aka":"UO"},{"id":"coppock","name":"Coppock Curve","oneLiner":"WMA of two summed rates of change; a turn up from below zero marks major market bottoms.","aka":"Coppock"},{"id":"dpo","name":"Detrended Price Oscillator","oneLiner":"Price minus a displaced SMA: removes the trend to expose the cycle around it.","aka":"DPO"},{"id":"kst","name":"Know Sure Thing","oneLiner":"Weighted sum of four smoothed rates of change plus a signal line: multi-cycle momentum.","aka":"KST"},{"id":"tsi","name":"True Strength Index","oneLiner":"Double-smoothed price change over double-smoothed absolute change, −100…100, with signal.","aka":"TSI"},{"id":"rvi","name":"Relative Vigor Index","oneLiner":"Close-minus-open over high-minus-low, symmetrically smoothed, with a signal line.","aka":"RVI"},{"id":"cmo","name":"Chande Momentum Oscillator","oneLiner":"Sum of gains minus losses over their total, −100…100, unsmoothed; ±50 mark the extremes.","aka":"CMO"},{"id":"elder-ray","name":"Elder Ray","oneLiner":"Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.","aka":"Bull Power / Bear Power"}]} />
16 +
17 +## Volatility
18 +
19 +<CatalogGrid kind="indicator" items={[{"id":"bollinger","name":"Bollinger Bands","oneLiner":"Moving average ± k standard deviations; the band width tracks volatility.","aka":"BB"},{"id":"keltner","name":"Keltner Channels","oneLiner":"EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.","aka":"KC"},{"id":"donchian","name":"Donchian Channels","oneLiner":"Highest high and lowest low of the last n bars: the breakout channel of trend followers.","aka":"DC"},{"id":"choppiness","name":"Choppiness Index","oneLiner":"Is the market trending or chopping? 0–100: above 61.8 = chop, below 38.2 = trend.","aka":"CHOP"},{"id":"mass","name":"Mass Index","oneLiner":"Sum of range-EMA ratios; a bulge above 27 then back under 26.5 flags a reversal.","aka":"Mass"},{"id":"atr","name":"Average True Range","oneLiner":"Typical bar-to-bar movement in price units — the standard yardstick for stops and size.","aka":"ATR"},{"id":"bb-pctb","name":"Bollinger %B","oneLiner":"Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.","aka":"%B"},{"id":"bb-width","name":"Bollinger Bandwidth","oneLiner":"Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.","aka":"BBW"},{"id":"hv","name":"Historical Volatility","oneLiner":"Annualised standard deviation of log returns, in % — the volatility options are priced on.","aka":"HV"},{"id":"stddev","name":"Standard Deviation","oneLiner":"Rolling standard deviation of price over n bars — raw dispersion in price units.","aka":"StdDev"}]} />
20 +
21 +## Volume
22 +
23 +<CatalogGrid kind="indicator" items={[{"id":"volume-profile","name":"Volume Profile (visible range)","oneLiner":"Volume traded at each price level of the visible bars, with POC and value area.","aka":"VP"},{"id":"obv","name":"On-Balance Volume","oneLiner":"Running total of volume signed by the close direction; should confirm price trends.","aka":"OBV"},{"id":"ad","name":"Accumulation / Distribution","oneLiner":"Cumulative money-flow volume, each bar weighted by where the close sits in its range.","aka":"A/D"},{"id":"mfi","name":"Money Flow Index","oneLiner":"Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.","aka":"MFI"},{"id":"cmf","name":"Chaikin Money Flow","oneLiner":"Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.","aka":"CMF"},{"id":"chaikin-osc","name":"Chaikin Oscillator","oneLiner":"MACD of the Accumulation / Distribution line: fast EMA minus slow EMA of money flow.","aka":"Chaikin Osc"},{"id":"force","name":"Force Index","oneLiner":"Price change × volume, EMA-smoothed: the force behind each move, bulls above zero.","aka":"Force"},{"id":"eom","name":"Ease of Movement","oneLiner":"How far price moves per unit of volume: positive = rising easily, negative = falling.","aka":"EOM"},{"id":"klinger","name":"Klinger Oscillator","oneLiner":"EMA 34 minus EMA 55 of signed volume, with a signal line — long-term money flow turns.","aka":"KVO"},{"id":"volume-osc","name":"Volume Oscillator","oneLiner":"Fast volume EMA vs slow volume EMA, in %: is participation rising or fading?","aka":"VO"},{"id":"volume-ma","name":"Volume","oneLiner":"Volume histogram coloured by bar direction with its moving average in its own pane.","aka":"Vol MA"}]} />
24 +
25 +## Levels & structure
26 +
27 +<CatalogGrid kind="indicator" items={[{"id":"zigzag","name":"ZigZag","oneLiner":"Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.","aka":"Zig Zag"},{"id":"pivots","name":"Pivot Points","oneLiner":"Support and resistance levels for the current period computed from the previous H, L, C.","aka":"Floor pivots"},{"id":"auto-fib","name":"Auto Fibonacci (visible range)","oneLiner":"Fibonacci retracement drawn automatically on the largest swing of the visible range.","aka":"Auto Fib"}]} />
added hfmarketdata/web/content/guides/charts-tool-arrow-down.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Arrow down marker', description: 'A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.', image: '/charts/thumbs/tool-arrow-down-dark-lg.png' }
2 +
3 +# Arrow down marker
4 +
5 +<p className="lead">A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.</p>
6 +
7 +<ChartFigure kind="tool" id="arrow-down" caption="Arrow down marker placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="arrow-down" aka={["Sell marker","Down arrow"]} category="Shapes & annotations" pane="1 point" />
10 +
11 +## What it is
12 +
13 +The arrow-down marker is the mirror of the up marker: a compact downward arrow with an optional label placed above a bar. It marks a sell, a short entry, a long exit or a bearish signal, and keeps a fixed pixel size at any zoom level.
14 +
15 +## What it is for
16 +
17 +Tag a specific bar as a sell, a short entry, an exit or a bearish event.
18 +
19 +## How to draw it
20 +
21 +1. Open the Shapes flyout and pick Arrow down marker.
22 +2. 1 click at the bar and price (usually just above the high) where the marker goes.
23 +3. Type the label ("Sell", "Exit") in the properties bar or by double-clicking the marker.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Pair each down marker with the up marker it closes to see the holding period and the result.
30 +- Use it to flag bearish signals (lower high, failed breakout) even when no trade was taken.
31 +- Keep labels short: two or three words survive at small zoom levels.
32 +
33 +## Example
34 +
35 +A red down arrow labelled "Exit +4.2 %" above the 3 May high closes the trade opened at the green arrow three weeks earlier.
36 +
37 +## Pairs well with
38 +
39 +- [Arrow up marker](/docs/charts/tools/arrow-up) — A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.
40 +- [Short position](/docs/charts/tools/short) — Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.
41 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
42 +- [Flag](/docs/charts/tools/flag) — A small flag pinned to a bar — bookmark an event or a signal.
43 +
44 +## Pitfalls
45 +
46 +- Markers are notes without price logic; the short position tool computes targets, stops and R:R.
47 +- Overlapping markers on consecutive bars become unreadable — use one and a callout.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Arrow up marker](/docs/charts/tools/arrow-up)
56 +- [Short position](/docs/charts/tools/short)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-arrow-up.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Arrow up marker', description: 'A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.', image: '/charts/thumbs/tool-arrow-up-dark-lg.png' }
2 +
3 +# Arrow up marker
4 +
5 +<p className="lead">A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.</p>
6 +
7 +<ChartFigure kind="tool" id="arrow-up" caption="Arrow up marker placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="arrow-up" aka={["Buy marker","Up arrow"]} category="Shapes & annotations" pane="1 point" />
10 +
11 +## What it is
12 +
13 +The arrow-up marker sits at a single point and draws a compact upward arrow with an optional label. It is the conventional way to mark a buy, a long entry or a bullish signal on a specific bar, and it stays legible at any zoom because its size is fixed in pixels.
14 +
15 +## What it is for
16 +
17 +Tag a specific bar as a buy, a long entry or a bullish event.
18 +
19 +## How to draw it
20 +
21 +1. Open the Shapes flyout and pick Arrow up marker.
22 +2. 1 click at the bar and price (usually just under the low) where the marker goes.
23 +3. Type the label ("Buy", "Long 100") in the properties bar or by double-clicking the marker.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Place markers at the actual fill price, not at the low of the bar, when journaling real trades.
30 +- Combine an up marker with a down marker later to read the trade at a glance.
31 +- Colour the markers by outcome when reviewing a series of trades.
32 +
33 +## Example
34 +
35 +A green up arrow labelled "Long 100 @ 45.30" under the breakout candle documents the entry for the weekly review.
36 +
37 +## Pairs well with
38 +
39 +- [Arrow down marker](/docs/charts/tools/arrow-down) — A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.
40 +- [Long position](/docs/charts/tools/long) — Entry, target and stop of a long trade with the risk:reward — planned before the click.
41 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
42 +- [Flag](/docs/charts/tools/flag) — A small flag pinned to a bar — bookmark an event or a signal.
43 +
44 +## Pitfalls
45 +
46 +- A marker is a note, not a position tool — use the long position tool when you want targets, stops and R:R.
47 +- Markers drawn on a lower timeframe reappear on higher ones at the nearest bar and may overlap.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Arrow down marker](/docs/charts/tools/arrow-down)
56 +- [Long position](/docs/charts/tools/long)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-arrow.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Arrow', description: 'A line with an arrowhead — points from a cause to an effect, or marks a direction.', image: '/charts/thumbs/tool-arrow-dark-lg.png' }
2 +
3 +# Arrow
4 +
5 +<p className="lead">A line with an arrowhead — points from a cause to an effect, or marks a direction.</p>
6 +
7 +<ChartFigure kind="tool" id="arrow" caption="Arrow placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="arrow" aka={["Arrow line","Pointer"]} category="Shapes & annotations" pane="2 points" shortcut="A" />
10 +
11 +## What it is
12 +
13 +The arrow is a two-point line ending in an arrowhead. It connects a comment to the bar it refers to, shows the expected direction of a move, or links a signal on an indicator pane to the price reaction. It is the annotation primitive used most in shared charts.
14 +
15 +## What it is for
16 +
17 +Point at something or show the direction of an expected move.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (A).
22 +2. 2 clicks (or drag): click the tail, then the tip where the arrowhead goes.
23 +3. Change colour, width and dash in the properties bar; add a text label if needed.
24 +
25 +Keyboard: press <kbd>A</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Point the arrow from the evidence (divergence, volume spike) to the consequence (the reversal bar).
30 +- A sloping arrow drawn into empty space to the right is an explicit forecast — date it with a text note.
31 +- Keep arrows short; long diagonal arrows across the chart are hard to read.
32 +
33 +## Example
34 +
35 +An arrow from the RSI trough at 24 up to the hammer candle at 93.10 shows the divergence that preceded a 6 % rally.
36 +
37 +## Pairs well with
38 +
39 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
40 +- [Callout](/docs/charts/tools/callout) — A text box with a pointer to the bar it explains — annotation that stays out of the way.
41 +- [Arrow up marker](/docs/charts/tools/arrow-up) — A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.
42 +- [Arrow down marker](/docs/charts/tools/arrow-down) — A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.
43 +
44 +## Pitfalls
45 +
46 +- Arrows anchored to price and time move with the chart: an arrow meant as a pure annotation can end up pointing at the wrong bar after a resize of the price axis.
47 +- Too many arrows say nothing — prefer one arrow and one sentence.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Arrow up marker](/docs/charts/tools/arrow-up)
56 +- [Callout](/docs/charts/tools/callout)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-brush.mdx +56 −0
@@ -0,0 +1,56 @@
1 +export const meta = { title: 'Brush', description: 'Freehand drawing that follows the pointer — annotate like on paper.', image: '/charts/thumbs/tool-brush-dark-lg.png' }
2 +
3 +# Brush
4 +
5 +<p className="lead">Freehand drawing that follows the pointer — annotate like on paper.</p>
6 +
7 +<ChartFigure kind="tool" id="brush" caption="Brush placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="brush" aka={["Freehand","Pen"]} category="Shapes & annotations" pane="free-form" shortcut="B" />
10 +
11 +## What it is
12 +
13 +The brush records the pointer's trajectory while you drag and stores it as a free-form drawing anchored to price and time. It is the tool for quick circling, underlining and handwritten marks during a live session or a review, when precision matters less than speed.
14 +
15 +## What it is for
16 +
17 +Make fast, informal annotations without choosing a geometric tool.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (B).
22 +2. Press and drag across the chart; the stroke ends when you release the pointer.
23 +3. Set width and colour before drawing (they apply to the next stroke) or afterwards in the properties bar.
24 +
25 +Keyboard: press <kbd>B</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Use a distinct colour for live notes so they can be deleted in one pass later.
30 +- The stroke scales with the chart: what looked like a neat circle at one zoom is a smear at another.
31 +- Prefer the ellipse or rectangle for anything you intend to share.
32 +
33 +## Example
34 +
35 +A quick red loop around the three failed breakout candles at 71.20 during the session, deleted after the post-market review.
36 +
37 +## Pairs well with
38 +
39 +- [Path](/docs/charts/tools/path) — A connected series of straight segments — trace a wave count, a route or a scenario.
40 +- [Ellipse](/docs/charts/tools/ellipse) — An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.
41 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
42 +
43 +## Pitfalls
44 +
45 +- Each stroke stores many points; hundreds of brush strokes slow down saving and rendering.
46 +- Brush strokes are saved per symbol and timeframe like every drawing — they will reappear on the next visit.
47 +
48 +## History
49 +
50 +Generic charting primitive; no single author.
51 +
52 +## See also
53 +
54 +- [Path](/docs/charts/tools/path)
55 +- [Ellipse](/docs/charts/tools/ellipse)
56 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-callout.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Callout', description: 'A text box with a pointer to the bar it explains — annotation that stays out of the way.', image: '/charts/thumbs/tool-callout-dark-lg.png' }
2 +
3 +# Callout
4 +
5 +<p className="lead">A text box with a pointer to the bar it explains — annotation that stays out of the way.</p>
6 +
7 +<ChartFigure kind="tool" id="callout" caption="Callout placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="callout" aka={["Speech bubble","Annotation box"]} category="Text & notes" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The callout combines a multi-line text box with a leader line to an anchor point. The anchor marks what you are talking about; the box sits wherever there is room. It is the right tool for explanations longer than a label and for shared charts that must be understood without you.
14 +
15 +## What it is for
16 +
17 +Explain a specific bar or pattern with several lines of text without covering it.
18 +
19 +## How to draw it
20 +
21 +1. Open the Text flyout and pick Callout.
22 +2. 2 clicks: click the anchor (the bar or price being explained), then click where the box should sit.
23 +3. Type the text in the inline editor (Shift+Enter for a new line), Enter to confirm.
24 +4. Drag the box or the anchor independently afterwards.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Place the box in empty space (above a downtrend, below an uptrend) and let the leader do the pointing.
31 +- Structure the text: what happened, why it matters, what would invalidate it.
32 +- Use one callout per idea; several short callouts read better than one long one.
33 +
34 +## Example
35 +
36 +Anchor on the swing high at 212.80, box in the upper-left: "Swing high — watch 0.618 at 204.40 for the retest; invalidated above 213".
37 +
38 +## Pairs well with
39 +
40 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
41 +- [Arrow](/docs/charts/tools/arrow) — A line with an arrowhead — points from a cause to an effect, or marks a direction.
42 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
43 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
44 +
45 +## Pitfalls
46 +
47 +- The box is anchored in price and time too: after a big move it may end up far from the anchor — drag it back.
48 +- Long texts make tall boxes that hide the chart on small screens.
49 +
50 +## History
51 +
52 +Generic charting primitive; no single author.
53 +
54 +## See also
55 +
56 +- [Text](/docs/charts/tools/text)
57 +- [Arrow](/docs/charts/tools/arrow)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-channel.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'Parallel channel', description: 'Two parallel lines around a trend — the path price is expected to travel inside.', image: '/charts/thumbs/tool-channel-dark-lg.png' }
2 +
3 +# Parallel channel
4 +
5 +<p className="lead">Two parallel lines around a trend — the path price is expected to travel inside.</p>
6 +
7 +<ChartFigure kind="tool" id="channel" caption="Parallel channel placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="channel" aka={["Trend channel","Equidistant channel"]} category="Lines & channels" pane="3 points" />
10 +
11 +## What it is
12 +
13 +The parallel channel is a trend line plus a parallel copy placed at a chosen distance, forming a corridor. Price oscillating between the two rails describes an orderly trend; the rails give targets for swings and the break of a rail signals acceleration or reversal.
14 +
15 +## What it is for
16 +
17 +Frame an orderly trend, anticipate where swings end, and spot the moment a trend leaves its corridor.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Parallel channel.
22 +2. 3 clicks: click two points of the first rail (usually two lows in an uptrend), then a third point that sets the distance of the parallel rail (a high between them).
23 +3. Drag the third anchor to widen or narrow the channel; drag the first two to change the slope.
24 +4. Turn on the fill in the properties bar to shade the corridor.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Buying near the lower rail and selling near the upper one is the textbook channel trade — as long as the slope holds.
31 +- A swing that fails to reach the far rail is the first sign of weakness in the trend.
32 +- A break out of the channel in the trend direction often travels one channel width; against the trend it signals a reversal.
33 +- The middle of the channel acts as a pivot: above it the trend is healthy, below it fragile.
34 +
35 +## Example
36 +
37 +An up channel with rails 6 points apart, lows at 100 and 104: the third swing high near 110 tags the upper rail, the next pullback to 106 is a lower-rail entry with a 6-point target.
38 +
39 +## Pairs well with
40 +
41 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
42 +- [Regression trend](/docs/charts/tools/regression) — Least-squares line through the closes between two dates, with a ±2σ channel.
43 +- [Andrews pitchfork](/docs/charts/tools/pitchfork) — Median line from a pivot through the midpoint of the next swing, with two parallel tines.
44 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
45 +
46 +## Pitfalls
47 +
48 +- A channel fitted to only two lows and one high is fragile; a third touch on each rail confirms it.
49 +- Parallel channels assume constant volatility; when ranges expand, a regression channel (±σ) or Keltner bands adapt better.
50 +
51 +## History
52 +
53 +Generic charting primitive; no single author.
54 +
55 +## See also
56 +
57 +- [Regression trend](/docs/charts/tools/regression)
58 +- [Andrews pitchfork](/docs/charts/tools/pitchfork)
59 +- [Bollinger Bands](/docs/charts/indicators/bollinger)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-cross.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Cross line', description: 'A horizontal and a vertical line through one point — pins a price and a moment together.', image: '/charts/thumbs/tool-cross-dark-lg.png' }
2 +
3 +# Cross line
4 +
5 +<p className="lead">A horizontal and a vertical line through one point — pins a price and a moment together.</p>
6 +
7 +<ChartFigure kind="tool" id="cross" caption="Cross line placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="cross" aka={["Crosshair marker","Price-time cross"]} category="Lines & channels" pane="1 point" shortcut="C" />
10 +
11 +## What it is
12 +
13 +The cross line freezes a crosshair on the chart: one horizontal line at the price and one vertical line at the bar you click. It is the quickest way to record where price was at a precise time and to compare later bars against that price.
14 +
15 +## What it is for
16 +
17 +Bookmark a price-and-time reference such as a session open, a news print or the point where a thesis started.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (C).
22 +2. 1 click at the price and bar to pin; both lines appear.
23 +3. Drag the centre to move both lines together.
24 +
25 +Keyboard: press <kbd>C</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Everything above-right of the cross is "higher and later" — a quick visual test of whether a move has progressed.
30 +- Pin the cross on an opening print to read the session as positive or negative territory.
31 +- Use it during replay to mark the bar where you took a decision, then step forward.
32 +
33 +## Example
34 +
35 +Pinning the cross at the 09:30 open of 412.50 shows at a glance that every bar until 11:15 closed above the open — a trend day in the making.
36 +
37 +## Pairs well with
38 +
39 +- [Horizontal line](/docs/charts/tools/hline) — A full-width line at one price — the classic support or resistance level.
40 +- [Vertical line](/docs/charts/tools/vline) — A full-height line at one bar — marks an event, a session open or a cycle date.
41 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
42 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
43 +
44 +## Pitfalls
45 +
46 +- Several crosses quickly look like a grid — delete them once the reference has served its purpose.
47 +- The horizontal part is a full line, so it is also visible far from the moment it refers to.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Horizontal line](/docs/charts/tools/hline)
56 +- [Vertical line](/docs/charts/tools/vline)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-date-price-range.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Date & price range', description: 'A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.', image: '/charts/thumbs/tool-date-price-range-dark-lg.png' }
2 +
3 +# Date & price range
4 +
5 +<p className="lead">A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.</p>
6 +
7 +<ChartFigure kind="tool" id="date-price-range" caption="Date & price range placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="date-price-range" aka={["Box measure","Range box"]} category="Measure & positions" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The date & price range draws a box between two corners and labels it with the price change, the percent change, the number of bars and the elapsed time. It is the measure tool kept as a persistent, shaded annotation — ideal for documenting swings in a review.
14 +
15 +## What it is for
16 +
17 +Document a swing or a consolidation with its full price and time statistics.
18 +
19 +## How to draw it
20 +
21 +1. Open the Measure flyout and pick Date & price range.
22 +2. 2 clicks (or drag): click one corner (start bar, start price), then the opposite corner.
23 +3. Adjust fill and colour in the properties bar; drag corners to refine.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Box each swing of a trend and read the series: bigger boxes, same duration means acceleration.
30 +- A consolidation box tells you both the breakout target (height) and how long the market has been coiling.
31 +- Keep the boxes as a journal of the move's structure.
32 +
33 +## Example
34 +
35 +From 3 to 21 March, 98.20 → 106.90: +8.70 (+8.86 %) over 14 bars — the box stays on the chart as the reference impulse.
36 +
37 +## Pairs well with
38 +
39 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
40 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
41 +- [Gann box](/docs/charts/tools/gann-box) — A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.
42 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
43 +
44 +## Pitfalls
45 +
46 +- The box is anchored to two points in time, so extending it into the future means the "end" is a bar that does not exist yet.
47 +- Percent is computed from the first corner.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Measure](/docs/charts/tools/measure)
56 +- [Rectangle](/docs/charts/tools/rect)
57 +- [Gann box](/docs/charts/tools/gann-box)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-date-range.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Date range', description: 'Bars and elapsed time between two dates — how long did it take?', image: '/charts/thumbs/tool-date-range-dark-lg.png' }
2 +
3 +# Date range
4 +
5 +<p className="lead">Bars and elapsed time between two dates — how long did it take?</p>
6 +
7 +<ChartFigure kind="tool" id="date-range" caption="Date range placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="date-range" aka={["Time measure","Bar counter"]} category="Measure & positions" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The date range measures the horizontal distance between two bars and reports the number of bars and the elapsed time. It answers the timing questions: how long a consolidation has lasted, how many bars a rally took, how far the next Fibonacci time zone is.
14 +
15 +## What it is for
16 +
17 +Count bars and time between two moments on the chart.
18 +
19 +## How to draw it
20 +
21 +1. Open the Measure flyout and pick Date range.
22 +2. 2 clicks: click the first bar, then the second; the horizontal span shows bars and duration.
23 +3. Drag either end to adjust.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Consolidations that last longer than the impulse before them often resolve against the trend.
30 +- Count the bars of past cycles and project the count forward as a time window.
31 +- Compare the duration of up and down legs: time asymmetry reveals who is in control.
32 +
33 +## Example
34 +
35 +The 12 → 26 June consolidation spans 11 bars, 2 weeks — shorter than the 19-bar rally that preceded it, consistent with a continuation.
36 +
37 +## Pairs well with
38 +
39 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
40 +- [Fibonacci time zones](/docs/charts/tools/fib-timezones) — Vertical lines 1, 2, 3, 5, 8, 13… bars apart — dates where turning points may cluster.
41 +- [Vertical range](/docs/charts/tools/vrange) — A shaded band between two bars — highlights a session, an event window or a phase.
42 +- [Vertical line](/docs/charts/tools/vline) — A full-height line at one bar — marks an event, a session open or a cycle date.
43 +
44 +## Pitfalls
45 +
46 +- Bars are counted on the indexed axis: session gaps and weekends do not count as bars.
47 +- Duration is wall-clock time between the two bar stamps, so a 1-minute chart spanning a weekend shows a long duration for few bars.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Fibonacci time zones](/docs/charts/tools/fib-timezones)
56 +- [Vertical range](/docs/charts/tools/vrange)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-elliott-correction.mdx +59 −0
@@ -0,0 +1,59 @@
1 +export const meta = { title: 'Elliott correction wave (ABC)', description: 'Labels a three-wave correction 0-A-B-C — the pause between two impulses.', image: '/charts/thumbs/tool-elliott-correction-dark-lg.png' }
2 +
3 +# Elliott correction wave (ABC)
4 +
5 +<p className="lead">Labels a three-wave correction 0-A-B-C — the pause between two impulses.</p>
6 +
7 +<ChartFigure kind="tool" id="elliott-correction" caption="Elliott correction wave (ABC) placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="elliott-correction" aka={["Corrective wave","Three-wave correction","Zigzag ABC"]} category="Patterns" pane="4 points" />
10 +
11 +## What it is
12 +
13 +The Elliott correction tool connects four pivots and labels them 0, A, B and C, the three-wave structure that corrects an impulse. Wave A moves against the prior trend, wave B retraces part of A, and wave C completes the correction, often ending near a Fibonacci relationship with A.
14 +
15 +## What it is for
16 +
17 +Frame a correction, anticipate where wave C ends and where the next impulse could start.
18 +
19 +## How to draw it
20 +
21 +1. Open the Patterns flyout and pick Elliott correction wave.
22 +2. 4 clicks: click the end of the prior impulse (0), then the end of wave A, wave B and wave C.
23 +3. Use magnet mode so the labels land on the pivots.
24 +4. Combine with a Fib extension (A → B → C projection) to estimate the end of C before it prints.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- C usually equals A or 1.618 × A; a C much shorter than A hints at a truncated correction and a strong next impulse.
31 +- B retracing more than 100 % of A signals a flat or an expanded flat, not a zigzag.
32 +- Volume typically declines through the correction and returns on the new impulse.
33 +- The end of C is the highest-quality entry in the direction of the larger trend.
34 +
35 +## Example
36 +
37 +After an impulse to 138: A down to 126, B up to 133, C down to 121 — C (12) equals A (12) and lands near the 0.382 retracement of the whole impulse.
38 +
39 +## Pairs well with
40 +
41 +- [Elliott impulse wave (12345)](/docs/charts/tools/elliott-impulse) — Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.
42 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
43 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
44 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
45 +
46 +## Pitfalls
47 +
48 +- Corrections come in many shapes (zigzag, flat, triangle, combination); this tool draws only the simple ABC.
49 +- Labelling a correction before C is complete is a forecast, not a count — say so on the chart.
50 +
51 +## History
52 +
53 +Ralph Nelson Elliott, 1938, The Wave Principle.
54 +
55 +## See also
56 +
57 +- [Elliott impulse wave](/docs/charts/tools/elliott-impulse)
58 +- [Fibonacci retracement](/docs/charts/tools/fib)
59 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-elliott-impulse.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'Elliott impulse wave (12345)', description: 'Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.', image: '/charts/thumbs/tool-elliott-impulse-dark-lg.png' }
2 +
3 +# Elliott impulse wave (12345)
4 +
5 +<p className="lead">Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.</p>
6 +
7 +<ChartFigure kind="tool" id="elliott-impulse" caption="Elliott impulse wave (12345) placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="elliott-impulse" aka={["Impulse wave","Five-wave motive"]} category="Patterns" pane="6 points" />
10 +
11 +## What it is
12 +
13 +The Elliott impulse tool connects six pivots and labels them 0 to 5, describing the classic five-wave motive structure: waves 1, 3 and 5 move with the trend, waves 2 and 4 correct against it. Drawing it forces the count to obey the rules (wave 2 never retraces all of wave 1, wave 3 is never the shortest, wave 4 does not overlap wave 1).
14 +
15 +## What it is for
16 +
17 +Lay out a wave count on the chart and check it against Elliott's rules and guidelines.
18 +
19 +## How to draw it
20 +
21 +1. Open the Patterns flyout and pick Elliott impulse wave.
22 +2. 6 clicks: click the origin (0), then the end of each wave in order (1, 2, 3, 4, 5).
23 +3. Use magnet mode so each label sits on the exact wick extreme.
24 +4. Drag any pivot to recount; delete and redraw when the market invalidates the count.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Wave 3 is usually the longest and steepest; if wave 3 is the shortest of 1, 3 and 5 the count is wrong.
31 +- Wave 2 tends to retrace 50–61.8 % of wave 1; wave 4 tends to be shallower (38.2 %) and to alternate in shape with wave 2.
32 +- Wave 5 often equals wave 1 or 61.8 % of waves 1–3; oscillator divergence at wave 5 is common.
33 +- After a completed impulse expect a three-wave correction (ABC) — draw it with the correction tool.
34 +
35 +## Example
36 +
37 +Pivots at 100, 112, 105, 130, 122, 138: wave 3 (25 points) is the longest, wave 2 retraced 58 % of wave 1 and wave 5 (16) is close to wave 1 (12) — a valid count.
38 +
39 +## Pairs well with
40 +
41 +- [Elliott correction wave (ABC)](/docs/charts/tools/elliott-correction) — Labels a three-wave correction 0-A-B-C — the pause between two impulses.
42 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
43 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
44 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
45 +
46 +## Pitfalls
47 +
48 +- Wave counts are notoriously subjective: two analysts with the same chart often produce different degrees and labels.
49 +- A count that needs to be revised every few bars is describing noise, not structure.
50 +- The tool draws the lines; it does not verify the rules for you — check them.
51 +
52 +## History
53 +
54 +Ralph Nelson Elliott, 1938, The Wave Principle; popularised by Frost & Prechter (1978).
55 +
56 +## See also
57 +
58 +- [Elliott correction wave](/docs/charts/tools/elliott-correction)
59 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-ellipse.mdx +56 −0
@@ -0,0 +1,56 @@
1 +export const meta = { title: 'Ellipse', description: 'An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.', image: '/charts/thumbs/tool-ellipse-dark-lg.png' }
2 +
3 +# Ellipse
4 +
5 +<p className="lead">An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.</p>
6 +
7 +<ChartFigure kind="tool" id="ellipse" caption="Ellipse placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="ellipse" aka={["Circle","Oval"]} category="Shapes & annotations" pane="2 points" shortcut="E" />
10 +
11 +## What it is
12 +
13 +The ellipse fills the box defined by its two corners and is the natural way to circle something on a chart: a rounded top, a volume climax, a cluster of candles, a divergence. It carries no analytical rule of its own; it directs the eye.
14 +
15 +## What it is for
16 +
17 +Draw attention to a region of the chart in a review, a screenshot or a shared link.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (E).
22 +2. 2 clicks (or drag): click one corner of the bounding box, then the opposite corner; the ellipse fills the box.
23 +3. Adjust fill opacity and colour in the properties bar.
24 +
25 +Keyboard: press <kbd>E</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Use one colour for what worked and another for what failed when reviewing trades.
30 +- A wide, flat ellipse suits a rounded bottom; a tall one suits a spike.
31 +- Keep the fill light so the candles inside stay legible.
32 +
33 +## Example
34 +
35 +Circling the five bars around the 12 June low with a 15 % green fill makes the volume climax and the reversal candle obvious in the shared screenshot.
36 +
37 +## Pairs well with
38 +
39 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
40 +- [Callout](/docs/charts/tools/callout) — A text box with a pointer to the bar it explains — annotation that stays out of the way.
41 +- [Arrow](/docs/charts/tools/arrow) — A line with an arrowhead — points from a cause to an effect, or marks a direction.
42 +
43 +## Pitfalls
44 +
45 +- An ellipse is not a channel or a cycle tool — it does not imply any price or time projection.
46 +- Like every shape it is scaled with the axes: zooming changes its proportions on screen.
47 +
48 +## History
49 +
50 +Generic charting primitive; no single author.
51 +
52 +## See also
53 +
54 +- [Rectangle](/docs/charts/tools/rect)
55 +- [Callout](/docs/charts/tools/callout)
56 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-extended.mdx +56 −0
@@ -0,0 +1,56 @@
1 +export const meta = { title: 'Extended line', description: 'A line through two points extended in both directions across the whole chart.', image: '/charts/thumbs/tool-extended-dark-lg.png' }
2 +
3 +# Extended line
4 +
5 +<p className="lead">A line through two points extended in both directions across the whole chart.</p>
6 +
7 +<ChartFigure kind="tool" id="extended" caption="Extended line placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="extended" aka={["Infinite line"]} category="Lines & channels" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The extended line passes through its two anchors and continues to both edges of the chart. It is used when the past matters as much as the future: to check whether a slope already governed earlier swings, or to trace a channel boundary back to its origin.
14 +
15 +## What it is for
16 +
17 +Test a sloping level against the whole history on screen, backwards and forwards.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Extended line.
22 +2. 2 clicks: click any two points on the level you want to test; the line grows to both edges.
23 +3. Adjust either anchor to rotate the line around the other.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Look left: an extended line that also touches swings from long before the anchors is a genuine structural level.
30 +- Use it to prolong a neckline or a channel side beyond the pattern that created it.
31 +- Combine with a trend line of the opposite slope to see where the two converge — apex dates matter for triangles.
32 +
33 +## Example
34 +
35 +Two highs at 210 and 204 set a falling resistance; extended left it also caps the 220 high from six months earlier, confirming a long-lived downtrend line.
36 +
37 +## Pairs well with
38 +
39 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
40 +- [Ray](/docs/charts/tools/ray) — A trend line that starts at point A and runs through B to the right edge — forever.
41 +- [Parallel channel](/docs/charts/tools/channel) — Two parallel lines around a trend — the path price is expected to travel inside.
42 +
43 +## Pitfalls
44 +
45 +- Infinite lines cross the whole chart, so several of them quickly become a lattice — keep two or three at most.
46 +- The same two anchors on a percent or log scale give a different line; extended lines exaggerate that difference.
47 +
48 +## History
49 +
50 +Generic charting primitive; no single author.
51 +
52 +## See also
53 +
54 +- [Ray](/docs/charts/tools/ray)
55 +- [Trend line](/docs/charts/tools/trendline)
56 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-fib-arcs.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Fibonacci arcs', description: 'Arcs at 38.2–100 % of a swing, centred on its end — support that curves with time.', image: '/charts/thumbs/tool-fib-arcs-dark-lg.png' }
2 +
3 +# Fibonacci arcs
4 +
5 +<p className="lead">Arcs at 38.2–100 % of a swing, centred on its end — support that curves with time.</p>
6 +
7 +<ChartFigure kind="tool" id="fib-arcs" caption="Fibonacci arcs placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="fib-arcs" aka={["Fib arcs","Fibonacci circles"]} category="Fibonacci & Gann" pane="2 points" />
10 +
11 +## What it is
12 +
13 +Fibonacci arcs draw circles centred on the end of a swing with radii equal to 38.2, 50, 61.8 and 100 % of the swing length. Price meeting an arc is expected to react, and because the arcs curve, the support level rises or falls as time passes — combining a price and a time component in one shape.
14 +
15 +## What it is for
16 +
17 +Anticipate pullback support that weakens over time, and see where retracements and time meet.
18 +
19 +## How to draw it
20 +
21 +1. Open the Fibonacci flyout and pick Fibonacci arcs.
22 +2. 2 clicks: click the start of the swing, then its end (the centre of the arcs).
23 +3. Four arcs are drawn at 0.382, 0.5, 0.618 and 1.0 of the distance between the two points.
24 +4. Adjust the anchors and the chart zoom until the arcs cover the pullback area.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- A pullback that turns at the 38.2 % arc quickly is stronger than one that drifts down to the 61.8 % arc.
31 +- Where an arc meets a horizontal Fib level or a trend line is the high-probability reaction point.
32 +- Arcs are most readable when the swing is steep and the pullback fast.
33 +
34 +## Example
35 +
36 +On a 100 → 120 swing the 0.618 arc sits 12.4 "chart units" from the high; a pullback that touches it 10 bars later finds the arc near 109, higher than the flat 107.64 retracement line.
37 +
38 +## Pairs well with
39 +
40 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
41 +- [Fibonacci speed/resistance fan](/docs/charts/tools/fib-fan) — Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.
42 +- [Ellipse](/docs/charts/tools/ellipse) — An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.
43 +
44 +## Pitfalls
45 +
46 +- The arcs are circles in pixel space: stretching the price axis or zooming in time deforms them and moves every intersection.
47 +- The tool is therefore only meaningful at the zoom level where it was drawn — take a screenshot if the reading matters.
48 +- Few traders use arcs, so their self-fulfilling power is weaker than horizontal Fibs.
49 +
50 +## History
51 +
52 +Introduced with early charting software in the 1980s as a time-price extension of Fibonacci retracements.
53 +
54 +## See also
55 +
56 +- [Fibonacci retracement](/docs/charts/tools/fib)
57 +- [Fibonacci speed/resistance fan](/docs/charts/tools/fib-fan)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-fib-extension.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'Trend-based Fib extension', description: 'Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.', image: '/charts/thumbs/tool-fib-extension-dark-lg.png' }
2 +
3 +# Trend-based Fib extension
4 +
5 +<p className="lead">Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.</p>
6 +
7 +<ChartFigure kind="tool" id="fib-extension" caption="Trend-based Fib extension placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="fib-extension" aka={["Fib extension","Fibonacci projection","ABC projection"]} category="Fibonacci & Gann" pane="3 points" />
10 +
11 +## What it is
12 +
13 +The trend-based extension measures an impulse (A to B), waits for the pullback to end (C) and projects Fibonacci multiples of the impulse from C. The 1.0, 1.618 and 2.618 lines are the classic targets for the next leg; the 0.618 is the minimum most traders expect.
14 +
15 +## What it is for
16 +
17 +Set profit targets for the leg that follows a retracement, based on the size of the leg before it.
18 +
19 +## How to draw it
20 +
21 +1. Open the Fibonacci flyout and pick Trend-based Fib extension.
22 +2. 3 clicks: click the start of the impulse (A), its end (B), then the end of the pullback (C).
23 +3. Levels 0, 0.382, 0.618, 1, 1.382, 1.618, 2 and 2.618 of the A–B distance are drawn from C.
24 +4. Drag C as the pullback develops; the projections follow.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- The 1.0 extension (a leg equal to the first) is the most common target; 1.618 marks an extended, strong trend.
31 +- A leg stopping at 0.618 of the previous one is a sign of a maturing move.
32 +- Stack the extension with a retracement of a larger swing: overlapping levels are stronger targets.
33 +- Beyond 2.618 the move is parabolic — trail stops rather than pick a top.
34 +
35 +## Example
36 +
37 +Impulse 100 → 120 (20 points), pullback to 110: the 0.618 target is 122.36, the 1.0 target 130 and the 1.618 target 142.36.
38 +
39 +## Pairs well with
40 +
41 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
42 +- [Elliott impulse wave (12345)](/docs/charts/tools/elliott-impulse) — Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.
43 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
44 +- [Moving Average Convergence Divergence](/docs/charts/indicators/macd) — Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.
45 +
46 +## Pitfalls
47 +
48 +- Choosing C too early — before the pullback has clearly ended — puts every target too low or too high.
49 +- Extensions say nothing about time: a 1.618 target can take one bar or fifty.
50 +- On a percent or log scale the projections should be geometric, but the tool works in price points.
51 +
52 +## History
53 +
54 +Projection technique formalised by Elliott-wave practitioners; the "trend-based" three-point form spread with charting software in the 1990s.
55 +
56 +## See also
57 +
58 +- [Fibonacci retracement](/docs/charts/tools/fib)
59 +- [Elliott impulse wave](/docs/charts/tools/elliott-impulse)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-fib-fan.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Fibonacci speed/resistance fan', description: 'Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.', image: '/charts/thumbs/tool-fib-fan-dark-lg.png' }
2 +
3 +# Fibonacci speed/resistance fan
4 +
5 +<p className="lead">Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.</p>
6 +
7 +<ChartFigure kind="tool" id="fib-fan" caption="Fibonacci speed/resistance fan placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="fib-fan" aka={["Fib fan","Speed resistance lines"]} category="Fibonacci & Gann" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The Fibonacci fan turns retracement levels into trend lines. From the origin of a swing, rays are drawn through the points where the vertical line at the swing's end crosses the 23.6, 38.2, 50, 61.8 and 78.6 % levels. Pullbacks are expected to find support along these rays, which makes the tool a time-aware version of the retracement.
14 +
15 +## What it is for
16 +
17 +Track sloping support and resistance that tightens as the trend ages, instead of fixed horizontal levels.
18 +
19 +## How to draw it
20 +
21 +1. Open the Fibonacci flyout and pick Fibonacci speed/resistance fan.
22 +2. 2 clicks: click the swing low (origin), then the swing high; five rays fan out from the origin.
23 +3. For a downtrend click the high first, then the low.
24 +4. Drag the second anchor to update the fan as the swing extends.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Price holding above the 38.2 % ray is a strong trend; sliding down to the 61.8 % ray means the trend is losing speed.
31 +- Each ray, once broken, tends to become resistance on the way back up.
32 +- The fan converges towards the origin: the further right you look, the wider the zones between rays.
33 +
34 +## Example
35 +
36 +Swing 100 → 120 over 30 bars: the 0.618 ray rises from 100 through 107.64 at bar 30 and sits near 112 at bar 45 — a sloping support to watch on the pullback.
37 +
38 +## Pairs well with
39 +
40 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
41 +- [Gann fan](/docs/charts/tools/gann-fan) — Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend's balance.
42 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
43 +- [Average Directional Index](/docs/charts/indicators/adx) — Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.
44 +
45 +## Pitfalls
46 +
47 +- The fan angles change with the horizontal zoom and with the price scale mode — the levels are geometric, the angles are not.
48 +- A fan drawn on an incomplete swing has to be redrawn every time the swing extends.
49 +
50 +## History
51 +
52 +Speed resistance lines by Edson Gould (1960s), later adapted to Fibonacci ratios.
53 +
54 +## See also
55 +
56 +- [Gann fan](/docs/charts/tools/gann-fan)
57 +- [Fibonacci retracement](/docs/charts/tools/fib)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-fib-timezones.mdx +59 −0
@@ -0,0 +1,59 @@
1 +export const meta = { title: 'Fibonacci time zones', description: 'Vertical lines 1, 2, 3, 5, 8, 13… bars apart — dates where turning points may cluster.', image: '/charts/thumbs/tool-fib-timezones-dark-lg.png' }
2 +
3 +# Fibonacci time zones
4 +
5 +<p className="lead">Vertical lines 1, 2, 3, 5, 8, 13… bars apart — dates where turning points may cluster.</p>
6 +
7 +<ChartFigure kind="tool" id="fib-timezones" caption="Fibonacci time zones placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="fib-timezones" aka={["Fib time","Time zones"]} category="Fibonacci & Gann" pane="2 points" />
10 +
11 +## What it is
12 +
13 +Fibonacci time zones project the Fibonacci sequence forward in time: from a reference bar, vertical lines are placed 1, 2, 3, 5, 8, 13, 21… units later, the unit being the distance between the two anchor bars. The idea is that trend changes tend to occur near these dates rather than at random.
14 +
15 +## What it is for
16 +
17 +Highlight future dates where a reversal or acceleration is statistically more plausible, to time entries and exits.
18 +
19 +## How to draw it
20 +
21 +1. Open the Fibonacci flyout and pick Fibonacci time zones.
22 +2. 2 clicks: click the reference bar (0), then a second bar that defines the base unit (1).
23 +3. Vertical lines are drawn at 0, 1, 2, 3, 5, 8, 13, 21, 34… units to the right; enable labels in the properties bar.
24 +4. Anchor on a major low or high; the unit is often the length of the first swing.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Treat each zone as a window of a couple of bars, not an exact date.
31 +- A zone that coincides with a price level (Fib retracement, pivot) is the strongest setup.
32 +- The early lines (1, 2, 3) are too close to mean much; the 8, 13 and 21 zones are the ones traders watch.
33 +
34 +## Example
35 +
36 +Anchored on a low with a 5-day unit, the zones fall 5, 10, 15, 25, 40 and 65 trading days later; the 40-day zone marked the next swing high within two sessions.
37 +
38 +## Pairs well with
39 +
40 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
41 +- [Vertical line](/docs/charts/tools/vline) — A full-height line at one bar — marks an event, a session open or a cycle date.
42 +- [Date range](/docs/charts/tools/date-range) — Bars and elapsed time between two dates — how long did it take?
43 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
44 +
45 +## Pitfalls
46 +
47 +- The zones depend entirely on the chosen unit; a one-bar change in the second anchor moves the 34th zone by 34 bars.
48 +- The time axis is indexed by bar, so zones are counted in bars, not calendar days — holidays shift them.
49 +- Confirmation bias is strong: some zone will always be "near" any turn.
50 +
51 +## History
52 +
53 +Time projections from the Fibonacci sequence, used by Ralph Nelson Elliott and later popularised by Robert Fischer (1993).
54 +
55 +## See also
56 +
57 +- [Fibonacci retracement](/docs/charts/tools/fib)
58 +- [Date range](/docs/charts/tools/date-range)
59 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-fib.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'Fibonacci retracement', description: 'Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.', image: '/charts/thumbs/tool-fib-dark-lg.png' }
2 +
3 +# Fibonacci retracement
4 +
5 +<p className="lead">Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.</p>
6 +
7 +<ChartFigure kind="tool" id="fib" caption="Fibonacci retracement placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="fib" aka={["Fib retracement","Fibs"]} category="Fibonacci & Gann" pane="2 points" shortcut="F" />
10 +
11 +## What it is
12 +
13 +The retracement tool divides a completed swing into the classic Fibonacci ratios and draws a horizontal level at each one. Traders watch the 38.2, 50 and 61.8 % lines as the zones where a pullback is most likely to find support (in an uptrend) or resistance (in a downtrend).
14 +
15 +## What it is for
16 +
17 +Locate probable pullback zones inside a trend and set entries, stops and partial targets relative to the last impulse.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (F).
22 +2. 2 clicks: click the swing low (point A) — the start of the impulse — then the swing high (point B); the levels appear between them, 0 at B and 1 at A.
23 +3. For a downtrend, click the high first, then the low.
24 +4. Drag either anchor to refine; edit the level list (add 1.618) in the properties bar.
25 +
26 +Keyboard: press <kbd>F</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Shallow retracements (23.6–38.2 %) signal a strong trend; deep ones (61.8–78.6 %) a fragile one.
31 +- Confluence with a moving average, a VWAP or a prior level makes a Fibonacci zone far more credible.
32 +- A close beyond 100 % invalidates the retracement idea: the swing has been undone.
33 +- Use magnet mode so the anchors snap exactly to the wick extremes.
34 +
35 +## Example
36 +
37 +A rally from 100 to 120 puts the 0.382 line at 112.36, the 0.5 at 110 and the 0.618 at 107.64: a pullback that holds 110–112 keeps the uptrend intact.
38 +
39 +## Pairs well with
40 +
41 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
42 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
43 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
44 +- [Volume-Weighted Average Price](/docs/charts/indicators/vwap) — Volume-weighted average price since the session open — the institutional fair value.
45 +
46 +## Pitfalls
47 +
48 +- Anchoring on closes instead of wicks shifts every level; pick one convention and keep it.
49 +- Levels are self-fulfilling only on liquid, widely watched instruments and timeframes.
50 +- Drawing Fibs on every minor wiggle produces a wall of lines and no information.
51 +
52 +## History
53 +
54 +Ratios from Leonardo of Pisa's 13th-century sequence; applied to price swings by Ralph Nelson Elliott in the 1930s–40s.
55 +
56 +## See also
57 +
58 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension)
59 +- [Auto Fibonacci indicator](/docs/charts/indicators/auto-fib)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-flag.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Flag', description: 'A small flag pinned to a bar — bookmark an event or a signal.', image: '/charts/thumbs/tool-flag-dark-lg.png' }
2 +
3 +# Flag
4 +
5 +<p className="lead">A small flag pinned to a bar — bookmark an event or a signal.</p>
6 +
7 +<ChartFigure kind="tool" id="flag" caption="Flag placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="flag" aka={["Marker flag","Bookmark"]} category="Text & notes" pane="1 point" />
10 +
11 +## What it is
12 +
13 +The flag is a compact marker with a short label, planted on a bar. It is meant for events and bookmarks — an earnings release, a news item, a signal fired by a system — rather than for analysis. Its fixed pixel size keeps it visible at any zoom level.
14 +
15 +## What it is for
16 +
17 +Bookmark a bar with a one-word label so it can be found again quickly.
18 +
19 +## How to draw it
20 +
21 +1. Open the Text flyout and pick Flag.
22 +2. 1 click at the bar and price where the flag is planted.
23 +3. Type the label (one or two words) in the properties bar or by double-clicking.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Flag every scheduled event (earnings, CPI, FOMC) on the daily chart and the reaction becomes a pattern you can study.
30 +- Use the same colour for the same kind of event.
31 +- Flags on an intraday chart at the session open show how each day started.
32 +
33 +## Example
34 +
35 +A yellow flag labelled "Earnings" above the 25 July bar; the 8 % gap the next morning is now explained in every future screenshot.
36 +
37 +## Pairs well with
38 +
39 +- [Vertical line](/docs/charts/tools/vline) — A full-height line at one bar — marks an event, a session open or a cycle date.
40 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
41 +- [Arrow up marker](/docs/charts/tools/arrow-up) — A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.
42 +- [Price label](/docs/charts/tools/price-label) — A tag showing the exact price at the click — labels a level or a fill without a line.
43 +
44 +## Pitfalls
45 +
46 +- Flags are drawings: they live per symbol and timeframe in your browser, not in a shared calendar.
47 +- A dense cluster of flags overlaps; prefer a vertical range for a multi-bar event.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Vertical line](/docs/charts/tools/vline)
56 +- [Price label](/docs/charts/tools/price-label)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-gann-box.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Gann box', description: 'A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.', image: '/charts/thumbs/tool-gann-box-dark-lg.png' }
2 +
3 +# Gann box
4 +
5 +<p className="lead">A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.</p>
6 +
7 +<ChartFigure kind="tool" id="gann-box" caption="Gann box placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="gann-box" aka={["Gann square","Gann grid"]} category="Fibonacci & Gann" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The Gann box frames a swing in a rectangle and subdivides it in both directions at 0.25, 0.382, 0.5, 0.618 and 0.75, adding the main diagonals. It shows how far a move has travelled in price and in time simultaneously, and where the two proportions intersect.
14 +
15 +## What it is for
16 +
17 +Compare the price progress of a move with its time progress and locate price-time confluence points.
18 +
19 +## How to draw it
20 +
21 +1. Open the Fibonacci flyout and pick Gann box.
22 +2. 2 clicks: click the start of the swing (one corner), then its end (the opposite corner).
23 +3. Horizontal and vertical levels at 25 / 38.2 / 50 / 61.8 / 75 % plus the diagonals appear inside the box.
24 +4. Drag a corner to resize; use the fill option to shade the box.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Price crossing the box diagonal from above means the move is now slower than "one unit per unit"; from below, faster.
31 +- Where a horizontal and a vertical division meet inside the box is a candidate turning point.
32 +- Extending the box to the right by its own width gives the next "square" — Gann expected reactions at its edges.
33 +
34 +## Example
35 +
36 +A 40-bar, 20-point rally boxed from 100 to 120: the 0.5 × 0.5 point sits at bar 20 / 110; price reaching 115 at bar 12 is ahead of the diagonal — a fast move.
37 +
38 +## Pairs well with
39 +
40 +- [Gann fan](/docs/charts/tools/gann-fan) — Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend's balance.
41 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
42 +- [Date & price range](/docs/charts/tools/date-price-range) — A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.
43 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
44 +
45 +## Pitfalls
46 +
47 +- The grid produces many intersections; without a rule for which ones matter, any turn can be "explained".
48 +- The divisions are proportional to the box, so the box must be drawn on a complete swing.
49 +
50 +## History
51 +
52 +William Delbert Gann, 1930s, price-time "squaring" methods.
53 +
54 +## See also
55 +
56 +- [Gann fan](/docs/charts/tools/gann-fan)
57 +- [Date & price range](/docs/charts/tools/date-price-range)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-gann-fan.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Gann fan', description: 'Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend\'s balance.', image: '/charts/thumbs/tool-gann-fan-dark-lg.png' }
2 +
3 +# Gann fan
4 +
5 +<p className="lead">Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend's balance.</p>
6 +
7 +<ChartFigure kind="tool" id="gann-fan" caption="Gann fan placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="gann-fan" aka={["Gann angles","1×1 line"]} category="Fibonacci & Gann" pane="2 points" shortcut="G" />
10 +
11 +## What it is
12 +
13 +The Gann fan draws rays from a pivot at fixed price-to-time ratios: 1×8, 1×4, 1×3, 1×2, 1×1, 2×1, 3×1, 4×1 and 8×1 units of price per unit of time. The 1×1 (45°) line is the balance between price and time; trading above it is bullish, below it bearish, and each angle acts as support or resistance in turn.
14 +
15 +## What it is for
16 +
17 +Judge the strength of a trend by the angle it rides and anticipate the next angle when one breaks.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (G).
22 +2. 2 clicks: click the pivot (origin), then a second point that defines the 1×1 line; the eight other angles are derived from it.
23 +3. Choose the second point so that the 1×1 matches one unit of price per bar in your own scaling (e.g. 1 point per day).
24 +4. Drag the second anchor to rescale every angle at once.
25 +
26 +Keyboard: press <kbd>G</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Price above the 1×1 is a healthy uptrend; a drop to the 1×2 means the trend has halved its speed.
31 +- Breaking one angle usually sends price to the next one — angles are stepping stones.
32 +- The steep angles (4×1, 8×1) are only sustainable in the first phase of a parabolic move.
33 +
34 +## Example
35 +
36 +With the 1×1 set to 1 point per bar from a low at 100, price at 125 after 20 bars sits above the 1×1 (120) and below the 2×1 (140) — a strong but not parabolic trend.
37 +
38 +## Pairs well with
39 +
40 +- [Gann box](/docs/charts/tools/gann-box) — A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.
41 +- [Fibonacci speed/resistance fan](/docs/charts/tools/fib-fan) — Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.
42 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
43 +- [Rate of Change](/docs/charts/indicators/roc) — Percent change of price versus n bars ago; the zero line separates rising from falling.
44 +
45 +## Pitfalls
46 +
47 +- Gann angles depend on the price-per-bar scaling you impose; there is no objective 45° on a chart whose axes are arbitrary.
48 +- A fan drawn on a stock at 20 and one at 2 000 need very different second points — always calibrate the 1×1.
49 +
50 +## History
51 +
52 +William Delbert Gann, 1930s, geometric angles from his trading courses.
53 +
54 +## See also
55 +
56 +- [Gann box](/docs/charts/tools/gann-box)
57 +- [Fibonacci speed/resistance fan](/docs/charts/tools/fib-fan)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-head-shoulders.mdx +61 −0
@@ -0,0 +1,61 @@
1 +export const meta = { title: 'Head & shoulders', description: 'Seven-point reversal pattern: neckline through the two troughs, measured-move target.', image: '/charts/thumbs/tool-head-shoulders-dark-lg.png' }
2 +
3 +# Head & shoulders
4 +
5 +<p className="lead">Seven-point reversal pattern: neckline through the two troughs, measured-move target.</p>
6 +
7 +<ChartFigure kind="tool" id="head-shoulders" caption="Head & shoulders placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="head-shoulders" aka={["H&S","Inverse head and shoulders"]} category="Patterns" pane="7 points" />
10 +
11 +## What it is
12 +
13 +The head & shoulders tool connects seven pivots — the run-up, the left shoulder, the first trough, the head, the second trough, the right shoulder and the breakdown — and draws the neckline through the two troughs (points 2 and 4). The distance from the head to the neckline, projected from the break, is the classic measured target. Drawn upside down it is the inverse pattern that ends downtrends.
14 +
15 +## What it is for
16 +
17 +Outline a topping or bottoming pattern, locate the neckline and derive the measured-move target.
18 +
19 +## How to draw it
20 +
21 +1. Open the Patterns flyout and pick Head & shoulders.
22 +2. 7 clicks in order: the start of the move (1), the left shoulder (2), the first trough (3), the head (4), the second trough (5), the right shoulder (6) and the end/breakdown point (7).
23 +3. The neckline is drawn through the two troughs; for an inverse pattern click the mirror points (lows for shoulders and head).
24 +4. Use magnet mode so the shoulders and head sit on the wick extremes.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- The pattern is only complete when price closes beyond the neckline; before that it is a candidate.
31 +- Volume should be lower on the right shoulder than on the left and expand on the break.
32 +- The measured target is the head-to-neckline height projected from the break; a return to the neckline after the break is the classic retest entry.
33 +- A sloping neckline is fine; a steeply rising one weakens a top pattern.
34 +
35 +## Example
36 +
37 +Head at 140, neckline near 128: the 12-point height projected from the 127.50 break gives a target of 115.50, reached six weeks later.
38 +
39 +## Pairs well with
40 +
41 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
42 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
43 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
44 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
45 +
46 +## Pitfalls
47 +
48 +- Head & shoulders are seen everywhere in hindsight; the pattern needs a preceding trend to reverse.
49 +- Symmetry is not required, but shoulders at wildly different heights usually mean a different structure.
50 +- Trading the pattern before the neckline break is trading a guess.
51 +
52 +## History
53 +
54 +Described by Richard Schabacker (1932) and codified by Edwards & Magee (1948), Technical Analysis of Stock Trends.
55 +
56 +## See also
57 +
58 +- [Triangle](/docs/charts/tools/triangle)
59 +- [Trend line](/docs/charts/tools/trendline)
60 +- [Volume](/docs/charts/indicators/volume-ma)
61 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-hline.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'Horizontal line', description: 'A full-width line at one price — the classic support or resistance level.', image: '/charts/thumbs/tool-hline-dark-lg.png' }
2 +
3 +# Horizontal line
4 +
5 +<p className="lead">A full-width line at one price — the classic support or resistance level.</p>
6 +
7 +<ChartFigure kind="tool" id="hline" caption="Horizontal line placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="hline" aka={["Price level","Support / resistance line"]} category="Lines & channels" pane="1 point" shortcut="H" />
10 +
11 +## What it is
12 +
13 +The horizontal line marks a price across the whole chart, past and future. It is the standard notation for support and resistance, round numbers, prior closes or any price the market keeps reacting to. The right-click menu can also place one exactly at the pointer price.
14 +
15 +## What it is for
16 +
17 +Mark a horizontal level that matters regardless of when it was formed.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (H).
22 +2. 1 click at the price you want; the line spans the chart.
23 +3. Or right-click the chart and choose "Horizontal line at this price".
24 +4. Drag vertically to fine-tune; type a label in the properties bar.
25 +
26 +Keyboard: press <kbd>H</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- The more times a level has been touched and respected, the more it is watched — and the more violent its eventual break.
31 +- A level lives in a zone, not a pixel: think ±0.2 % or a fraction of ATR around the line.
32 +- Once broken, a support usually becomes a resistance (and vice versa): keep the line.
33 +- Round numbers and prior daily closes are levels even without a visible swing.
34 +
35 +## Example
36 +
37 +Three rejections at 150.00 over two months make the line; the fourth attempt closes at 151.20 on twice the average volume and the line becomes the new support.
38 +
39 +## Pairs well with
40 +
41 +- [Horizontal ray](/docs/charts/tools/hray) — A horizontal level from the click to the right edge — a level with a birth date.
42 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
43 +- [Pivot Points](/docs/charts/indicators/pivots) — Support and resistance levels for the current period computed from the previous H, L, C.
44 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
45 +
46 +## Pitfalls
47 +
48 +- A horizontal line hides the fact that levels drift: use a rectangle when the reaction zone is wide.
49 +- Drawing lines at every swing produces a barcode — keep the ones tested at least twice.
50 +
51 +## History
52 +
53 +Generic charting primitive; no single author.
54 +
55 +## See also
56 +
57 +- [Horizontal ray](/docs/charts/tools/hray)
58 +- [Rectangle](/docs/charts/tools/rect)
59 +- [Pivot Points](/docs/charts/indicators/pivots)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-hray.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Horizontal ray', description: 'A horizontal level from the click to the right edge — a level with a birth date.', image: '/charts/thumbs/tool-hray-dark-lg.png' }
2 +
3 +# Horizontal ray
4 +
5 +<p className="lead">A horizontal level from the click to the right edge — a level with a birth date.</p>
6 +
7 +<ChartFigure kind="tool" id="hray" caption="Horizontal ray placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="hray" aka={["Horizontal half-line","Level from here"]} category="Lines & channels" pane="1 point" />
10 +
11 +## What it is
12 +
13 +The horizontal ray marks a price from a specific bar onwards. Unlike the full horizontal line it does not claim the level mattered before that bar, which is exactly right for a breakout level, an untested gap or a swing high that has just formed.
14 +
15 +## What it is for
16 +
17 +Mark a level that only became relevant at a given bar, and follow it into the future.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Horizontal ray.
22 +2. 1 click at the bar and price where the level starts; the ray extends to the right edge.
23 +3. Drag the anchor to move it in time or price; add a text label in the properties bar.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- A ray from a breakout candle marks the retest zone: price returning to it and holding confirms the break.
30 +- Rays from unfilled gaps or single-print highs show what the market still owes.
31 +- Many rays converging on one price after different swings identify a cluster level.
32 +
33 +## Example
34 +
35 +The 3 March high at 182.40 becomes a ray; 12 sessions later price stalls at 182.35 — the level held without a full horizontal line cluttering the past.
36 +
37 +## Pairs well with
38 +
39 +- [Horizontal line](/docs/charts/tools/hline) — A full-width line at one price — the classic support or resistance level.
40 +- [Rectangle](/docs/charts/tools/rect) — A filled box between two corners — supply and demand zones, ranges, consolidations.
41 +- [Price label](/docs/charts/tools/price-label) — A tag showing the exact price at the click — labels a level or a fill without a line.
42 +- [Pivot Points](/docs/charts/indicators/pivots) — Support and resistance levels for the current period computed from the previous H, L, C.
43 +
44 +## Pitfalls
45 +
46 +- Placing the origin on the wrong bar makes the level look older or younger than it is — use magnet mode.
47 +- Horizontal rays on an indicator pane use the pane value, not the price.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Horizontal line](/docs/charts/tools/hline)
56 +- [Price label](/docs/charts/tools/price-label)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-long.mdx +61 −0
@@ -0,0 +1,61 @@
1 +export const meta = { title: 'Long position', description: 'Entry, target and stop of a long trade with the risk:reward — planned before the click.', image: '/charts/thumbs/tool-long-dark-lg.png' }
2 +
3 +# Long position
4 +
5 +<p className="lead">Entry, target and stop of a long trade with the risk:reward — planned before the click.</p>
6 +
7 +<ChartFigure kind="tool" id="long" caption="Long position placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="long" aka={["Long trade","Buy setup"]} category="Measure & positions" pane="3 points" shortcut="L" />
10 +
11 +## What it is
12 +
13 +The long position tool draws the anatomy of a buy: an entry line, a profit zone up to the target and a loss zone down to the stop, with the target and stop expressed in percent and points and the resulting risk:reward ratio. A quantity turns the zones into money amounts.
14 +
15 +## What it is for
16 +
17 +Plan and size a long trade on the chart, and see immediately whether the reward justifies the risk.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (L).
22 +2. 1 click at the entry price and bar; the engine creates the target (+2 %) and the stop (−1 %) 20 bars ahead.
23 +3. Drag the target handle up or down and the stop handle to the invalidation level; the R:R updates live.
24 +4. Set the quantity (style.qty) in the properties bar to see profit and loss in currency.
25 +
26 +Keyboard: press <kbd>L</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Put the stop where the idea is wrong (below the swing low), then check whether the target still gives at least 2:1.
31 +- Aim the target at a real level — a prior high, a Fib extension, a channel rail — not at a round R multiple.
32 +- If the R:R only works with a stop inside the noise (less than one ATR), the trade is too small for the setup.
33 +- Keep the box on the chart after the trade to review what actually happened.
34 +
35 +## Example
36 +
37 +Entry 121.15, stop 118.40 (−2.27 %), target 128.90 (+6.40 %): R:R 2.8 — with 100 shares the risk is 275 and the potential 775.
38 +
39 +## Pairs well with
40 +
41 +- [Short position](/docs/charts/tools/short) — Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.
42 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
43 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
44 +- [Price label](/docs/charts/tools/price-label) — A tag showing the exact price at the click — labels a level or a fill without a line.
45 +
46 +## Pitfalls
47 +
48 +- The default ±2 %/−1 % zones are placeholders — always move them to real levels before judging the R:R.
49 +- Slippage and fees are not included; a 1.5:1 setup on paper can be 1.2:1 in practice.
50 +- Percent and points are measured from the entry line, so moving the entry moves both.
51 +
52 +## History
53 +
54 +Position-sizing tools appeared with electronic charting platforms in the 2000s; the R-multiple framing comes from Van K. Tharp.
55 +
56 +## See also
57 +
58 +- [Short position](/docs/charts/tools/short)
59 +- [ATR](/docs/charts/indicators/atr)
60 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension)
61 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-measure.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Measure', description: 'Δ price, Δ %, bars and duration between two points — the chart\'s ruler.', image: '/charts/thumbs/tool-measure-dark-lg.png' }
2 +
3 +# Measure
4 +
5 +<p className="lead">Δ price, Δ %, bars and duration between two points — the chart's ruler.</p>
6 +
7 +<ChartFigure kind="tool" id="measure" caption="Measure placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="measure" aka={["Ruler","Price-time ruler"]} category="Measure & positions" pane="2 points" shortcut="M" />
10 +
11 +## What it is
12 +
13 +The measure tool stretches a box between two points and reports the difference in price and in percent, the number of bars and the elapsed time. It is the quickest way to size a move, a stop distance or a consolidation without leaving the chart.
14 +
15 +## What it is for
16 +
17 +Quantify a move or a distance in price, percent, bars and time.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (M).
22 +2. 2 clicks (or drag): click the start point, then the end point; the box shows Δ price, Δ %, bars and duration.
23 +3. Drag either corner to remeasure; delete it when done or keep it as a record.
24 +
25 +Keyboard: press <kbd>M</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Measure the last impulse and project the same distance from the pullback low: that is the simplest target method.
30 +- Measure the stop distance in percent, then size the position from it.
31 +- Compare the bars count of rallies and pullbacks: healthy trends rise for longer than they retrace.
32 +
33 +## Example
34 +
35 +From the 98.20 low to the 106.90 high: +8.70 (+8.86 %) in 14 bars, 3 weeks — projected from the 103.10 pullback the next target is 111.80.
36 +
37 +## Pairs well with
38 +
39 +- [Price range](/docs/charts/tools/price-range) — Δ price and Δ % between two prices — a vertical ruler with the time left out.
40 +- [Date range](/docs/charts/tools/date-range) — Bars and elapsed time between two dates — how long did it take?
41 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
42 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
43 +
44 +## Pitfalls
45 +
46 +- The bars count follows the indexed time axis: on intraday charts it excludes overnight gaps, on daily charts weekends.
47 +- Percent is computed from the first point; measuring top-down and bottom-up gives different percentages for the same move.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Price range](/docs/charts/tools/price-range)
56 +- [Date range](/docs/charts/tools/date-range)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-mschiff.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Modified Schiff pitchfork', description: 'Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.', image: '/charts/thumbs/tool-mschiff-dark-lg.png' }
2 +
3 +# Modified Schiff pitchfork
4 +
5 +<p className="lead">Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.</p>
6 +
7 +<ChartFigure kind="tool" id="mschiff" caption="Modified Schiff pitchfork placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="mschiff" aka={["Modified Schiff","Half-fork"]} category="Lines & channels" pane="3 points" />
10 +
11 +## What it is
12 +
13 +The modified Schiff pitchfork shifts the origin of the median line to the exact midpoint of the segment between pivots 1 and 2 — halfway in time as well as in price. It yields the flattest of the three forks and is the usual choice for slow, grinding trends and for large-scale weekly structures.
14 +
15 +## What it is for
16 +
17 +Fit a median-line channel to a shallow or long-running trend where the Andrews and Schiff forks are still too steep.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Modified Schiff pitchfork.
22 +2. 3 clicks: pivot 1 (origin), pivot 2, pivot 3, as for any pitchfork.
23 +3. The origin is placed at the midpoint of 1–2 (time and price); the median and tines are drawn from there through the midpoint of 2–3.
24 +4. Compare with the Andrews and Schiff forks on the same points before choosing.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- When price hugs the median of a modified Schiff fork, the trend is orderly but slow — expect small pullbacks.
31 +- A break of the lower tine in an up-fork usually ends the structure rather than offering a re-entry.
32 +- The flat slope makes the tines useful as long-lived support and resistance on higher timeframes.
33 +
34 +## Example
35 +
36 +Pivots at bar 0 / 100, bar 20 / 112 and bar 30 / 106: the origin moves to bar 10 / 106, giving a median line half as steep and starting later than the Andrews version.
37 +
38 +## Pairs well with
39 +
40 +- [Andrews pitchfork](/docs/charts/tools/pitchfork) — Median line from a pivot through the midpoint of the next swing, with two parallel tines.
41 +- [Schiff pitchfork](/docs/charts/tools/schiff) — Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.
42 +- [Regression trend](/docs/charts/tools/regression) — Least-squares line through the closes between two dates, with a ±2σ channel.
43 +
44 +## Pitfalls
45 +
46 +- Starting the fork ten bars later than the first pivot means the earliest part of the move is not framed at all.
47 +- On very short windows the three variants nearly coincide; the distinction only matters on longer swings.
48 +
49 +## History
50 +
51 +Variant of Jerome Schiff's fork developed by later median-line practitioners (1990s).
52 +
53 +## See also
54 +
55 +- [Andrews pitchfork](/docs/charts/tools/pitchfork)
56 +- [Schiff pitchfork](/docs/charts/tools/schiff)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-path.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Path', description: 'A connected series of straight segments — trace a wave count, a route or a scenario.', image: '/charts/thumbs/tool-path-dark-lg.png' }
2 +
3 +# Path
4 +
5 +<p className="lead">A connected series of straight segments — trace a wave count, a route or a scenario.</p>
6 +
7 +<ChartFigure kind="tool" id="path" caption="Path placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="path" aka={["Polyline","Multi-segment line"]} category="Shapes & annotations" pane="free-form" />
10 +
11 +## What it is
12 +
13 +The path joins any number of points with straight segments, one click per vertex. It is the free-form tool for sketching a projected scenario, connecting a sequence of pivots without the constraints of a pattern tool, or tracing the route price took through a busy area.
14 +
15 +## What it is for
16 +
17 +Sketch an expected path or connect a custom sequence of swing points.
18 +
19 +## How to draw it
20 +
21 +1. Open the Shapes flyout and pick Path.
22 +2. One click per vertex; the segment follows the pointer until the next click.
23 +3. Finish with a double-click, by clicking the last point again, or by pressing Enter.
24 +4. Drag any vertex afterwards to reshape; add a label in the properties bar.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Draw the scenario you expect into the empty space to the right, then let the market grade you.
31 +- Use it to trace alternative wave counts next to the formal Elliott tools.
32 +- Keep paths short: beyond eight or ten vertices the sketch becomes noise.
33 +
34 +## Example
35 +
36 +Four clicks from the 98 low through 104, back to 101 and up to 110 sketch the expected zigzag; the actual high two weeks later was 109.60.
37 +
38 +## Pairs well with
39 +
40 +- [Elliott impulse wave (12345)](/docs/charts/tools/elliott-impulse) — Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.
41 +- [Brush](/docs/charts/tools/brush) — Freehand drawing that follows the pointer — annotate like on paper.
42 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
43 +- [Arrow](/docs/charts/tools/arrow) — A line with an arrowhead — points from a cause to an effect, or marks a direction.
44 +
45 +## Pitfalls
46 +
47 +- Forgetting to finish the path (double-click / Enter) leaves the tool armed and the next click adds another point.
48 +- Vertices snap to bar centres and, in magnet mode, to O/H/L/C — turn magnet off for a free sketch.
49 +
50 +## History
51 +
52 +Generic charting primitive; no single author.
53 +
54 +## See also
55 +
56 +- [Brush](/docs/charts/tools/brush)
57 +- [ZigZag](/docs/charts/indicators/zigzag)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-pitchfork.mdx +61 −0
@@ -0,0 +1,61 @@
1 +export const meta = { title: 'Andrews pitchfork', description: 'Median line from a pivot through the midpoint of the next swing, with two parallel tines.', image: '/charts/thumbs/tool-pitchfork-dark-lg.png' }
2 +
3 +# Andrews pitchfork
4 +
5 +<p className="lead">Median line from a pivot through the midpoint of the next swing, with two parallel tines.</p>
6 +
7 +<ChartFigure kind="tool" id="pitchfork" caption="Andrews pitchfork placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="pitchfork" aka={["Median line","Andrews fork"]} category="Lines & channels" pane="3 points" shortcut="P" />
10 +
11 +## What it is
12 +
13 +The pitchfork starts at a pivot and draws a median line through the midpoint of the following swing, plus two parallel lines through the swing's extremes. Andrews observed that price tends to return to the median line about 80 % of the time, making the tines a dynamic channel with a built-in target.
14 +
15 +## What it is for
16 +
17 +Define the expected path of a new trend from its first three pivots and project a median-line target.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (P).
22 +2. 3 clicks: click the first pivot (the origin), then the next swing high, then the next swing low (or low then high in a downtrend).
23 +3. The median line runs from point 1 through the midpoint of 2–3; the tines pass through 2 and 3, parallel to it.
24 +4. Use magnet mode so each pivot snaps to a wick extreme.
25 +
26 +Keyboard: press <kbd>P</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Price should gravitate back to the median line; failure to reach it is a warning that the move is weaker than the fork suggests.
31 +- A close beyond a tine that is not quickly recovered often leads to a move of one tine-width.
32 +- The upper tine in an uptrend is a natural profit-taking zone; the lower tine a re-entry zone.
33 +- Draw a new fork every time three new pivots form — the most recent one is the one to trade.
34 +
35 +## Example
36 +
37 +Pivots at 100 (low), 112 (high) and 106 (low): the median line starts at 100 and heads through 109; the upper tine passes through 112, the lower through 106, each 3 points from the median.
38 +
39 +## Pairs well with
40 +
41 +- [Schiff pitchfork](/docs/charts/tools/schiff) — Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.
42 +- [Modified Schiff pitchfork](/docs/charts/tools/mschiff) — Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.
43 +- [Parallel channel](/docs/charts/tools/channel) — Two parallel lines around a trend — the path price is expected to travel inside.
44 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
45 +
46 +## Pitfalls
47 +
48 +- The fork is extremely sensitive to the choice of pivots: two traders with different points 1 draw very different forks.
49 +- In a fast market price can run along a tine without ever revisiting the median; do not force a fade.
50 +- A pitchfork whose median is steeper than 45° is rarely respected for long — try the Schiff variants.
51 +
52 +## History
53 +
54 +Alan Hall Andrews, 1960s, the "median line" method taught in his Action–Reaction course.
55 +
56 +## See also
57 +
58 +- [Schiff pitchfork](/docs/charts/tools/schiff)
59 +- [Modified Schiff pitchfork](/docs/charts/tools/mschiff)
60 +- [ZigZag](/docs/charts/indicators/zigzag)
61 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-price-label.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Price label', description: 'A tag showing the exact price at the click — labels a level or a fill without a line.', image: '/charts/thumbs/tool-price-label-dark-lg.png' }
2 +
3 +# Price label
4 +
5 +<p className="lead">A tag showing the exact price at the click — labels a level or a fill without a line.</p>
6 +
7 +<ChartFigure kind="tool" id="price-label" caption="Price label placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="price-label" aka={["Price tag","Price flag"]} category="Text & notes" pane="1 point" />
10 +
11 +## What it is
12 +
13 +The price label prints the price of its anchor point in a small tag, optionally with your own text. It records an exact number — a fill, a high, a level — on the chart without drawing a line across it, which keeps the picture clean.
14 +
15 +## What it is for
16 +
17 +Stamp an exact price on the chart: entries, exits, swing extremes, alert levels.
18 +
19 +## How to draw it
20 +
21 +1. Open the Text flyout and pick Price label.
22 +2. 1 click at the bar and price to tag; the label shows the price.
23 +3. Add a text prefix ("Entry", "Stop") in the properties bar or by double-clicking.
24 +4. Use magnet mode to land exactly on a high, a low or a close.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Tag swing highs and lows with labels and the chart becomes a readable list of the levels that matter.
31 +- Labelled fills make a journal: entry, stop and exit tags tell the whole trade.
32 +- Delete labels when the level breaks — stale tags are worse than none.
33 +
34 +## Example
35 +
36 +"Stop 118.40" tagged just under the 22 May low, next to "Entry 121.15" on the breakout bar — the risk per share is visible instantly.
37 +
38 +## Pairs well with
39 +
40 +- [Horizontal ray](/docs/charts/tools/hray) — A horizontal level from the click to the right edge — a level with a birth date.
41 +- [Text](/docs/charts/tools/text) — A text note anchored to a bar and a price — comment directly on the chart.
42 +- [Long position](/docs/charts/tools/long) — Entry, target and stop of a long trade with the risk:reward — planned before the click.
43 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
44 +
45 +## Pitfalls
46 +
47 +- The label shows the anchor price with the chart's decimals, so magnet mode matters for precision.
48 +- Many labels on nearby prices overlap; use a horizontal ray with a label instead.
49 +
50 +## History
51 +
52 +Generic charting primitive; no single author.
53 +
54 +## See also
55 +
56 +- [Horizontal ray](/docs/charts/tools/hray)
57 +- [Flag](/docs/charts/tools/flag)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-price-range.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Price range', description: 'Δ price and Δ % between two prices — a vertical ruler with the time left out.', image: '/charts/thumbs/tool-price-range-dark-lg.png' }
2 +
3 +# Price range
4 +
5 +<p className="lead">Δ price and Δ % between two prices — a vertical ruler with the time left out.</p>
6 +
7 +<ChartFigure kind="tool" id="price-range" caption="Price range placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="price-range" aka={["Vertical measure","Price distance"]} category="Measure & positions" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The price range measures the vertical distance between two points and prints the difference in price and percent. It ignores the horizontal component, so it is the clean way to state how big a move, a gap or a stop is, without the box of the full measure tool.
14 +
15 +## What it is for
16 +
17 +State the size of a move or a risk in price and percent.
18 +
19 +## How to draw it
20 +
21 +1. Open the Measure flyout and pick Price range.
22 +2. 2 clicks: click the first price, then the second; the vertical span and its labels appear.
23 +3. Drag either end to adjust; the label updates live.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Measure the height of a range or pattern, then use the same tool to project it from the breakout.
30 +- Compare the percent size of successive swings: shrinking swings mean a tightening market.
31 +- A price range from entry to stop is your risk unit (1R); targets are multiples of it.
32 +
33 +## Example
34 +
35 +From 121.15 to 118.40 the range reads −2.75 (−2.27 %): with a 1 % account risk that fixes the position size.
36 +
37 +## Pairs well with
38 +
39 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
40 +- [Date & price range](/docs/charts/tools/date-price-range) — A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.
41 +- [Long position](/docs/charts/tools/long) — Entry, target and stop of a long trade with the risk:reward — planned before the click.
42 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
43 +
44 +## Pitfalls
45 +
46 +- Percent is relative to the first click; be consistent about which point you click first.
47 +- On an indicator pane the tool measures pane values, not prices.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Measure](/docs/charts/tools/measure)
56 +- [Date & price range](/docs/charts/tools/date-price-range)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-ray.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Ray', description: 'A trend line that starts at point A and runs through B to the right edge — forever.', image: '/charts/thumbs/tool-ray-dark-lg.png' }
2 +
3 +# Ray
4 +
5 +<p className="lead">A trend line that starts at point A and runs through B to the right edge — forever.</p>
6 +
7 +<ChartFigure kind="tool" id="ray" caption="Ray placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="ray" aka={["Trend ray","Half-line"]} category="Lines & channels" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The ray is a trend line anchored at its first point and extended indefinitely through the second, so it keeps projecting a slope into bars that do not exist yet. It is the natural tool for a support or resistance that you expect price to meet again in the future.
14 +
15 +## What it is for
16 +
17 +Project a sloping level forward so future bars can be judged against it without redrawing.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Ray.
22 +2. 2 clicks: click the origin (point A), then a second point (B) that sets the direction; the line continues past B to the right.
23 +3. Drag B to change the slope; drag A to move the origin.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- A ray drawn from two lows is a dynamic support: each new touch that holds strengthens it.
30 +- When price accelerates away from the ray, draw a steeper one — trends often live on a "fan" of rays.
31 +- The break of the shallowest ray in a fan is the last warning before a trend change.
32 +
33 +## Example
34 +
35 +A ray through lows at 50.00 and 52.00 taken 20 bars apart rises 0.10 per bar: 30 bars later the support projects to 55.00.
36 +
37 +## Pairs well with
38 +
39 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
40 +- [Extended line](/docs/charts/tools/extended) — A line through two points extended in both directions across the whole chart.
41 +- [Horizontal ray](/docs/charts/tools/hray) — A horizontal level from the click to the right edge — a level with a birth date.
42 +- [Supertrend](/docs/charts/indicators/supertrend) — ATR-based trailing stop that flips colour with the trend — one line, long or short.
43 +
44 +## Pitfalls
45 +
46 +- A ray never "ends", so a stale ray from months ago can clutter today's view — delete or hide old ones.
47 +- Small errors on the anchors compound with distance: a ray projected 200 bars ahead is only approximate.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Trend line](/docs/charts/tools/trendline)
56 +- [Extended line](/docs/charts/tools/extended)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-rect.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Rectangle', description: 'A filled box between two corners — supply and demand zones, ranges, consolidations.', image: '/charts/thumbs/tool-rect-dark-lg.png' }
2 +
3 +# Rectangle
4 +
5 +<p className="lead">A filled box between two corners — supply and demand zones, ranges, consolidations.</p>
6 +
7 +<ChartFigure kind="tool" id="rect" caption="Rectangle placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="rect" aka={["Box","Zone"]} category="Shapes & annotations" pane="2 points" shortcut="R" />
10 +
11 +## What it is
12 +
13 +The rectangle marks an area rather than a line: a consolidation range, an order block, a gap or any zone where the market has reacted repeatedly. Because levels are really zones a few ticks deep, the rectangle is often more honest than a horizontal line.
14 +
15 +## What it is for
16 +
17 +Highlight a price zone or a consolidation so its edges can be watched for breakouts and retests.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (R).
22 +2. 2 clicks (or click-and-drag): click one corner, then the opposite corner.
23 +3. Set the fill opacity, colour and an optional text label in the properties bar.
24 +4. Extend the right edge into the future by dragging the right-hand handle.
25 +
26 +Keyboard: press <kbd>R</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- The longer price stays inside a box, the more energy the breakout releases: measure the box height and project it from the break.
31 +- A retest of the box edge from outside that holds confirms the breakout; a return inside cancels it.
32 +- Zones drawn around the last consolidation before an impulse (the "base") tend to be defended on the first return.
33 +
34 +## Example
35 +
36 +A three-week range from 48.50 to 51.00 (2.50 high) breaks upward at 51.20; the measured target is 53.50 and the retest of 51.00 is the entry.
37 +
38 +## Pairs well with
39 +
40 +- [Horizontal line](/docs/charts/tools/hline) — A full-width line at one price — the classic support or resistance level.
41 +- [Date & price range](/docs/charts/tools/date-price-range) — A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.
42 +- [Volume Profile (visible range)](/docs/charts/indicators/volume-profile) — Volume traded at each price level of the visible bars, with POC and value area.
43 +- [Donchian Channels](/docs/charts/indicators/donchian) — Highest high and lowest low of the last n bars: the breakout channel of trend followers.
44 +
45 +## Pitfalls
46 +
47 +- Boxes with 100 % opacity hide the candles inside them — keep the fill light.
48 +- Drawing the box on wicks versus bodies changes the edge by a few ticks; be consistent.
49 +
50 +## History
51 +
52 +Generic charting primitive; no single author.
53 +
54 +## See also
55 +
56 +- [Date & price range](/docs/charts/tools/date-price-range)
57 +- [Volume Profile](/docs/charts/indicators/volume-profile)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-regression.mdx +61 −0
@@ -0,0 +1,61 @@
1 +export const meta = { title: 'Regression trend', description: 'Least-squares line through the closes between two dates, with a ±2σ channel.', image: '/charts/thumbs/tool-regression-dark-lg.png' }
2 +
3 +# Regression trend
4 +
5 +<p className="lead">Least-squares line through the closes between two dates, with a ±2σ channel.</p>
6 +
7 +<ChartFigure kind="tool" id="regression" caption="Regression trend placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="regression" aka={["Linear regression channel","Raff channel"]} category="Lines & channels" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The regression trend fits a straight line to every close between its two anchors and draws parallel bands two standard deviations above and below it. It is the statistically honest channel: the slope is the average drift of the period and the bands hold roughly 95 % of the closes.
14 +
15 +## What it is for
16 +
17 +Measure the true slope of a move and judge whether the current price is stretched or cheap relative to it.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Regression trend.
22 +2. 2 clicks: click the first bar of the period, then the last; the line and the ±2σ channel are computed from the closes in between.
23 +3. Change the multiplier (style.mult, default 2) in the properties bar to tighten or widen the bands.
24 +4. Drag either anchor to re-fit the regression on a different window.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Price at the upper band is about two standard deviations above the trend: expensive relative to the period, not necessarily a sell.
31 +- A steep slope with narrow bands is a smooth, strong trend; a flat line with wide bands is a range.
32 +- When the newest closes pile up outside the channel, the regime has probably changed — re-anchor.
33 +- Extend the channel mentally, not literally: the fit is only valid inside the window that produced it.
34 +
35 +## Example
36 +
37 +Over 40 daily closes the regression rises 0.35 per day with σ = 1.8: the channel is ±3.6 wide, and a close 4.5 above the line is a genuine outlier.
38 +
39 +## Pairs well with
40 +
41 +- [Parallel channel](/docs/charts/tools/channel) — Two parallel lines around a trend — the path price is expected to travel inside.
42 +- [Linear Regression (LSMA + channel)](/docs/charts/indicators/lsma) — End point of the best-fit line over n bars, with a ±k·σ channel of the residuals.
43 +- [Bollinger Bands](/docs/charts/indicators/bollinger) — Moving average ± k standard deviations; the band width tracks volatility.
44 +- [Standard Deviation](/docs/charts/indicators/stddev) — Rolling standard deviation of price over n bars — raw dispersion in price units.
45 +
46 +## Pitfalls
47 +
48 +- The channel is only as good as the window: include a regime change and the slope is meaningless.
49 +- Standard deviation assumes symmetric noise; a trending market spends more time on one side of the line than the other.
50 +- The fit is recomputed from the closes on the chart; a different adjustment (split-only vs. total return) gives a different line.
51 +
52 +## History
53 +
54 +Ordinary least squares dates to Legendre and Gauss (c. 1805); the ±σ price channel form was popularised by Gilbert Raff in the 1990s.
55 +
56 +## See also
57 +
58 +- [Linear Regression (LSMA + channel)](/docs/charts/indicators/lsma)
59 +- [Parallel channel](/docs/charts/tools/channel)
60 +- [Standard Deviation](/docs/charts/indicators/stddev)
61 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-schiff.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Schiff pitchfork', description: 'Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.', image: '/charts/thumbs/tool-schiff-dark-lg.png' }
2 +
3 +# Schiff pitchfork
4 +
5 +<p className="lead">Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.</p>
6 +
7 +<ChartFigure kind="tool" id="schiff" caption="Schiff pitchfork placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="schiff" aka={["Schiff fork","Schiff median line"]} category="Lines & channels" pane="3 points" />
10 +
11 +## What it is
12 +
13 +The Schiff pitchfork uses the same three pivots as the Andrews fork but moves the origin of the median line up (or down) to the mid-price between points 1 and 2. The result is a shallower fork that fits corrective, less steep markets where the classic median line over-promises.
14 +
15 +## What it is for
16 +
17 +Frame a trend that is too gentle for a standard pitchfork, especially after a sharp initial impulse.
18 +
19 +## How to draw it
20 +
21 +1. Open the Lines flyout and pick Schiff pitchfork.
22 +2. 3 clicks: click pivot 1 (origin), pivot 2 and pivot 3, exactly as for the Andrews fork.
23 +3. The engine shifts the origin to the price midpoint of 1–2 (same bar as point 1) and draws the median and tines from there.
24 +4. Toggle between Andrews, Schiff and modified Schiff on the same pivots to see which one price has respected.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Use it when the Andrews median is being ignored because it is too steep.
31 +- The tines still hold the "one tine-width" rule after a break.
32 +- If neither the Andrews nor the Schiff median attracts price, the three pivots are probably not the right ones.
33 +
34 +## Example
35 +
36 +With pivots at 100, 112 and 106, the Schiff origin becomes 106 on the bar of point 1, so the median slope is roughly half that of the Andrews fork drawn on the same points.
37 +
38 +## Pairs well with
39 +
40 +- [Andrews pitchfork](/docs/charts/tools/pitchfork) — Median line from a pivot through the midpoint of the next swing, with two parallel tines.
41 +- [Modified Schiff pitchfork](/docs/charts/tools/mschiff) — Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.
42 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
43 +
44 +## Pitfalls
45 +
46 +- Choosing between the three fork variants after the fact is curve-fitting; decide the variant from the character of the market first.
47 +- The shifted origin sits in empty space — the fork no longer passes through a real pivot.
48 +
49 +## History
50 +
51 +Jerome Schiff, a student of Alan Andrews, 1980s; the modified version came later from Andrews' followers.
52 +
53 +## See also
54 +
55 +- [Andrews pitchfork](/docs/charts/tools/pitchfork)
56 +- [Modified Schiff pitchfork](/docs/charts/tools/mschiff)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-short.mdx +59 −0
@@ -0,0 +1,59 @@
1 +export const meta = { title: 'Short position', description: 'Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.', image: '/charts/thumbs/tool-short-dark-lg.png' }
2 +
3 +# Short position
4 +
5 +<p className="lead">Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.</p>
6 +
7 +<ChartFigure kind="tool" id="short" caption="Short position placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="short" aka={["Short trade","Sell setup"]} category="Measure & positions" pane="3 points" shortcut="S" />
10 +
11 +## What it is
12 +
13 +The short position tool draws a sell setup: an entry line, a profit zone down to the target and a loss zone up to the stop, with both distances in percent and points and the risk:reward ratio. With a quantity set, the zones show the money at stake.
14 +
15 +## What it is for
16 +
17 +Plan and size a short trade and check its reward against its risk before entering.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (S).
22 +2. 1 click at the entry price and bar; the engine creates the target (−2 %) and the stop (+1 %) 20 bars ahead.
23 +3. Drag the target handle down to the objective and the stop handle above the invalidation level; the R:R updates live.
24 +4. Set the quantity (style.qty) in the properties bar for amounts in currency.
25 +
26 +Keyboard: press <kbd>S</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Place the stop above the swing high that would prove the short wrong, not at a fixed percent.
31 +- Shorts often run faster than longs — a tight target leaves money on the table; trail instead.
32 +- Check the R:R after placing the stop; below 1.5:1 the setup rarely pays for its losers.
33 +
34 +## Example
35 +
36 +Entry 128.40, stop 130.10 (+1.32 %), target 121.20 (−5.61 %): R:R 4.2 — the failed-breakout short is worth taking even with a 50 % hit rate.
37 +
38 +## Pairs well with
39 +
40 +- [Long position](/docs/charts/tools/long) — Entry, target and stop of a long trade with the risk:reward — planned before the click.
41 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
42 +- [Average True Range](/docs/charts/indicators/atr) — Typical bar-to-bar movement in price units — the standard yardstick for stops and size.
43 +- [Price label](/docs/charts/tools/price-label) — A tag showing the exact price at the click — labels a level or a fill without a line.
44 +
45 +## Pitfalls
46 +
47 +- The default zones are placeholders; drag them to real levels before reading the ratio.
48 +- Borrow costs, dividends and short-squeeze gaps are not modelled.
49 +- Moving the entry line moves both zones with it.
50 +
51 +## History
52 +
53 +Position-sizing tools appeared with electronic charting platforms in the 2000s; the R-multiple framing comes from Van K. Tharp.
54 +
55 +## See also
56 +
57 +- [Long position](/docs/charts/tools/long)
58 +- [ATR](/docs/charts/indicators/atr)
59 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-text.mdx +58 −0
@@ -0,0 +1,58 @@
1 +export const meta = { title: 'Text', description: 'A text note anchored to a bar and a price — comment directly on the chart.', image: '/charts/thumbs/tool-text-dark-lg.png' }
2 +
3 +# Text
4 +
5 +<p className="lead">A text note anchored to a bar and a price — comment directly on the chart.</p>
6 +
7 +<ChartFigure kind="tool" id="text" caption="Text placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="text" aka={["Note","Label"]} category="Text & notes" pane="1 point" shortcut="X" />
10 +
11 +## What it is
12 +
13 +The text tool places a free note at a point of the chart. The note is anchored in price and time, so it stays with the bar it describes when you scroll or zoom, and it is saved with the other drawings of the symbol and timeframe. Double-clicking it reopens the editor.
14 +
15 +## What it is for
16 +
17 +Write a comment, a thesis or a reminder next to the bars it refers to.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (X).
22 +2. 1 click where the text should be anchored; an inline editor opens.
23 +3. Type the note, press Enter to confirm or Escape to cancel.
24 +4. Double-click the text later to edit it; change size and colour in the properties bar.
25 +
26 +Keyboard: press <kbd>X</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Date your theses ("7 Sep: expecting a retest of 150") so they can be graded honestly later.
31 +- Put the note above the high or below the low so it does not cover candles.
32 +- One sentence per note; long paragraphs belong in a callout.
33 +
34 +## Example
35 +
36 +Anchored above the 1 August high: "Failed breakout on half the volume — short below 128.40, stop 130.10".
37 +
38 +## Pairs well with
39 +
40 +- [Callout](/docs/charts/tools/callout) — A text box with a pointer to the bar it explains — annotation that stays out of the way.
41 +- [Arrow](/docs/charts/tools/arrow) — A line with an arrowhead — points from a cause to an effect, or marks a direction.
42 +- [Horizontal line](/docs/charts/tools/hline) — A full-width line at one price — the classic support or resistance level.
43 +- [Flag](/docs/charts/tools/flag) — A small flag pinned to a bar — bookmark an event or a signal.
44 +
45 +## Pitfalls
46 +
47 +- Text scales with nothing: at a distant zoom several notes overlap and cover the price action.
48 +- A note anchored to a price on the main pane moves with the price axis; anchor it in empty space above or below the bars.
49 +
50 +## History
51 +
52 +Generic charting primitive; no single author.
53 +
54 +## See also
55 +
56 +- [Callout](/docs/charts/tools/callout)
57 +- [Price label](/docs/charts/tools/price-label)
58 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-trendline.mdx +61 −0
@@ -0,0 +1,61 @@
1 +export const meta = { title: 'Trend line', description: 'A segment between two points — the simplest way to mark a trend or a sloping level.', image: '/charts/thumbs/tool-trendline-dark-lg.png' }
2 +
3 +# Trend line
4 +
5 +<p className="lead">A segment between two points — the simplest way to mark a trend or a sloping level.</p>
6 +
7 +<ChartFigure kind="tool" id="trendline" caption="Trend line placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="trendline" aka={["Trendline","Line segment"]} category="Lines & channels" pane="2 points" shortcut="T" />
10 +
11 +## What it is
12 +
13 +The trend line joins two swing points and stops at them. Drawn under rising lows it defines the slope of an uptrend and the price a pullback must hold; drawn over falling highs it caps a downtrend. It is the workhorse of every discretionary chart.
14 +
15 +## What it is for
16 +
17 +Mark the slope of a move, a sloping support or resistance, or a neckline between two reference points.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (T).
22 +2. 2 clicks: click point A (the first swing), then point B (the second swing) — or click-and-drag from A to B.
23 +3. Turn on magnet mode so each anchor snaps to the wick high or low.
24 +4. Select the line to extend it left or right, change colour, width or dash in the properties bar.
25 +
26 +Keyboard: press <kbd>T</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Two touches draw the line; a third touch validates it — before that it is a hypothesis.
31 +- The steeper the line, the sooner it breaks: a 60° line rarely holds, a 30° one often does.
32 +- A close beyond the line with volume is a break; a wick through it is a test.
33 +- After a break, the old line often acts as the opposite kind of level (support becomes resistance).
34 +
35 +## Example
36 +
37 +Lows at 95.00 and 98.50 fifteen bars apart give a slope of about 0.23 per bar; projected 10 bars ahead the support sits near 100.80.
38 +
39 +## Pairs well with
40 +
41 +- [Ray](/docs/charts/tools/ray) — A trend line that starts at point A and runs through B to the right edge — forever.
42 +- [Parallel channel](/docs/charts/tools/channel) — Two parallel lines around a trend — the path price is expected to travel inside.
43 +- [Horizontal line](/docs/charts/tools/hline) — A full-width line at one price — the classic support or resistance level.
44 +- [Exponential Moving Average](/docs/charts/indicators/ema) — Recency-weighted average that reacts faster than the SMA with less drop-off jitter.
45 +
46 +## Pitfalls
47 +
48 +- Forcing a line through bodies and wicks alternately to make it "fit" produces a level nobody else sees.
49 +- Trend lines on a log scale and on a linear scale diverge over long histories — pick the scale before drawing.
50 +- A segment stops at B: use a ray when you want the line to project into the future.
51 +
52 +## History
53 +
54 +Generic charting primitive; no single author.
55 +
56 +## See also
57 +
58 +- [Ray](/docs/charts/tools/ray)
59 +- [Parallel channel](/docs/charts/tools/channel)
60 +- [Charting guide](/docs/charts)
61 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-triangle.mdx +59 −0
@@ -0,0 +1,59 @@
1 +export const meta = { title: 'Triangle', description: 'A three-point polygon — outlines triangles, wedges and pennants explicitly.', image: '/charts/thumbs/tool-triangle-dark-lg.png' }
2 +
3 +# Triangle
4 +
5 +<p className="lead">A three-point polygon — outlines triangles, wedges and pennants explicitly.</p>
6 +
7 +<ChartFigure kind="tool" id="triangle" caption="Triangle placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="triangle" aka={["Wedge","Pennant shape"]} category="Shapes & annotations" pane="3 points" />
10 +
11 +## What it is
12 +
13 +The triangle tool draws a closed polygon through three points, which is exactly the shape of the classic consolidation patterns: symmetrical, ascending and descending triangles, wedges and pennants. Drawing the figure itself makes the apex — and the deadline it implies — visible.
14 +
15 +## What it is for
16 +
17 +Outline a converging pattern and show where its two sides meet in time.
18 +
19 +## How to draw it
20 +
21 +1. Open the Shapes flyout and pick Triangle.
22 +2. 3 clicks: click the first vertex, the second and the third; the polygon closes automatically.
23 +3. Typical use: the first swing high, the first swing low, then the apex where the two converging lines meet.
24 +4. Set a fill to shade the pattern; drag a vertex to adjust.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Breakouts usually happen between one half and three quarters of the way to the apex; a break at the apex itself is weak.
31 +- The measured target is the height of the pattern at its widest point, projected from the breakout.
32 +- Volume typically dries up inside the triangle and expands on the break.
33 +
34 +## Example
35 +
36 +A symmetrical triangle 8 points tall at its base breaks up at 66 after covering 60 % of the distance to the apex: the measured target is 74.
37 +
38 +## Pairs well with
39 +
40 +- [Trend line](/docs/charts/tools/trendline) — A segment between two points — the simplest way to mark a trend or a sloping level.
41 +- [Measure](/docs/charts/tools/measure) — Δ price, Δ %, bars and duration between two points — the chart's ruler.
42 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
43 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width) — Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.
44 +
45 +## Pitfalls
46 +
47 +- A triangle drawn to fit only two touches on each side is guesswork; wait for at least two clear swings per side.
48 +- Triangles and wedges have different implications: a rising wedge in an uptrend is bearish — the tool draws both the same way.
49 +
50 +## History
51 +
52 +Chart patterns catalogued by Richard Schabacker (1932) and Edwards & Magee (1948).
53 +
54 +## See also
55 +
56 +- [Trend line](/docs/charts/tools/trendline)
57 +- [Head & shoulders](/docs/charts/tools/head-shoulders)
58 +- [Bollinger Bandwidth](/docs/charts/indicators/bb-width)
59 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-vline.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Vertical line', description: 'A full-height line at one bar — marks an event, a session open or a cycle date.', image: '/charts/thumbs/tool-vline-dark-lg.png' }
2 +
3 +# Vertical line
4 +
5 +<p className="lead">A full-height line at one bar — marks an event, a session open or a cycle date.</p>
6 +
7 +<ChartFigure kind="tool" id="vline" caption="Vertical line placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="vline" aka={["Time marker","Event line"]} category="Lines & channels" pane="1 point" shortcut="V" />
10 +
11 +## What it is
12 +
13 +The vertical line marks a moment in time across every pane: an earnings release, a Fed decision, a session open or the bar where a pattern started. It is the simplest way to align price, volume and oscillator behaviour on the same instant.
14 +
15 +## What it is for
16 +
17 +Anchor an event or a date so its effect can be read across price and indicator panes at once.
18 +
19 +## How to draw it
20 +
21 +1. Activate the tool (V).
22 +2. 1 click on the bar to mark; the line spans every pane.
23 +3. Drag horizontally to move it to another bar; the line always snaps to a bar centre.
24 +
25 +Keyboard: press <kbd>V</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Compare the bars before and after the line: a volume spike with a range expansion confirms the event mattered.
30 +- Regularly spaced vertical lines expose cycles — count the bars between major lows.
31 +- Combine with a horizontal line to see the price the market held at that instant (or use the cross tool).
32 +
33 +## Example
34 +
35 +A vertical line at the 10:00 ET economic release shows the 1-minute bar that opened the day's 1.4 % range; every pullback afterwards stayed above that bar's low.
36 +
37 +## Pairs well with
38 +
39 +- [Cross line](/docs/charts/tools/cross) — A horizontal and a vertical line through one point — pins a price and a moment together.
40 +- [Vertical range](/docs/charts/tools/vrange) — A shaded band between two bars — highlights a session, an event window or a phase.
41 +- [Date range](/docs/charts/tools/date-range) — Bars and elapsed time between two dates — how long did it take?
42 +- [Volume](/docs/charts/indicators/volume-ma) — Volume histogram coloured by bar direction with its moving average in its own pane.
43 +
44 +## Pitfalls
45 +
46 +- The time axis is indexed by bar, so a line placed on a daily chart lands on a session, not a calendar day; on intraday charts session gaps are compressed.
47 +- Vertical lines drawn on one timeframe reappear on others at the nearest bar, which may look shifted.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Cross line](/docs/charts/tools/cross)
56 +- [Vertical range](/docs/charts/tools/vrange)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-vrange.mdx +57 −0
@@ -0,0 +1,57 @@
1 +export const meta = { title: 'Vertical range', description: 'A shaded band between two bars — highlights a session, an event window or a phase.', image: '/charts/thumbs/tool-vrange-dark-lg.png' }
2 +
3 +# Vertical range
4 +
5 +<p className="lead">A shaded band between two bars — highlights a session, an event window or a phase.</p>
6 +
7 +<ChartFigure kind="tool" id="vrange" caption="Vertical range placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="vrange" aka={["Time band","Session highlight"]} category="Measure & positions" pane="2 points" />
10 +
11 +## What it is
12 +
13 +The vertical range shades the full height of the chart between two bars and can carry a label. It marks a period rather than an instant: an earnings week, a central-bank window, a consolidation phase, a holiday session. It reads across every pane at once.
14 +
15 +## What it is for
16 +
17 +Highlight a period of time so its behaviour can be compared with what came before and after.
18 +
19 +## How to draw it
20 +
21 +1. Open the Measure flyout and pick Vertical range.
22 +2. 2 clicks: click the first bar, then the last bar of the period; the band fills the chart height.
23 +3. Type a label ("FOMC", "Earnings week") and set the fill opacity in the properties bar.
24 +
25 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
26 +
27 +## Reading tips
28 +
29 +- Shade every FOMC day and the average reaction becomes visible after a few months.
30 +- Use a band for the accumulation phase before a breakout; the band width is the coil time.
31 +- Bands survive zooming better than vertical lines because they keep their area.
32 +
33 +## Example
34 +
35 +A grey band labelled "FOMC" over the 17–18 June bars shows the 2.3 % range of the announcement and the drift that followed.
36 +
37 +## Pairs well with
38 +
39 +- [Vertical line](/docs/charts/tools/vline) — A full-height line at one bar — marks an event, a session open or a cycle date.
40 +- [Date range](/docs/charts/tools/date-range) — Bars and elapsed time between two dates — how long did it take?
41 +- [Flag](/docs/charts/tools/flag) — A small flag pinned to a bar — bookmark an event or a signal.
42 +- [Historical Volatility](/docs/charts/indicators/hv) — Annualised standard deviation of log returns, in % — the volatility options are priced on.
43 +
44 +## Pitfalls
45 +
46 +- A band across a whole chart hides candles if the fill is too strong — keep it under 20 %.
47 +- The band edges snap to bar centres, so a period spanning a session gap looks continuous.
48 +
49 +## History
50 +
51 +Generic charting primitive; no single author.
52 +
53 +## See also
54 +
55 +- [Vertical line](/docs/charts/tools/vline)
56 +- [Date range](/docs/charts/tools/date-range)
57 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tool-xabcd.mdx +60 −0
@@ -0,0 +1,60 @@
1 +export const meta = { title: 'XABCD pattern', description: 'Five-point harmonic pattern with the AB/XA, BC/AB, CD/BC and AD/XA ratios printed live.', image: '/charts/thumbs/tool-xabcd-dark-lg.png' }
2 +
3 +# XABCD pattern
4 +
5 +<p className="lead">Five-point harmonic pattern with the AB/XA, BC/AB, CD/BC and AD/XA ratios printed live.</p>
6 +
7 +<ChartFigure kind="tool" id="xabcd" caption="XABCD pattern placed on a daily chart — rendered by the HF Market Data charting engine." />
8 +
9 +<CatalogMeta kind="tool" id="xabcd" aka={["Harmonic pattern","Gartley","Bat / Butterfly / Crab"]} category="Patterns" pane="5 points" />
10 +
11 +## What it is
12 +
13 +The XABCD tool connects five pivots and displays the Fibonacci ratios that define harmonic patterns: AB/XA, BC/AB, CD/BC and AD/XA. Each named pattern — Gartley, Bat, Butterfly, Crab — is a specific combination of these ratios, and point D is the potential reversal zone where the trade is taken.
14 +
15 +## What it is for
16 +
17 +Identify and validate a harmonic pattern from its ratios and locate the D-point reversal zone.
18 +
19 +## How to draw it
20 +
21 +1. Open the Patterns flyout and pick XABCD pattern.
22 +2. 5 clicks: click X, A, B, C and D in order; the ratios are printed on the legs.
23 +3. Use magnet mode for exact pivots; the ratios are sensitive to a few ticks.
24 +4. Draw with D projected (the expected reversal zone) and adjust it when price arrives.
25 +
26 +Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
27 +
28 +## Reading tips
29 +
30 +- Gartley: B ≈ 0.618 XA, D ≈ 0.786 XA. Bat: B 0.382–0.5, D ≈ 0.886. Butterfly: B 0.786, D 1.27–1.618. Crab: D ≈ 1.618 XA.
31 +- The D zone is only a candidate; wait for a reversal bar or an oscillator turn before acting.
32 +- The stop belongs just beyond X (for Gartley/Bat) or beyond the 1.618 extension (Butterfly/Crab).
33 +- Targets are the 0.382 and 0.618 retracements of the whole AD leg.
34 +
35 +## Example
36 +
37 +X 100, A 120, B 107.6 (AB/XA 0.62), C 115.3 (BC/AB 0.62), D 104.3 (AD/XA 0.785): a bullish Gartley — long near 104.3 with a stop under 100.
38 +
39 +## Pairs well with
40 +
41 +- [Fibonacci retracement](/docs/charts/tools/fib) — Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.
42 +- [Trend-based Fib extension](/docs/charts/tools/fib-extension) — Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.
43 +- [Relative Strength Index](/docs/charts/indicators/rsi) — Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.
44 +- [ZigZag](/docs/charts/indicators/zigzag) — Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.
45 +
46 +## Pitfalls
47 +
48 +- Ratios that are "close enough" to a pattern are usually not the pattern — harmonic traders use tight tolerances.
49 +- Five free pivots can be made to fit almost any ratio; start from the swings, not from the desired pattern.
50 +- Harmonic patterns describe potential reversal zones, not guaranteed reversals.
51 +
52 +## History
53 +
54 +H. M. Gartley, 1935, Profits in the Stock Market; ratio-based patterns formalised by Scott Carney in the 1990s.
55 +
56 +## See also
57 +
58 +- [Fibonacci retracement](/docs/charts/tools/fib)
59 +- [ZigZag](/docs/charts/indicators/zigzag)
60 +- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)
added hfmarketdata/web/content/guides/charts-tools.mdx +31 −0
@@ -0,0 +1,31 @@
1 +export const meta = { title: 'Drawing tools encyclopedia', description: 'The 42 drawing tools of the HF Market Data charts explained and illustrated: what each one is for, how to draw it click by click, how to read it, worked examples, pitfalls and history.' }
2 +
3 +# Drawing tools encyclopedia
4 +
5 +<p className="lead">42 drawing tools — lines and channels, Fibonacci and Gann, shapes, notes, measurements, positions and patterns — each with its purpose, the exact click sequence, reading tips, a worked example and the traps to avoid, illustrated by our own engine on the same daily chart.</p>
6 +
7 +The tools live in the vertical bar on the left of the [charts](/charts): each group button remembers the tool you used last, the chevron (or a right-click, or a long press) opens the full group. Hovering a tool shows the same illustration and steps as here. See also the [indicators](/docs/charts/indicators) and the [charting guide](/docs/charts).
8 +
9 +## Lines & channels
10 +
11 +<CatalogGrid kind="tool" items={[{"id":"trendline","name":"Trend line","oneLiner":"A segment between two points — the simplest way to mark a trend or a sloping level.","shortcut":"T"},{"id":"ray","name":"Ray","oneLiner":"A trend line that starts at point A and runs through B to the right edge — forever.","shortcut":null},{"id":"extended","name":"Extended line","oneLiner":"A line through two points extended in both directions across the whole chart.","shortcut":null},{"id":"hray","name":"Horizontal ray","oneLiner":"A horizontal level from the click to the right edge — a level with a birth date.","shortcut":null},{"id":"hline","name":"Horizontal line","oneLiner":"A full-width line at one price — the classic support or resistance level.","shortcut":"H"},{"id":"vline","name":"Vertical line","oneLiner":"A full-height line at one bar — marks an event, a session open or a cycle date.","shortcut":"V"},{"id":"cross","name":"Cross line","oneLiner":"A horizontal and a vertical line through one point — pins a price and a moment together.","shortcut":"C"},{"id":"channel","name":"Parallel channel","oneLiner":"Two parallel lines around a trend — the path price is expected to travel inside.","shortcut":null},{"id":"regression","name":"Regression trend","oneLiner":"Least-squares line through the closes between two dates, with a ±2σ channel.","shortcut":null},{"id":"pitchfork","name":"Andrews pitchfork","oneLiner":"Median line from a pivot through the midpoint of the next swing, with two parallel tines.","shortcut":"P"},{"id":"schiff","name":"Schiff pitchfork","oneLiner":"Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.","shortcut":null},{"id":"mschiff","name":"Modified Schiff pitchfork","oneLiner":"Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.","shortcut":null}]} />
12 +
13 +## Fibonacci & Gann
14 +
15 +<CatalogGrid kind="tool" items={[{"id":"fib","name":"Fibonacci retracement","oneLiner":"Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.","shortcut":"F"},{"id":"fib-extension","name":"Trend-based Fib extension","oneLiner":"Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.","shortcut":null},{"id":"fib-timezones","name":"Fibonacci time zones","oneLiner":"Vertical lines 1, 2, 3, 5, 8, 13… bars apart — dates where turning points may cluster.","shortcut":null},{"id":"fib-fan","name":"Fibonacci speed/resistance fan","oneLiner":"Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.","shortcut":null},{"id":"fib-arcs","name":"Fibonacci arcs","oneLiner":"Arcs at 38.2–100 % of a swing, centred on its end — support that curves with time.","shortcut":null},{"id":"gann-fan","name":"Gann fan","oneLiner":"Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend's balance.","shortcut":"G"},{"id":"gann-box","name":"Gann box","oneLiner":"A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.","shortcut":null}]} />
16 +
17 +## Shapes & annotations
18 +
19 +<CatalogGrid kind="tool" items={[{"id":"rect","name":"Rectangle","oneLiner":"A filled box between two corners — supply and demand zones, ranges, consolidations.","shortcut":"R"},{"id":"ellipse","name":"Ellipse","oneLiner":"An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.","shortcut":"E"},{"id":"triangle","name":"Triangle","oneLiner":"A three-point polygon — outlines triangles, wedges and pennants explicitly.","shortcut":null},{"id":"path","name":"Path","oneLiner":"A connected series of straight segments — trace a wave count, a route or a scenario.","shortcut":null},{"id":"brush","name":"Brush","oneLiner":"Freehand drawing that follows the pointer — annotate like on paper.","shortcut":"B"},{"id":"arrow","name":"Arrow","oneLiner":"A line with an arrowhead — points from a cause to an effect, or marks a direction.","shortcut":"A"},{"id":"arrow-up","name":"Arrow up marker","oneLiner":"A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.","shortcut":null},{"id":"arrow-down","name":"Arrow down marker","oneLiner":"A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.","shortcut":null}]} />
20 +
21 +## Text & notes
22 +
23 +<CatalogGrid kind="tool" items={[{"id":"text","name":"Text","oneLiner":"A text note anchored to a bar and a price — comment directly on the chart.","shortcut":"X"},{"id":"callout","name":"Callout","oneLiner":"A text box with a pointer to the bar it explains — annotation that stays out of the way.","shortcut":null},{"id":"price-label","name":"Price label","oneLiner":"A tag showing the exact price at the click — labels a level or a fill without a line.","shortcut":null},{"id":"flag","name":"Flag","oneLiner":"A small flag pinned to a bar — bookmark an event or a signal.","shortcut":null}]} />
24 +
25 +## Measure & positions
26 +
27 +<CatalogGrid kind="tool" items={[{"id":"measure","name":"Measure","oneLiner":"Δ price, Δ %, bars and duration between two points — the chart's ruler.","shortcut":"M"},{"id":"price-range","name":"Price range","oneLiner":"Δ price and Δ % between two prices — a vertical ruler with the time left out.","shortcut":null},{"id":"date-range","name":"Date range","oneLiner":"Bars and elapsed time between two dates — how long did it take?","shortcut":null},{"id":"date-price-range","name":"Date & price range","oneLiner":"A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.","shortcut":null},{"id":"vrange","name":"Vertical range","oneLiner":"A shaded band between two bars — highlights a session, an event window or a phase.","shortcut":null},{"id":"long","name":"Long position","oneLiner":"Entry, target and stop of a long trade with the risk:reward — planned before the click.","shortcut":"L"},{"id":"short","name":"Short position","oneLiner":"Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.","shortcut":"S"}]} />
28 +
29 +## Patterns
30 +
31 +<CatalogGrid kind="tool" items={[{"id":"elliott-impulse","name":"Elliott impulse wave (12345)","oneLiner":"Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.","shortcut":null},{"id":"elliott-correction","name":"Elliott correction wave (ABC)","oneLiner":"Labels a three-wave correction 0-A-B-C — the pause between two impulses.","shortcut":null},{"id":"xabcd","name":"XABCD pattern","oneLiner":"Five-point harmonic pattern with the AB/XA, BC/AB, CD/BC and AD/XA ratios printed live.","shortcut":null},{"id":"head-shoulders","name":"Head & shoulders","oneLiner":"Seven-point reversal pattern: neckline through the two troughs, measured-move target.","shortcut":null}]} />
added hfmarketdata/web/scripts/charts-docs.mjs +213 −0
@@ -0,0 +1,213 @@
1 +#!/usr/bin/env node
2 +// Generates the charts encyclopedia pages of the docs from the catalogue (src/charts/catalog — single source of truth):
3 +// content/guides/charts-indicators.mdx index by category, thumbnails → /docs/charts/indicators
4 +// content/guides/charts-ind-<id>.mdx one sheet per indicator (60) → /docs/charts/indicators/<id>
5 +// content/guides/charts-tools.mdx index by group → /docs/charts/tools
6 +// content/guides/charts-tool-<id>.mdx one sheet per drawing tool (42) → /docs/charts/tools/<id>
7 +// src/docs/guides.charts.js the GUIDES entries (literal objects: scripts/prerender.mjs parses them)
8 +// Idempotent; run with `npm run charts:docs` after editing the catalogue (the output is committed so `vite dev` needs nothing).
9 +
10 +import { mkdirSync, readdirSync, unlinkSync, writeFileSync } from 'node:fs'
11 +import { dirname, join, resolve } from 'node:path'
12 +import { fileURLToPath } from 'node:url'
13 +import indicators, { INDICATOR_ENTRIES } from '../src/charts/catalog/indicators/all.js'
14 +import tools, { TOOL_ENTRIES } from '../src/charts/catalog/tools.js'
15 +import { INDICATOR_CATEGORY_LABELS, INDICATOR_CATEGORY_ORDER, TOOL_GROUP_LABELS, TOOL_GROUP_ORDER, thumbUrl } from '../src/charts/catalog/index.js'
16 +import { REGISTRY } from '../src/charts/indicators/index.js'
17 +
18 +const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..')
19 +const GUIDES_DIR = join(ROOT, 'content', 'guides')
20 +mkdirSync(GUIDES_DIR, { recursive: true })
21 +
22 +/* ─── escaping ─── */
23 +// Prose inside MDX: braces and angle brackets are JSX syntax; keep everything else literal.
24 +const md = s => String(s).replace(/\\/g, '\\\\').replace(/[{}]/g, m => `\\${m}`).replace(/</g, '&lt;').replace(/>/g, '&gt;')
25 +const cell = s => md(s).replace(/\|/g, '\\|').replace(/\n/g, ' ')
26 +const js = s => `'${String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, ' ')}'`
27 +const fence = s => `\`\`\`text\n${String(s).replace(/```/g, "'''")}\n\`\`\``
28 +const fmtVal = v => (v == null ? '—' : Array.isArray(v) ? v.join(', ') : typeof v === 'object' ? JSON.stringify(v) : String(v))
29 +
30 +const indName = id => indicators[id]?.name || id
31 +const toolName = id => tools[id]?.name || id
32 +const link = (kind, id) => `[${md(kind === 'tool' ? toolName(id) : indName(id))}](/docs/charts/${kind === 'tool' ? 'tools' : 'indicators'}/${id})`
33 +const pairLink = id => (tools[id] ? link('tool', id) : link('indicator', id))
34 +const list = items => items.map(s => `- ${md(s)}`).join('\n')
35 +
36 +/* ─── one indicator sheet ─── */
37 +function indicatorPage(e) {
38 + const spec = REGISTRY[e.id]
39 + const title = e.aka?.[0] && e.aka[0] !== e.name ? `${e.aka[0]} — ${e.name}` : e.name
40 + const paramsLabel = spec ? spec.title(spec.defaults) : e.name
41 + const rows = e.defaults.map(([name, value, why]) => `| \`${name}\` | \`${cell(fmtVal(value))}\` | ${cell(why)} |`).join('\n')
42 + return `export const meta = { title: ${js(title)}, description: ${js(e.oneLiner)}, image: ${js(thumbUrl('indicator', e.id, 'dark', 'lg'))} }
43 +
44 +# ${md(e.name)}
45 +
46 +<p className="lead">${md(e.oneLiner)}</p>
47 +
48 +<ChartFigure kind="indicator" id="${e.id}" caption="${cell(paramsLabel)} with its default settings on a daily chart — rendered by the HF Market Data charting engine." />
49 +
50 +<CatalogMeta kind="indicator" id="${e.id}" aka={${JSON.stringify(e.aka)}} category=${JSON.stringify(INDICATOR_CATEGORY_LABELS[e.category] || e.category)} pane=${JSON.stringify(e.pane === 'main' ? 'Overlay on the price pane' : 'Own pane under the price')} />
51 +
52 +## What it measures
53 +
54 +${md(e.summary)}
55 +
56 +## Formula
57 +
58 +${fence(e.formula.text)}
59 +
60 +${e.formula.vars.length ? `| Symbol | Meaning |\n| --- | --- |\n${e.formula.vars.map(([k, m]) => `| \`${cell(k)}\` | ${cell(m)} |`).join('\n')}` : ''}
61 +
62 +## How to read it
63 +
64 +${list(e.howToRead)}
65 +
66 +## Default settings
67 +
68 +${e.defaults.length ? `| Input | Default | Why |\n| --- | --- | --- |\n${rows}` : 'This indicator has no inputs — there is nothing to tune.'}
69 +
70 +Every input is editable live in **⚙ Settings → Inputs**; **Reset defaults** restores the values above.
71 +
72 +## Best for
73 +
74 +| | |
75 +| --- | --- |
76 +| **Timeframes** | ${cell(e.bestFor.timeframes)} |
77 +| **Markets** | ${cell(e.bestFor.markets)} |
78 +${e.bestFor.note ? `| **Note** | ${cell(e.bestFor.note)} |` : ''}
79 +
80 +## Pairs well with
81 +
82 +${e.pairsWith.map(id => `- ${pairLink(id)} — ${md(indicators[id]?.oneLiner || '')}`).join('\n')}
83 +
84 +## Pitfalls
85 +
86 +${list(e.pitfalls)}
87 +
88 +## History
89 +
90 +${md(e.history)}
91 +
92 +## See also
93 +
94 +${[...e.related.map(r => `- [${md(r.label)}](${r.href})`), `- [All indicators](/docs/charts/indicators) · [Drawing tools](/docs/charts/tools) · [Charting guide](/docs/charts)`].join('\n')}
95 +`
96 +}
97 +
98 +/* ─── one tool sheet ─── */
99 +function toolPage(e) {
100 + const clicks = e.points === Infinity ? 'free-form' : `${e.points} point${e.points > 1 ? 's' : ''}`
101 + return `export const meta = { title: ${js(e.name)}, description: ${js(e.oneLiner)}, image: ${js(thumbUrl('tool', e.id, 'dark', 'lg'))} }
102 +
103 +# ${md(e.name)}
104 +
105 +<p className="lead">${md(e.oneLiner)}</p>
106 +
107 +<ChartFigure kind="tool" id="${e.id}" caption="${cell(e.name)} placed on a daily chart — rendered by the HF Market Data charting engine." />
108 +
109 +<CatalogMeta kind="tool" id="${e.id}" aka={${JSON.stringify(e.aka)}} category=${JSON.stringify(TOOL_GROUP_LABELS[e.group] || e.group)} pane=${JSON.stringify(clicks)}${e.shortcut ? ` shortcut=${JSON.stringify(e.shortcut)}` : ''} />
110 +
111 +## What it is
112 +
113 +${md(e.summary)}
114 +
115 +## What it is for
116 +
117 +${md(e.whatFor)}
118 +
119 +## How to draw it
120 +
121 +${e.howToDraw.map((s, i) => `${i + 1}. ${md(s)}`).join('\n')}
122 +
123 +${e.shortcut ? `Keyboard: press <kbd>${e.shortcut}</kbd> to arm the tool, <kbd>Esc</kbd> to go back to the cursor. ` : 'Pick it in the drawing bar (left of the chart) or its flyout; <kbd>Esc</kbd> goes back to the cursor. '}Turn on **magnet** to snap anchors to open / high / low / close; **stay in drawing mode** keeps the tool armed after each drawing. Selecting a drawing opens the floating properties bar (colour, width, style, fill, text, lock, duplicate, delete).
124 +
125 +## Reading tips
126 +
127 +${list(e.readingTips)}
128 +
129 +## Example
130 +
131 +${md(e.example)}
132 +
133 +## Pairs well with
134 +
135 +${e.pairsWith.map(id => `- ${pairLink(id)} — ${md((tools[id] || indicators[id])?.oneLiner || '')}`).join('\n')}
136 +
137 +## Pitfalls
138 +
139 +${list(e.pitfalls)}
140 +
141 +## History
142 +
143 +${md(e.history)}
144 +
145 +## See also
146 +
147 +${[...e.related.map(r => `- [${md(r.label)}](${r.href})`), `- [All drawing tools](/docs/charts/tools) · [Indicators](/docs/charts/indicators) · [Charting guide](/docs/charts)`].join('\n')}
148 +`
149 +}
150 +
151 +/* ─── index pages ─── */
152 +function indicatorsIndex() {
153 + const sections = INDICATOR_CATEGORY_ORDER.map(cat => {
154 + const items = INDICATOR_ENTRIES.filter(e => e.category === cat).map(e => ({ id: e.id, name: e.name, oneLiner: e.oneLiner, aka: e.aka[0] }))
155 + return `## ${INDICATOR_CATEGORY_LABELS[cat]}\n\n<CatalogGrid kind="indicator" items={${JSON.stringify(items)}} />`
156 + })
157 + return `export const meta = { title: 'Indicator encyclopedia', description: 'Every one of the ${INDICATOR_ENTRIES.length} indicators of the HF Market Data charts explained and illustrated: what it measures, the formula, how to read it, why the defaults, pitfalls and history — each with a chart rendered by our own engine.' }
158 +
159 +# Indicator encyclopedia
160 +
161 +<p className="lead">${INDICATOR_ENTRIES.length} indicators, each explained like a serious trading manual — what it measures, the exact formula, how to read it, why the default settings are what they are, what it pairs with, where it fails — and illustrated with the same synthetic daily chart rendered by our own engine, in your theme.</p>
162 +
163 +Every indicator is one click away in the [charts](/charts) — open the **Indicator library** (<kbd>⌘</kbd> <kbd>I</kbd>) for the same sheets next to the chart, or use the *Open in charts* button on each page. See also the [drawing tools](/docs/charts/tools) and the [charting guide](/docs/charts).
164 +
165 +${sections.join('\n\n')}
166 +`
167 +}
168 +
169 +function toolsIndex() {
170 + const sections = TOOL_GROUP_ORDER.map(g => {
171 + const items = TOOL_ENTRIES.filter(e => e.group === g).map(e => ({ id: e.id, name: e.name, oneLiner: e.oneLiner, shortcut: e.shortcut }))
172 + return `## ${TOOL_GROUP_LABELS[g]}\n\n<CatalogGrid kind="tool" items={${JSON.stringify(items)}} />`
173 + })
174 + return `export const meta = { title: 'Drawing tools encyclopedia', description: 'The ${TOOL_ENTRIES.length} drawing tools of the HF Market Data charts explained and illustrated: what each one is for, how to draw it click by click, how to read it, worked examples, pitfalls and history.' }
175 +
176 +# Drawing tools encyclopedia
177 +
178 +<p className="lead">${TOOL_ENTRIES.length} drawing tools — lines and channels, Fibonacci and Gann, shapes, notes, measurements, positions and patterns — each with its purpose, the exact click sequence, reading tips, a worked example and the traps to avoid, illustrated by our own engine on the same daily chart.</p>
179 +
180 +The tools live in the vertical bar on the left of the [charts](/charts): each group button remembers the tool you used last, the chevron (or a right-click, or a long press) opens the full group. Hovering a tool shows the same illustration and steps as here. See also the [indicators](/docs/charts/indicators) and the [charting guide](/docs/charts).
181 +
182 +${sections.join('\n\n')}
183 +`
184 +}
185 +
186 +/* ─── registry entries (literal objects so prerender.mjs can parse them with its regex) ─── */
187 +function guidesModule() {
188 + const entry = ({ slug, title, file, summary, keywords, image }) => ` { slug: ${js(slug)}, title: ${js(title)}, section: 'charts', file: ${js(file)}, summary: ${js(summary)}, hidden: ${!!image}, keywords: ${js(keywords)}${image ? `, image: ${js(image)}` : ''} },`
189 + const lines = [
190 + entry({ slug: 'charts/indicators', title: 'Indicator encyclopedia', file: 'charts-indicators', summary: `${INDICATOR_ENTRIES.length} indicators explained and illustrated: formula, reading, defaults, pitfalls.`, keywords: 'indicators encyclopedia technical analysis' }),
191 + ...INDICATOR_ENTRIES.map(e => entry({ slug: `charts/indicators/${e.id}`, title: e.name, file: `charts-ind-${e.id}`, summary: e.oneLiner, keywords: [e.id, ...e.aka, INDICATOR_CATEGORY_LABELS[e.category], 'indicator'].join(' '), image: thumbUrl('indicator', e.id, 'dark', 'lg') })),
192 + entry({ slug: 'charts/tools', title: 'Drawing tools encyclopedia', file: 'charts-tools', summary: `${TOOL_ENTRIES.length} drawing tools explained and illustrated: purpose, how to draw, reading tips, pitfalls.`, keywords: 'drawing tools fibonacci gann pitchfork patterns' }),
193 + ...TOOL_ENTRIES.map(e => entry({ slug: `charts/tools/${e.id}`, title: e.name, file: `charts-tool-${e.id}`, summary: e.oneLiner, keywords: [e.id, ...e.aka, TOOL_GROUP_LABELS[e.group], 'drawing tool'].join(' '), image: thumbUrl('tool', e.id, 'dark', 'lg') })),
194 + ]
195 + return `// GENERATED by scripts/charts-docs.mjs from src/charts/catalog — do not edit by hand (npm run charts:docs).
196 +// Docs entries of the charts encyclopedia: two index pages (in the nav) + one sheet per indicator / tool (hidden from
197 +// the nav, present in search, prerender and the sitemap). Literal objects: scripts/prerender.mjs parses this file.
198 +export const CHARTS_GUIDES = [
199 +${lines.join('\n')}
200 +]
201 +`
202 +}
203 +
204 +/* ─── write ─── */
205 +for (const f of readdirSync(GUIDES_DIR)) if (/^charts-(ind|tool)-.+\.mdx$/.test(f)) unlinkSync(join(GUIDES_DIR, f))
206 +let count = 0
207 +const write = (name, text) => { writeFileSync(join(GUIDES_DIR, name), text); count++ }
208 +write('charts-indicators.mdx', indicatorsIndex())
209 +write('charts-tools.mdx', toolsIndex())
210 +for (const e of INDICATOR_ENTRIES) write(`charts-ind-${e.id}.mdx`, indicatorPage(e))
211 +for (const e of TOOL_ENTRIES) write(`charts-tool-${e.id}.mdx`, toolPage(e))
212 +writeFileSync(join(ROOT, 'src', 'docs', 'guides.charts.js'), guidesModule())
213 +console.log(`charts docs: ${count} MDX pages (${INDICATOR_ENTRIES.length} indicators, ${TOOL_ENTRIES.length} tools, 2 indexes) + src/docs/guides.charts.js`)
modified hfmarketdata/web/scripts/prerender.mjs +11 −4
@@ -57,18 +57,22 @@ const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&
57 57
58 58 /** Guides from src/docs/guides.js (slug/title/file/summary) + the MDX `meta.description` when present. */
59 59 function guideRoutes() {
60 − const src = readFileSync(join(ROOT, 'src/docs/guides.js'), 'utf8')
60 + // guides.js + the generated charts encyclopedia registry (scripts/charts-docs.mjs → src/docs/guides.charts.js)
61 + const src = ['src/docs/guides.js', 'src/docs/guides.charts.js'].map(f => (existsSync(join(ROOT, f)) ? readFileSync(join(ROOT, f), 'utf8') : '')).join('\n')
61 62 const re = /\{\s*slug:\s*'([^']+)',\s*title:\s*'((?:\\'|[^'])+)',\s*section:\s*'[^']+',\s*file:\s*'([^']+)',\s*summary:\s*'((?:\\'|[^'])+)'/g
62 63 const out = []
63 64 for (const m of src.matchAll(re)) {
64 65 const [, slug, title, file, summary] = m.map(x => (x || '').replace(/\\'/g, "'"))
65 66 const mdxPath = file === '__changelog' ? join(ROOT, 'content/changelog.mdx') : join(ROOT, `content/guides/${file}.mdx`)
66 − let description = summary
67 + let description = summary, image = null
67 68 if (existsSync(mdxPath)) {
68 − const meta = /export const meta = \{[^}]*description:\s*'((?:\\'|[^'])+)'/.exec(readFileSync(mdxPath, 'utf8'))
69 + const head = readFileSync(mdxPath, 'utf8')
70 + const meta = /export const meta = \{[^}]*description:\s*'((?:\\'|[^'])+)'/.exec(head)
69 71 if (meta) description = meta[1].replace(/\\'/g, "'")
72 + const img = /export const meta = \{[^}]*image:\s*'([^']+)'/.exec(head)
73 + if (img) image = img[1]
70 74 }
71 − out.push({ path: `/docs/${slug}`, entry: 'src/pages/docs/Docs.jsx', title: `${title} · HF Market Data`, description, h1: title, lead: description, guide: file })
75 + out.push({ path: `/docs/${slug}`, entry: 'src/pages/docs/Docs.jsx', title: `${title} · HF Market Data`, description, h1: title, lead: description, guide: file, image })
72 76 }
73 77 return out
74 78 }
@@ -115,6 +119,9 @@ function main() {
115 119 .replace(/<meta property="og:title" content="[^"]*"\s*\/?>/, `<meta property="og:title" content="${esc(route.title)}" />`)
116 120 .replace(/<meta property="og:description" content="[^"]*"\s*\/?>/, `<meta property="og:description" content="${esc(route.description)}" />`)
117 121 .replace(/<link rel="canonical" href="[^"]*"\s*\/?>/, `<link rel="canonical" href="${SITE}${route.path === '/' ? '/' : route.path}" />`)
122 + .replace(/<meta property="og:image" content="[^"]*"\s*\/?>/, m => (route.image ? `<meta property="og:image" content="${SITE}${route.image}" />` : m))
123 + .replace(/<meta property="og:image:width" content="[^"]*"\s*\/?>/, m => (route.image ? '<meta property="og:image:width" content="1920" />' : m))
124 + .replace(/<meta property="og:image:height" content="[^"]*"\s*\/?>/, m => (route.image ? '<meta property="og:image:height" content="1080" />' : m))
118 125 .replace('</head>', `${styles}${preload}<meta property="og:url" content="${SITE}${route.path}" /></head>`)
119 126 .replace('<div id="root"></div>', `<div id="root">${shell(route)}</div>`)
120 127 // Two file forms so any static server picks the shell up: <route>/index.html and <route>.html.
added hfmarketdata/web/src/charts/catalog/DocsBlocks.jsx +38 −0
@@ -0,0 +1,38 @@
1 +// Blocks used by the generated encyclopedia pages (content/guides/charts-*.mdx, see scripts/charts-docs.mjs):
2 +// <CatalogGrid> cards with engine-rendered thumbnails, <CatalogMeta> tag row + "Open in charts" deep link.
3 +import React from 'react'
4 +import { Link } from 'react-router-dom'
5 +import { Thumb } from './ChartFigure.jsx'
6 +import { chartsHref, docsHref } from './index.js'
7 +
8 +/** Card grid of an index page. items: [{ id, name, oneLiner, aka?, shortcut? }] */
9 +export function CatalogGrid({ kind = 'indicator', items = [] }) {
10 + return (
11 + <div className="ch-docs-grid" data-testid={`ch-docs-grid-${kind}`}>
12 + {items.map(it => (
13 + <Link key={it.id} to={docsHref(kind, it.id)} className="ch-docs-card" data-testid={`ch-docs-card-${it.id}`}>
14 + <Thumb kind={kind} id={it.id} size="sm" alt="" />
15 + <span className="ch-docs-card-body">
16 + <strong>{it.name}{it.aka && it.aka !== it.name ? <small className="mono"> {it.aka}</small> : null}{it.shortcut ? <kbd>{it.shortcut}</kbd> : null}</strong>
17 + <span>{it.oneLiner}</span>
18 + </span>
19 + </Link>
20 + ))}
21 + </div>
22 + )
23 +}
24 +
25 +/** Tag row under the figure of a sheet + the deep link into the charts page (?ind=<id> / ?tool=<id>). */
26 +export function CatalogMeta({ kind = 'indicator', id, aka = [], category, pane, shortcut }) {
27 + return (
28 + <div className="ch-docs-meta" data-testid="ch-docs-meta">
29 + <div className="ch-docs-tags">
30 + {aka.slice(0, 3).map(a => <span key={a} className="ch-tag mono">{a}</span>)}
31 + {category && <span className="ch-tag">{category}</span>}
32 + {pane && <span className="ch-tag">{pane}</span>}
33 + {shortcut && <span className="ch-tag">shortcut <kbd>{shortcut}</kbd></span>}
34 + </div>
35 + <Link to={chartsHref(kind, id)} className="btn btn-sm btn-primary" data-testid="ch-docs-open">{kind === 'tool' ? 'Draw it in charts' : 'Open in charts'} →</Link>
36 + </div>
37 + )
38 +}
added hfmarketdata/web/src/docs/guides.charts.js +109 −0
@@ -0,0 +1,109 @@
1 +// GENERATED by scripts/charts-docs.mjs from src/charts/catalog — do not edit by hand (npm run charts:docs).
2 +// Docs entries of the charts encyclopedia: two index pages (in the nav) + one sheet per indicator / tool (hidden from
3 +// the nav, present in search, prerender and the sitemap). Literal objects: scripts/prerender.mjs parses this file.
4 +export const CHARTS_GUIDES = [
5 + { slug: 'charts/indicators', title: 'Indicator encyclopedia', section: 'charts', file: 'charts-indicators', summary: '60 indicators explained and illustrated: formula, reading, defaults, pitfalls.', hidden: false, keywords: 'indicators encyclopedia technical analysis' },
6 + { slug: 'charts/indicators/sma', title: 'Simple Moving Average', section: 'charts', file: 'charts-ind-sma', summary: 'Arithmetic mean of the last n prices — the baseline trend filter and dynamic support.', hidden: true, keywords: 'sma SMA Moving average Arithmetic mean Trend indicator', image: '/charts/thumbs/indicator-sma-dark-lg.png' },
7 + { slug: 'charts/indicators/ema', title: 'Exponential Moving Average', section: 'charts', file: 'charts-ind-ema', summary: 'Recency-weighted average that reacts faster than the SMA with less drop-off jitter.', hidden: true, keywords: 'ema EMA Exponentially weighted MA Trend indicator', image: '/charts/thumbs/indicator-ema-dark-lg.png' },
8 + { slug: 'charts/indicators/wma', title: 'Weighted Moving Average', section: 'charts', file: 'charts-ind-wma', summary: 'Linearly weighted average: the newest bar counts n times the oldest — faster than the SMA.', hidden: true, keywords: 'wma WMA Linearly weighted MA LWMA Trend indicator', image: '/charts/thumbs/indicator-wma-dark-lg.png' },
9 + { slug: 'charts/indicators/hma', title: 'Hull Moving Average', section: 'charts', file: 'charts-ind-hma', summary: 'Almost lag-free smooth average built from three weighted MAs; hugs the trend.', hidden: true, keywords: 'hma HMA Hull MA Trend indicator', image: '/charts/thumbs/indicator-hma-dark-lg.png' },
10 + { slug: 'charts/indicators/dema', title: 'Double Exponential Moving Average', section: 'charts', file: 'charts-ind-dema', summary: 'EMA with the lag of its own smoothing subtracted — quicker turns, same length.', hidden: true, keywords: 'dema DEMA Trend indicator', image: '/charts/thumbs/indicator-dema-dark-lg.png' },
11 + { slug: 'charts/indicators/tema', title: 'Triple Exponential Moving Average', section: 'charts', file: 'charts-ind-tema', summary: 'Three nested EMAs recombined to cancel lag — the fastest of the EMA family.', hidden: true, keywords: 'tema TEMA Trend indicator', image: '/charts/thumbs/indicator-tema-dark-lg.png' },
12 + { slug: 'charts/indicators/kama', title: 'Kaufman Adaptive Moving Average', section: 'charts', file: 'charts-ind-kama', summary: 'Speeds up in trends, flattens in noise: the smoothing adapts to the efficiency ratio.', hidden: true, keywords: 'kama KAMA Adaptive MA Trend indicator', image: '/charts/thumbs/indicator-kama-dark-lg.png' },
13 + { slug: 'charts/indicators/alma', title: 'Arnaud Legoux Moving Average', section: 'charts', file: 'charts-ind-alma', summary: 'Gaussian-weighted average with an adjustable offset: tune smoothness against lag.', hidden: true, keywords: 'alma ALMA Trend indicator', image: '/charts/thumbs/indicator-alma-dark-lg.png' },
14 + { slug: 'charts/indicators/lsma', title: 'Linear Regression (LSMA + channel)', section: 'charts', file: 'charts-ind-lsma', summary: 'End point of the best-fit line over n bars, with a ±k·σ channel of the residuals.', hidden: true, keywords: 'lsma LSMA Least squares MA Linear regression curve Regression channel Trend indicator', image: '/charts/thumbs/indicator-lsma-dark-lg.png' },
15 + { slug: 'charts/indicators/envelope', title: 'Moving Average Envelope', section: 'charts', file: 'charts-ind-envelope', summary: 'A moving average with bands a fixed percentage above and below — the simplest channel.', hidden: true, keywords: 'envelope MA Envelope Percentage bands Trading bands Trend indicator', image: '/charts/thumbs/indicator-envelope-dark-lg.png' },
16 + { slug: 'charts/indicators/vwap', title: 'Volume-Weighted Average Price', section: 'charts', file: 'charts-ind-vwap', summary: 'Volume-weighted average price since the session open — the institutional fair value.', hidden: true, keywords: 'vwap VWAP Session VWAP Trend indicator', image: '/charts/thumbs/indicator-vwap-dark-lg.png' },
17 + { slug: 'charts/indicators/avwap', title: 'Anchored VWAP', section: 'charts', file: 'charts-ind-avwap', summary: 'VWAP starting from a bar you choose — the average cost of everyone in since that event.', hidden: true, keywords: 'avwap AVWAP Anchored volume-weighted average price Trend indicator', image: '/charts/thumbs/indicator-avwap-dark-lg.png' },
18 + { slug: 'charts/indicators/supertrend', title: 'Supertrend', section: 'charts', file: 'charts-ind-supertrend', summary: 'ATR-based trailing stop that flips colour with the trend — one line, long or short.', hidden: true, keywords: 'supertrend ST ATR trailing stop Trend indicator', image: '/charts/thumbs/indicator-supertrend-dark-lg.png' },
19 + { slug: 'charts/indicators/psar', title: 'Parabolic SAR', section: 'charts', file: 'charts-ind-psar', summary: 'Accelerating trailing dots below or above price; a touch flips the trend.', hidden: true, keywords: 'psar PSAR SAR Stop and Reverse Trend indicator', image: '/charts/thumbs/indicator-psar-dark-lg.png' },
20 + { slug: 'charts/indicators/ichimoku', title: 'Ichimoku Kinko Hyo', section: 'charts', file: 'charts-ind-ichimoku', summary: 'Five lines and a cloud: trend, momentum, support and resistance in one equilibrium chart.', hidden: true, keywords: 'ichimoku Ichimoku Cloud Ichimoku Trend indicator', image: '/charts/thumbs/indicator-ichimoku-dark-lg.png' },
21 + { slug: 'charts/indicators/vortex', title: 'Vortex Indicator', section: 'charts', file: 'charts-ind-vortex', summary: 'Two lines from bar-to-bar range overlap: VI+ over VI− = uptrend, the cross is the signal.', hidden: true, keywords: 'vortex VI VI+ / VI− Trend indicator', image: '/charts/thumbs/indicator-vortex-dark-lg.png' },
22 + { slug: 'charts/indicators/aroon', title: 'Aroon', section: 'charts', file: 'charts-ind-aroon', summary: 'How recently the n-bar high and low were made, 0–100: fresh highs = Aroon Up near 100.', hidden: true, keywords: 'aroon Aroon Up / Down Aroon indicator Trend indicator', image: '/charts/thumbs/indicator-aroon-dark-lg.png' },
23 + { slug: 'charts/indicators/adx', title: 'Average Directional Index', section: 'charts', file: 'charts-ind-adx', summary: 'Trend strength 0–100 regardless of direction, with +DI / −DI showing who leads.', hidden: true, keywords: 'adx ADX DMI Directional Movement Trend indicator', image: '/charts/thumbs/indicator-adx-dark-lg.png' },
24 + { slug: 'charts/indicators/zigzag', title: 'ZigZag', section: 'charts', file: 'charts-ind-zigzag', summary: 'Connects swing highs and lows that exceed a deviation, filtering out the smaller noise.', hidden: true, keywords: 'zigzag Zig Zag Swing filter Levels & structure indicator', image: '/charts/thumbs/indicator-zigzag-dark-lg.png' },
25 + { slug: 'charts/indicators/pivots', title: 'Pivot Points', section: 'charts', file: 'charts-ind-pivots', summary: 'Support and resistance levels for the current period computed from the previous H, L, C.', hidden: true, keywords: 'pivots Floor pivots PP Daily pivots Levels & structure indicator', image: '/charts/thumbs/indicator-pivots-dark-lg.png' },
26 + { slug: 'charts/indicators/auto-fib', title: 'Auto Fibonacci (visible range)', section: 'charts', file: 'charts-ind-auto-fib', summary: 'Fibonacci retracement drawn automatically on the largest swing of the visible range.', hidden: true, keywords: 'auto-fib Auto Fib Automatic retracement Levels & structure indicator', image: '/charts/thumbs/indicator-auto-fib-dark-lg.png' },
27 + { slug: 'charts/indicators/rsi', title: 'Relative Strength Index', section: 'charts', file: 'charts-ind-rsi', summary: 'Momentum 0–100: above 70 overbought, below 30 oversold, divergences warn of turns.', hidden: true, keywords: 'rsi RSI Momentum indicator', image: '/charts/thumbs/indicator-rsi-dark-lg.png' },
28 + { slug: 'charts/indicators/stochrsi', title: 'Stochastic RSI', section: 'charts', file: 'charts-ind-stochrsi', summary: 'Stochastic applied to RSI: a faster 0–100 oscillator with %K / %D and 20 / 80 zones.', hidden: true, keywords: 'stochrsi StochRSI Stoch RSI Momentum indicator', image: '/charts/thumbs/indicator-stochrsi-dark-lg.png' },
29 + { slug: 'charts/indicators/macd', title: 'Moving Average Convergence Divergence', section: 'charts', file: 'charts-ind-macd', summary: 'Fast EMA minus slow EMA, a signal EMA and the histogram between them; zero line = trend.', hidden: true, keywords: 'macd MACD Momentum indicator', image: '/charts/thumbs/indicator-macd-dark-lg.png' },
30 + { slug: 'charts/indicators/stoch', title: 'Stochastic Oscillator', section: 'charts', file: 'charts-ind-stoch', summary: 'Where the close sits in the recent high–low range, 0–100; %K / %D crosses at 20 / 80.', hidden: true, keywords: 'stoch Stoch Slow stochastic %K %D Momentum indicator', image: '/charts/thumbs/indicator-stoch-dark-lg.png' },
31 + { slug: 'charts/indicators/williams', title: 'Williams %R', section: 'charts', file: 'charts-ind-williams', summary: 'Inverted stochastic on a −100…0 scale: above −20 overbought, below −80 oversold.', hidden: true, keywords: 'williams %R Williams Percent Range Momentum indicator', image: '/charts/thumbs/indicator-williams-dark-lg.png' },
32 + { slug: 'charts/indicators/cci', title: 'Commodity Channel Index', section: 'charts', file: 'charts-ind-cci', summary: 'Typical price minus its SMA, scaled by mean deviation; ±100 marks unusual extension.', hidden: true, keywords: 'cci CCI Momentum indicator', image: '/charts/thumbs/indicator-cci-dark-lg.png' },
33 + { slug: 'charts/indicators/roc', title: 'Rate of Change', section: 'charts', file: 'charts-ind-roc', summary: 'Percent change of price versus n bars ago; the zero line separates rising from falling.', hidden: true, keywords: 'roc ROC Price Rate of Change Momentum indicator', image: '/charts/thumbs/indicator-roc-dark-lg.png' },
34 + { slug: 'charts/indicators/momentum', title: 'Momentum', section: 'charts', file: 'charts-ind-momentum', summary: 'Price minus price n bars ago, in price units; the zero line is the trend switch.', hidden: true, keywords: 'momentum Mom Price momentum Momentum indicator', image: '/charts/thumbs/indicator-momentum-dark-lg.png' },
35 + { slug: 'charts/indicators/ao', title: 'Awesome Oscillator', section: 'charts', file: 'charts-ind-ao', summary: 'SMA 5 minus SMA 34 of the bar midpoint, as a histogram coloured by its own direction.', hidden: true, keywords: 'ao AO Momentum indicator', image: '/charts/thumbs/indicator-ao-dark-lg.png' },
36 + { slug: 'charts/indicators/trix', title: 'TRIX', section: 'charts', file: 'charts-ind-trix', summary: 'Percent change of a triple-smoothed EMA with a signal line; filters out short-lived noise.', hidden: true, keywords: 'trix TRIX Triple exponential average rate of change Momentum indicator', image: '/charts/thumbs/indicator-trix-dark-lg.png' },
37 + { slug: 'charts/indicators/ultimate', title: 'Ultimate Oscillator', section: 'charts', file: 'charts-ind-ultimate', summary: 'Buying pressure over true range on 7, 14 and 28 bars, weighted 4-2-1, on a 0–100 scale.', hidden: true, keywords: 'ultimate UO Ultimate Momentum indicator', image: '/charts/thumbs/indicator-ultimate-dark-lg.png' },
38 + { slug: 'charts/indicators/coppock', title: 'Coppock Curve', section: 'charts', file: 'charts-ind-coppock', summary: 'WMA of two summed rates of change; a turn up from below zero marks major market bottoms.', hidden: true, keywords: 'coppock Coppock Coppock indicator Momentum indicator', image: '/charts/thumbs/indicator-coppock-dark-lg.png' },
39 + { slug: 'charts/indicators/dpo', title: 'Detrended Price Oscillator', section: 'charts', file: 'charts-ind-dpo', summary: 'Price minus a displaced SMA: removes the trend to expose the cycle around it.', hidden: true, keywords: 'dpo DPO Momentum indicator', image: '/charts/thumbs/indicator-dpo-dark-lg.png' },
40 + { slug: 'charts/indicators/kst', title: 'Know Sure Thing', section: 'charts', file: 'charts-ind-kst', summary: 'Weighted sum of four smoothed rates of change plus a signal line: multi-cycle momentum.', hidden: true, keywords: 'kst KST Pring\'s KST Momentum indicator', image: '/charts/thumbs/indicator-kst-dark-lg.png' },
41 + { slug: 'charts/indicators/tsi', title: 'True Strength Index', section: 'charts', file: 'charts-ind-tsi', summary: 'Double-smoothed price change over double-smoothed absolute change, −100…100, with signal.', hidden: true, keywords: 'tsi TSI Momentum indicator', image: '/charts/thumbs/indicator-tsi-dark-lg.png' },
42 + { slug: 'charts/indicators/rvi', title: 'Relative Vigor Index', section: 'charts', file: 'charts-ind-rvi', summary: 'Close-minus-open over high-minus-low, symmetrically smoothed, with a signal line.', hidden: true, keywords: 'rvi RVI RVGI Momentum indicator', image: '/charts/thumbs/indicator-rvi-dark-lg.png' },
43 + { slug: 'charts/indicators/cmo', title: 'Chande Momentum Oscillator', section: 'charts', file: 'charts-ind-cmo', summary: 'Sum of gains minus losses over their total, −100…100, unsmoothed; ±50 mark the extremes.', hidden: true, keywords: 'cmo CMO Momentum indicator', image: '/charts/thumbs/indicator-cmo-dark-lg.png' },
44 + { slug: 'charts/indicators/elder-ray', title: 'Elder Ray', section: 'charts', file: 'charts-ind-elder-ray', summary: 'Bull power (high − EMA 13) and bear power (low − EMA 13) as two histograms around zero.', hidden: true, keywords: 'elder-ray Bull Power / Bear Power Elder-Ray Index Momentum indicator', image: '/charts/thumbs/indicator-elder-ray-dark-lg.png' },
45 + { slug: 'charts/indicators/bollinger', title: 'Bollinger Bands', section: 'charts', file: 'charts-ind-bollinger', summary: 'Moving average ± k standard deviations; the band width tracks volatility.', hidden: true, keywords: 'bollinger BB Bollinger Volatility indicator', image: '/charts/thumbs/indicator-bollinger-dark-lg.png' },
46 + { slug: 'charts/indicators/keltner', title: 'Keltner Channels', section: 'charts', file: 'charts-ind-keltner', summary: 'EMA ± k × ATR: a smoother volatility channel than Bollinger, built on true range.', hidden: true, keywords: 'keltner KC Keltner Volatility indicator', image: '/charts/thumbs/indicator-keltner-dark-lg.png' },
47 + { slug: 'charts/indicators/donchian', title: 'Donchian Channels', section: 'charts', file: 'charts-ind-donchian', summary: 'Highest high and lowest low of the last n bars: the breakout channel of trend followers.', hidden: true, keywords: 'donchian DC Donchian Price channel Volatility indicator', image: '/charts/thumbs/indicator-donchian-dark-lg.png' },
48 + { slug: 'charts/indicators/choppiness', title: 'Choppiness Index', section: 'charts', file: 'charts-ind-choppiness', summary: 'Is the market trending or chopping? 0–100: above 61.8 = chop, below 38.2 = trend.', hidden: true, keywords: 'choppiness CHOP Volatility indicator', image: '/charts/thumbs/indicator-choppiness-dark-lg.png' },
49 + { slug: 'charts/indicators/mass', title: 'Mass Index', section: 'charts', file: 'charts-ind-mass', summary: 'Sum of range-EMA ratios; a bulge above 27 then back under 26.5 flags a reversal.', hidden: true, keywords: 'mass Mass MI Volatility indicator', image: '/charts/thumbs/indicator-mass-dark-lg.png' },
50 + { slug: 'charts/indicators/atr', title: 'Average True Range', section: 'charts', file: 'charts-ind-atr', summary: 'Typical bar-to-bar movement in price units — the standard yardstick for stops and size.', hidden: true, keywords: 'atr ATR Volatility indicator', image: '/charts/thumbs/indicator-atr-dark-lg.png' },
51 + { slug: 'charts/indicators/bb-pctb', title: 'Bollinger %B', section: 'charts', file: 'charts-ind-bb-pctb', summary: 'Where the close sits inside the Bollinger Bands: 1 = upper band, 0 = lower band.', hidden: true, keywords: 'bb-pctb %B Percent B Volatility indicator', image: '/charts/thumbs/indicator-bb-pctb-dark-lg.png' },
52 + { slug: 'charts/indicators/bb-width', title: 'Bollinger Bandwidth', section: 'charts', file: 'charts-ind-bb-width', summary: 'Width of the Bollinger Bands as % of the middle band; lows mark the Squeeze.', hidden: true, keywords: 'bb-width BBW Bandwidth Volatility indicator', image: '/charts/thumbs/indicator-bb-width-dark-lg.png' },
53 + { slug: 'charts/indicators/hv', title: 'Historical Volatility', section: 'charts', file: 'charts-ind-hv', summary: 'Annualised standard deviation of log returns, in % — the volatility options are priced on.', hidden: true, keywords: 'hv HV Realised volatility Statistical volatility Volatility indicator', image: '/charts/thumbs/indicator-hv-dark-lg.png' },
54 + { slug: 'charts/indicators/stddev', title: 'Standard Deviation', section: 'charts', file: 'charts-ind-stddev', summary: 'Rolling standard deviation of price over n bars — raw dispersion in price units.', hidden: true, keywords: 'stddev StdDev σ Volatility indicator', image: '/charts/thumbs/indicator-stddev-dark-lg.png' },
55 + { slug: 'charts/indicators/volume-profile', title: 'Volume Profile (visible range)', section: 'charts', file: 'charts-ind-volume-profile', summary: 'Volume traded at each price level of the visible bars, with POC and value area.', hidden: true, keywords: 'volume-profile VP VPVR Market profile Volume indicator', image: '/charts/thumbs/indicator-volume-profile-dark-lg.png' },
56 + { slug: 'charts/indicators/obv', title: 'On-Balance Volume', section: 'charts', file: 'charts-ind-obv', summary: 'Running total of volume signed by the close direction; should confirm price trends.', hidden: true, keywords: 'obv OBV Volume indicator', image: '/charts/thumbs/indicator-obv-dark-lg.png' },
57 + { slug: 'charts/indicators/ad', title: 'Accumulation / Distribution', section: 'charts', file: 'charts-ind-ad', summary: 'Cumulative money-flow volume, each bar weighted by where the close sits in its range.', hidden: true, keywords: 'ad A/D ADL Accumulation / Distribution line Volume indicator', image: '/charts/thumbs/indicator-ad-dark-lg.png' },
58 + { slug: 'charts/indicators/mfi', title: 'Money Flow Index', section: 'charts', file: 'charts-ind-mfi', summary: 'Volume-weighted RSI 0–100: above 80 overbought, below 20 oversold, divergences matter.', hidden: true, keywords: 'mfi MFI Volume-weighted RSI Volume indicator', image: '/charts/thumbs/indicator-mfi-dark-lg.png' },
59 + { slug: 'charts/indicators/cmf', title: 'Chaikin Money Flow', section: 'charts', file: 'charts-ind-cmf', summary: 'Money-flow volume over total volume for n bars, −1…+1: buying or selling pressure.', hidden: true, keywords: 'cmf CMF Volume indicator', image: '/charts/thumbs/indicator-cmf-dark-lg.png' },
60 + { slug: 'charts/indicators/chaikin-osc', title: 'Chaikin Oscillator', section: 'charts', file: 'charts-ind-chaikin-osc', summary: 'MACD of the Accumulation / Distribution line: fast EMA minus slow EMA of money flow.', hidden: true, keywords: 'chaikin-osc Chaikin Osc CHO Volume indicator', image: '/charts/thumbs/indicator-chaikin-osc-dark-lg.png' },
61 + { slug: 'charts/indicators/force', title: 'Force Index', section: 'charts', file: 'charts-ind-force', summary: 'Price change × volume, EMA-smoothed: the force behind each move, bulls above zero.', hidden: true, keywords: 'force Force FI Elder Force Index Volume indicator', image: '/charts/thumbs/indicator-force-dark-lg.png' },
62 + { slug: 'charts/indicators/eom', title: 'Ease of Movement', section: 'charts', file: 'charts-ind-eom', summary: 'How far price moves per unit of volume: positive = rising easily, negative = falling.', hidden: true, keywords: 'eom EOM EMV Ease of Movement Value Volume indicator', image: '/charts/thumbs/indicator-eom-dark-lg.png' },
63 + { slug: 'charts/indicators/klinger', title: 'Klinger Oscillator', section: 'charts', file: 'charts-ind-klinger', summary: 'EMA 34 minus EMA 55 of signed volume, with a signal line — long-term money flow turns.', hidden: true, keywords: 'klinger KVO Klinger Volume Oscillator Volume indicator', image: '/charts/thumbs/indicator-klinger-dark-lg.png' },
64 + { slug: 'charts/indicators/volume-osc', title: 'Volume Oscillator', section: 'charts', file: 'charts-ind-volume-osc', summary: 'Fast volume EMA vs slow volume EMA, in %: is participation rising or fading?', hidden: true, keywords: 'volume-osc VO PVO Volume indicator', image: '/charts/thumbs/indicator-volume-osc-dark-lg.png' },
65 + { slug: 'charts/indicators/volume-ma', title: 'Volume', section: 'charts', file: 'charts-ind-volume-ma', summary: 'Volume histogram coloured by bar direction with its moving average in its own pane.', hidden: true, keywords: 'volume-ma Vol MA Volume + MA Volume indicator', image: '/charts/thumbs/indicator-volume-ma-dark-lg.png' },
66 + { slug: 'charts/tools', title: 'Drawing tools encyclopedia', section: 'charts', file: 'charts-tools', summary: '42 drawing tools explained and illustrated: purpose, how to draw, reading tips, pitfalls.', hidden: false, keywords: 'drawing tools fibonacci gann pitchfork patterns' },
67 + { slug: 'charts/tools/trendline', title: 'Trend line', section: 'charts', file: 'charts-tool-trendline', summary: 'A segment between two points — the simplest way to mark a trend or a sloping level.', hidden: true, keywords: 'trendline Trendline Line segment Lines & channels drawing tool', image: '/charts/thumbs/tool-trendline-dark-lg.png' },
68 + { slug: 'charts/tools/ray', title: 'Ray', section: 'charts', file: 'charts-tool-ray', summary: 'A trend line that starts at point A and runs through B to the right edge — forever.', hidden: true, keywords: 'ray Trend ray Half-line Lines & channels drawing tool', image: '/charts/thumbs/tool-ray-dark-lg.png' },
69 + { slug: 'charts/tools/extended', title: 'Extended line', section: 'charts', file: 'charts-tool-extended', summary: 'A line through two points extended in both directions across the whole chart.', hidden: true, keywords: 'extended Infinite line Lines & channels drawing tool', image: '/charts/thumbs/tool-extended-dark-lg.png' },
70 + { slug: 'charts/tools/hray', title: 'Horizontal ray', section: 'charts', file: 'charts-tool-hray', summary: 'A horizontal level from the click to the right edge — a level with a birth date.', hidden: true, keywords: 'hray Horizontal half-line Level from here Lines & channels drawing tool', image: '/charts/thumbs/tool-hray-dark-lg.png' },
71 + { slug: 'charts/tools/hline', title: 'Horizontal line', section: 'charts', file: 'charts-tool-hline', summary: 'A full-width line at one price — the classic support or resistance level.', hidden: true, keywords: 'hline Price level Support / resistance line Lines & channels drawing tool', image: '/charts/thumbs/tool-hline-dark-lg.png' },
72 + { slug: 'charts/tools/vline', title: 'Vertical line', section: 'charts', file: 'charts-tool-vline', summary: 'A full-height line at one bar — marks an event, a session open or a cycle date.', hidden: true, keywords: 'vline Time marker Event line Lines & channels drawing tool', image: '/charts/thumbs/tool-vline-dark-lg.png' },
73 + { slug: 'charts/tools/cross', title: 'Cross line', section: 'charts', file: 'charts-tool-cross', summary: 'A horizontal and a vertical line through one point — pins a price and a moment together.', hidden: true, keywords: 'cross Crosshair marker Price-time cross Lines & channels drawing tool', image: '/charts/thumbs/tool-cross-dark-lg.png' },
74 + { slug: 'charts/tools/channel', title: 'Parallel channel', section: 'charts', file: 'charts-tool-channel', summary: 'Two parallel lines around a trend — the path price is expected to travel inside.', hidden: true, keywords: 'channel Trend channel Equidistant channel Lines & channels drawing tool', image: '/charts/thumbs/tool-channel-dark-lg.png' },
75 + { slug: 'charts/tools/regression', title: 'Regression trend', section: 'charts', file: 'charts-tool-regression', summary: 'Least-squares line through the closes between two dates, with a ±2σ channel.', hidden: true, keywords: 'regression Linear regression channel Raff channel Lines & channels drawing tool', image: '/charts/thumbs/tool-regression-dark-lg.png' },
76 + { slug: 'charts/tools/pitchfork', title: 'Andrews pitchfork', section: 'charts', file: 'charts-tool-pitchfork', summary: 'Median line from a pivot through the midpoint of the next swing, with two parallel tines.', hidden: true, keywords: 'pitchfork Median line Andrews fork Lines & channels drawing tool', image: '/charts/thumbs/tool-pitchfork-dark-lg.png' },
77 + { slug: 'charts/tools/schiff', title: 'Schiff pitchfork', section: 'charts', file: 'charts-tool-schiff', summary: 'Pitchfork with the origin shifted halfway to point 2 in price — a flatter median line.', hidden: true, keywords: 'schiff Schiff fork Schiff median line Lines & channels drawing tool', image: '/charts/thumbs/tool-schiff-dark-lg.png' },
78 + { slug: 'charts/tools/mschiff', title: 'Modified Schiff pitchfork', section: 'charts', file: 'charts-tool-mschiff', summary: 'Pitchfork with the origin moved to the midpoint of points 1 and 2 in both price and time.', hidden: true, keywords: 'mschiff Modified Schiff Half-fork Lines & channels drawing tool', image: '/charts/thumbs/tool-mschiff-dark-lg.png' },
79 + { slug: 'charts/tools/fib', title: 'Fibonacci retracement', section: 'charts', file: 'charts-tool-fib', summary: 'Horizontal levels at 23.6–78.6 % of a swing — where pullbacks tend to pause or reverse.', hidden: true, keywords: 'fib Fib retracement Fibs Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-fib-dark-lg.png' },
80 + { slug: 'charts/tools/fib-extension', title: 'Trend-based Fib extension', section: 'charts', file: 'charts-tool-fib-extension', summary: 'Projects 0.618–2.618 of an impulse from the end of its pullback — next-leg targets.', hidden: true, keywords: 'fib-extension Fib extension Fibonacci projection ABC projection Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-fib-extension-dark-lg.png' },
81 + { slug: 'charts/tools/fib-timezones', title: 'Fibonacci time zones', section: 'charts', file: 'charts-tool-fib-timezones', summary: 'Vertical lines 1, 2, 3, 5, 8, 13… bars apart — dates where turning points may cluster.', hidden: true, keywords: 'fib-timezones Fib time Time zones Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-fib-timezones-dark-lg.png' },
82 + { slug: 'charts/tools/fib-fan', title: 'Fibonacci speed/resistance fan', section: 'charts', file: 'charts-tool-fib-fan', summary: 'Rays from a pivot through the 23.6–78.6 % levels of a swing — sloping Fibonacci support.', hidden: true, keywords: 'fib-fan Fib fan Speed resistance lines Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-fib-fan-dark-lg.png' },
83 + { slug: 'charts/tools/fib-arcs', title: 'Fibonacci arcs', section: 'charts', file: 'charts-tool-fib-arcs', summary: 'Arcs at 38.2–100 % of a swing, centred on its end — support that curves with time.', hidden: true, keywords: 'fib-arcs Fib arcs Fibonacci circles Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-fib-arcs-dark-lg.png' },
84 + { slug: 'charts/tools/gann-fan', title: 'Gann fan', section: 'charts', file: 'charts-tool-gann-fan', summary: 'Nine rays at Gann angles (1×8 to 8×1) from a pivot — the 1×1 line is the trend\'s balance.', hidden: true, keywords: 'gann-fan Gann angles 1×1 line Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-gann-fan-dark-lg.png' },
85 + { slug: 'charts/tools/gann-box', title: 'Gann box', section: 'charts', file: 'charts-tool-gann-box', summary: 'A box split at 25–75 % in price and time, with diagonals — a price-time grid for a swing.', hidden: true, keywords: 'gann-box Gann square Gann grid Fibonacci & Gann drawing tool', image: '/charts/thumbs/tool-gann-box-dark-lg.png' },
86 + { slug: 'charts/tools/rect', title: 'Rectangle', section: 'charts', file: 'charts-tool-rect', summary: 'A filled box between two corners — supply and demand zones, ranges, consolidations.', hidden: true, keywords: 'rect Box Zone Shapes & annotations drawing tool', image: '/charts/thumbs/tool-rect-dark-lg.png' },
87 + { slug: 'charts/tools/ellipse', title: 'Ellipse', section: 'charts', file: 'charts-tool-ellipse', summary: 'An oval inside a bounding box — circles a pattern, a spike or a cluster of bars.', hidden: true, keywords: 'ellipse Circle Oval Shapes & annotations drawing tool', image: '/charts/thumbs/tool-ellipse-dark-lg.png' },
88 + { slug: 'charts/tools/triangle', title: 'Triangle', section: 'charts', file: 'charts-tool-triangle', summary: 'A three-point polygon — outlines triangles, wedges and pennants explicitly.', hidden: true, keywords: 'triangle Wedge Pennant shape Shapes & annotations drawing tool', image: '/charts/thumbs/tool-triangle-dark-lg.png' },
89 + { slug: 'charts/tools/path', title: 'Path', section: 'charts', file: 'charts-tool-path', summary: 'A connected series of straight segments — trace a wave count, a route or a scenario.', hidden: true, keywords: 'path Polyline Multi-segment line Shapes & annotations drawing tool', image: '/charts/thumbs/tool-path-dark-lg.png' },
90 + { slug: 'charts/tools/brush', title: 'Brush', section: 'charts', file: 'charts-tool-brush', summary: 'Freehand drawing that follows the pointer — annotate like on paper.', hidden: true, keywords: 'brush Freehand Pen Shapes & annotations drawing tool', image: '/charts/thumbs/tool-brush-dark-lg.png' },
91 + { slug: 'charts/tools/arrow', title: 'Arrow', section: 'charts', file: 'charts-tool-arrow', summary: 'A line with an arrowhead — points from a cause to an effect, or marks a direction.', hidden: true, keywords: 'arrow Arrow line Pointer Shapes & annotations drawing tool', image: '/charts/thumbs/tool-arrow-dark-lg.png' },
92 + { slug: 'charts/tools/arrow-up', title: 'Arrow up marker', section: 'charts', file: 'charts-tool-arrow-up', summary: 'A small upward arrow under a bar — the standard mark for a long entry or a bullish signal.', hidden: true, keywords: 'arrow-up Buy marker Up arrow Shapes & annotations drawing tool', image: '/charts/thumbs/tool-arrow-up-dark-lg.png' },
93 + { slug: 'charts/tools/arrow-down', title: 'Arrow down marker', section: 'charts', file: 'charts-tool-arrow-down', summary: 'A small downward arrow above a bar — the standard mark for a sell, exit or bearish signal.', hidden: true, keywords: 'arrow-down Sell marker Down arrow Shapes & annotations drawing tool', image: '/charts/thumbs/tool-arrow-down-dark-lg.png' },
94 + { slug: 'charts/tools/text', title: 'Text', section: 'charts', file: 'charts-tool-text', summary: 'A text note anchored to a bar and a price — comment directly on the chart.', hidden: true, keywords: 'text Note Label Text & notes drawing tool', image: '/charts/thumbs/tool-text-dark-lg.png' },
95 + { slug: 'charts/tools/callout', title: 'Callout', section: 'charts', file: 'charts-tool-callout', summary: 'A text box with a pointer to the bar it explains — annotation that stays out of the way.', hidden: true, keywords: 'callout Speech bubble Annotation box Text & notes drawing tool', image: '/charts/thumbs/tool-callout-dark-lg.png' },
96 + { slug: 'charts/tools/price-label', title: 'Price label', section: 'charts', file: 'charts-tool-price-label', summary: 'A tag showing the exact price at the click — labels a level or a fill without a line.', hidden: true, keywords: 'price-label Price tag Price flag Text & notes drawing tool', image: '/charts/thumbs/tool-price-label-dark-lg.png' },
97 + { slug: 'charts/tools/flag', title: 'Flag', section: 'charts', file: 'charts-tool-flag', summary: 'A small flag pinned to a bar — bookmark an event or a signal.', hidden: true, keywords: 'flag Marker flag Bookmark Text & notes drawing tool', image: '/charts/thumbs/tool-flag-dark-lg.png' },
98 + { slug: 'charts/tools/measure', title: 'Measure', section: 'charts', file: 'charts-tool-measure', summary: 'Δ price, Δ %, bars and duration between two points — the chart\'s ruler.', hidden: true, keywords: 'measure Ruler Price-time ruler Measure & positions drawing tool', image: '/charts/thumbs/tool-measure-dark-lg.png' },
99 + { slug: 'charts/tools/price-range', title: 'Price range', section: 'charts', file: 'charts-tool-price-range', summary: 'Δ price and Δ % between two prices — a vertical ruler with the time left out.', hidden: true, keywords: 'price-range Vertical measure Price distance Measure & positions drawing tool', image: '/charts/thumbs/tool-price-range-dark-lg.png' },
100 + { slug: 'charts/tools/date-range', title: 'Date range', section: 'charts', file: 'charts-tool-date-range', summary: 'Bars and elapsed time between two dates — how long did it take?', hidden: true, keywords: 'date-range Time measure Bar counter Measure & positions drawing tool', image: '/charts/thumbs/tool-date-range-dark-lg.png' },
101 + { slug: 'charts/tools/date-price-range', title: 'Date & price range', section: 'charts', file: 'charts-tool-date-price-range', summary: 'A box with Δ price, Δ %, bars and duration — measures a swing in both dimensions.', hidden: true, keywords: 'date-price-range Box measure Range box Measure & positions drawing tool', image: '/charts/thumbs/tool-date-price-range-dark-lg.png' },
102 + { slug: 'charts/tools/vrange', title: 'Vertical range', section: 'charts', file: 'charts-tool-vrange', summary: 'A shaded band between two bars — highlights a session, an event window or a phase.', hidden: true, keywords: 'vrange Time band Session highlight Measure & positions drawing tool', image: '/charts/thumbs/tool-vrange-dark-lg.png' },
103 + { slug: 'charts/tools/long', title: 'Long position', section: 'charts', file: 'charts-tool-long', summary: 'Entry, target and stop of a long trade with the risk:reward — planned before the click.', hidden: true, keywords: 'long Long trade Buy setup Measure & positions drawing tool', image: '/charts/thumbs/tool-long-dark-lg.png' },
104 + { slug: 'charts/tools/short', title: 'Short position', section: 'charts', file: 'charts-tool-short', summary: 'Entry, target and stop of a short trade with the risk:reward — mirror of the long tool.', hidden: true, keywords: 'short Short trade Sell setup Measure & positions drawing tool', image: '/charts/thumbs/tool-short-dark-lg.png' },
105 + { slug: 'charts/tools/elliott-impulse', title: 'Elliott impulse wave (12345)', section: 'charts', file: 'charts-tool-elliott-impulse', summary: 'Labels a five-wave impulse 0–5 — three motive legs and two corrections with the trend.', hidden: true, keywords: 'elliott-impulse Impulse wave Five-wave motive Patterns drawing tool', image: '/charts/thumbs/tool-elliott-impulse-dark-lg.png' },
106 + { slug: 'charts/tools/elliott-correction', title: 'Elliott correction wave (ABC)', section: 'charts', file: 'charts-tool-elliott-correction', summary: 'Labels a three-wave correction 0-A-B-C — the pause between two impulses.', hidden: true, keywords: 'elliott-correction Corrective wave Three-wave correction Zigzag ABC Patterns drawing tool', image: '/charts/thumbs/tool-elliott-correction-dark-lg.png' },
107 + { slug: 'charts/tools/xabcd', title: 'XABCD pattern', section: 'charts', file: 'charts-tool-xabcd', summary: 'Five-point harmonic pattern with the AB/XA, BC/AB, CD/BC and AD/XA ratios printed live.', hidden: true, keywords: 'xabcd Harmonic pattern Gartley Bat / Butterfly / Crab Patterns drawing tool', image: '/charts/thumbs/tool-xabcd-dark-lg.png' },
108 + { slug: 'charts/tools/head-shoulders', title: 'Head & shoulders', section: 'charts', file: 'charts-tool-head-shoulders', summary: 'Seven-point reversal pattern: neckline through the two troughs, measured-move target.', hidden: true, keywords: 'head-shoulders H&S Inverse head and shoulders Patterns drawing tool', image: '/charts/thumbs/tool-head-shoulders-dark-lg.png' },
109 +]
modified hfmarketdata/web/src/docs/guides.js +11 −3
@@ -1,7 +1,11 @@
1 1 // Guides registry — the docs navigation tree. Each guide is an MDX file in content/guides (lazy chunk).
2 2 // To add a guide: drop the .mdx file, add one entry here (slug, title, section, file). Headings are indexed
3 −// automatically for search by the `virtual:guides-index` Vite plugin (see vite.config.js).
3 +// automatically for search by the `virtual:guides-index` Vite plugin (see vite.config.js). Optional fields:
4 +// `hidden` (not in the nav / home cards — still searchable, prerendered and in the sitemap), `keywords` (search),
5 +// `image` (OpenGraph image of the prerendered shell). The charts encyclopedia entries (102 sheets + 2 indexes) are
6 +// GENERATED into guides.charts.js by scripts/charts-docs.mjs from src/charts/catalog.
4 7 import guidesIndex from 'virtual:guides-index'
8 +import { CHARTS_GUIDES } from './guides.charts.js'
5 9
6 10 const mdx = import.meta.glob('../../content/guides/*.mdx')
7 11 const changelog = () => import('../../content/changelog.mdx')
@@ -9,13 +13,14 @@ const changelog = () => import('../../content/changelog.mdx')
9 13 export const SECTIONS = [
10 14 { id: 'start', title: 'Getting started' },
11 15 { id: 'guides', title: 'Guides' },
16 + { id: 'charts', title: 'Charts' },
12 17 { id: 'recipes', title: 'Recipes' },
13 18 { id: 'fundamentals', title: 'Fundamentals' },
14 19 { id: 'reference', title: 'Reference' },
15 20 { id: 'more', title: 'More' },
16 21 ]
17 22
18 −export const GUIDES = [
23 +const BASE_GUIDES = [
19 24 { slug: 'quickstart', title: 'Quickstart', section: 'start', file: 'quickstart', summary: 'Your first request in 30 seconds — no signup.' },
20 25 { slug: 'authentication', title: 'Authentication & API keys', section: 'start', file: 'authentication', summary: 'Keyless, free account, high usage — how keys work.' },
21 26 { slug: 'rate-limits', title: 'Rate limits', section: 'start', file: 'rate-limits', summary: 'Tiers, headers, handling 429, best practices.' },
@@ -24,7 +29,7 @@ export const GUIDES = [
24 29 { slug: 'options', title: 'Options chains & Greeks', section: 'guides', file: 'options', summary: 'End-of-day chains, IV, Greeks, contract histories.' },
25 30 { slug: 'time-zones', title: 'Time zones & sessions', section: 'guides', file: 'time-zones', summary: 'RTH / ETH, US/Eastern intraday stamps, UTC output in v2.' },
26 31 { slug: 'bulk-downloads', title: 'Bulk downloads', section: 'guides', file: 'bulk-downloads', summary: 'Whole-universe Parquet extracts outside the rows quota.' },
27 − { slug: 'charts', title: 'Charting', section: 'guides', file: 'charts', summary: 'The /charts page: shortcuts, tools, shareable URLs, data limits.' },
32 + { slug: 'charts', title: 'Charting', section: 'charts', file: 'charts', summary: 'The /charts page: shortcuts, tools, shareable URLs, data limits.' },
28 33 { slug: 'recipes/pandas-backtest', title: 'Backtest a strategy in pandas', section: 'recipes', file: 'recipe-pandas-backtest', summary: 'Moving-average crossover on ES continuous, end to end.' },
29 34 { slug: 'recipes/custom-continuous', title: 'Build a custom continuous contract', section: 'recipes', file: 'recipe-custom-continuous', summary: 'Stitch individual contracts with your own roll rule.' },
30 35 { slug: 'recipes/crude-term-structure', title: 'Analyse crude oil term structure', section: 'recipes', file: 'recipe-crude-term-structure', summary: 'Contango / backwardation from the CL curve.' },
@@ -38,6 +43,9 @@ export const GUIDES = [
38 43 { slug: 'versioning', title: 'Versioning & deprecation policy', section: 'more', file: 'versioning', summary: 'What can change, and how we tell you.' },
39 44 ]
40 45
46 +// The encyclopedia sits right after the Charting guide so prev / next flows naturally.
47 +export const GUIDES = BASE_GUIDES.flatMap(g => (g.slug === 'charts' ? [g, ...CHARTS_GUIDES] : [g]))
48 +
41 49 // Non-MDX entries rendered by dedicated components (kept here so nav + search see them).
42 50 export const STATIC_PAGES = [
43 51 { slug: 'errors', title: 'Errors', section: 'more', summary: 'Every error code, with meaning and fix.' },
modified hfmarketdata/web/src/docs/mdx-components.jsx +3 −0
@@ -10,6 +10,8 @@ import Table from '../components/Table.jsx'
10 10 import Tabs from '../components/Tabs.jsx'
11 11 import { MdLink } from '../components/Markdown.jsx'
12 12 import { PUBLIC_BASE } from '../app/api.js'
13 +import { ChartFigure } from '../charts/catalog/ChartFigure.jsx'
14 +import { CatalogGrid, CatalogMeta } from '../charts/catalog/DocsBlocks.jsx'
13 15
14 16 export const slugify = s => s.toLowerCase().replace(/[`*_]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
15 17
@@ -68,4 +70,5 @@ export const mdxComponents = {
68 70 a: ({ href, children }) => <MdLink href={href}>{children}</MdLink>,
69 71 table: ({ children }) => <div className="table-wrap"><table>{children}</table></div>,
70 72 Callout, CodeTabs, Tabs, Table, Badge, MethodBadge, Code, Endpoint, TryIt, Url, Figure, Link,
73 + ChartFigure, CatalogGrid, CatalogMeta, // charts encyclopedia (generated pages)
71 74 }
modified hfmarketdata/web/src/docs/search.js +2 −1
@@ -6,7 +6,8 @@ export function buildIndex(spec) {
6 6 const items = []
7 7 const sectionTitle = id => SECTIONS.find(s => s.id === id)?.title || ''
8 8 for (const g of GUIDES) {
9 − items.push({ type: 'guide', title: g.title, sub: g.summary, href: guideHref(g), group: sectionTitle(g.section), keywords: g.slug })
9 + items.push({ type: 'guide', title: g.title, sub: g.summary, href: guideHref(g), group: sectionTitle(g.section), keywords: `${g.slug} ${g.keywords || ''}` })
10 + if (g.hidden) continue // encyclopedia sheets share the same headings: only the page itself is indexed
10 11 for (const h of guideHeadings(g)) {
11 12 items.push({ type: 'heading', title: h.text, sub: g.title, href: `${guideHref(g)}#${h.id}`, group: sectionTitle(g.section), keywords: '' })
12 13 }
modified hfmarketdata/web/src/pages/docs/DocsHome.jsx +1 −1
@@ -34,7 +34,7 @@ export default function DocsHome() {
34 34 <section key={s.id}>
35 35 <h2 id={s.id}>{s.title}</h2>
36 36 <div className="docs-home-grid">
37 − {GUIDES.filter(g => g.section === s.id).map(g => (
37 + {GUIDES.filter(g => g.section === s.id && !g.hidden).map(g => (
38 38 <Link key={g.slug} to={guideHref(g)} className="docs-home-card"><h3>{g.title}</h3><p>{g.summary}</p></Link>
39 39 ))}
40 40 </div>
modified hfmarketdata/web/src/pages/docs/DocsLayout.jsx +2 −2
@@ -61,7 +61,7 @@ export function DocsNav({ open }) {
61 61 {SECTIONS.filter(s => s.id !== 'reference' && s.id !== 'more').map(s => (
62 62 <div className="docs-nav-section" key={s.id}>
63 63 <div className="docs-nav-title">{s.title}</div>
64 − {GUIDES.filter(g => g.section === s.id).map(g => <NavLink key={g.slug} to={guideHref(g)}>{g.title}</NavLink>)}
64 + {GUIDES.filter(g => g.section === s.id && !g.hidden).map(g => <NavLink key={g.slug} to={guideHref(g)}>{g.title}</NavLink>)}
65 65 </div>
66 66 ))}
67 67 <div className="docs-nav-section">
@@ -81,7 +81,7 @@ export function DocsNav({ open }) {
81 81 </div>
82 82 <div className="docs-nav-section">
83 83 <div className="docs-nav-title">More</div>
84 − {GUIDES.filter(g => g.section === 'more').map(g => <NavLink key={g.slug} to={guideHref(g)}>{g.title}</NavLink>)}
84 + {GUIDES.filter(g => g.section === 'more' && !g.hidden).map(g => <NavLink key={g.slug} to={guideHref(g)}>{g.title}</NavLink>)}
85 85 {STATIC_PAGES.filter(p => p.slug !== 'errors').map(p => <NavLink key={p.slug} to={`/docs/${p.slug}`}>{p.title}</NavLink>)}
86 86 {EXTERNAL_LINKS.map(l => <NavLink key={l.href} to={l.href}>{l.title}</NavLink>)}
87 87 <a href={`${PUBLIC_BASE}/openapi.json`}>openapi.json ↗</a>
modified hfmarketdata/web/src/pages/docs/GuidePage.jsx +9 −2
@@ -47,7 +47,7 @@ export default function GuidePage({ slug }) {
47 47 )
48 48 const Content = mod?.default
49 49 return (
50 − <DocPage crumbs={[{ label: sectionTitle(guide.section) }, { label: guide.title }]} panel={panel} testId="guide-page"
50 + <DocPage crumbs={crumbsFor(guide)} panel={panel} testId="guide-page"
51 51 after={<PrevNext prev={prev && { href: guideHref(prev), title: prev.title }} next={next && { href: guideHref(next), title: next.title }} />}>
52 52 {error && <p role="alert" className="muted">Could not load this guide ({String(error.message || error)}).</p>}
53 53 {!mod && !error && <p className="muted" aria-busy="true">Loading…</p>}
@@ -60,6 +60,13 @@ export default function GuidePage({ slug }) {
60 60 )
61 61 }
62 62
63 +/** Encyclopedia sheets get their index page as an intermediate crumb. */
64 +function crumbsFor(guide) {
65 + const m = /^charts\/(indicators|tools)\/.+$/.exec(guide.slug)
66 + if (m) return [{ label: 'Charts' }, { label: m[1] === 'tools' ? 'Drawing tools' : 'Indicators', href: `/docs/charts/${m[1]}` }, { label: guide.title }]
67 + return [{ label: sectionTitle(guide.section) }, { label: guide.title }]
68 +}
69 +
63 70 function sectionTitle(id) {
64 − return { start: 'Getting started', guides: 'Guides', recipes: 'Recipes', fundamentals: 'Fundamentals', more: 'More' }[id] || 'Docs'
71 + return { start: 'Getting started', guides: 'Guides', charts: 'Charts', recipes: 'Recipes', fundamentals: 'Fundamentals', more: 'More' }[id] || 'Docs'
65 72 }
modified hfmarketdata/web/src/pages/docs/docs.css +16 −0
@@ -151,3 +151,19 @@
151 151 .error-row { grid-template-columns: 1fr; gap: 4px; }
152 152 .params-table.table-stack td { grid-template-columns: 84px minmax(0, 1fr); }
153 153 }
154 +
155 +/* ---- charts encyclopedia (generated pages) ---- */
156 +.ch-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 26px; }
157 +.ch-docs-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); color: var(--fg); text-decoration: none; }
158 +.ch-docs-card:hover { border-color: var(--line-3); text-decoration: none; background: var(--bg-2); }
159 +.ch-docs-card img, .ch-docs-card .ch-thumb-missing { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-sm); border: 1px solid var(--line); }
160 +.ch-docs-card-body { display: grid; gap: 2px; padding: 0 4px 4px; font-size: var(--fs-1); }
161 +.ch-docs-card-body strong { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
162 +.ch-docs-card-body small { color: var(--fg-3); font-weight: 400; }
163 +.ch-docs-card-body kbd { margin-left: auto; font-size: 10px; color: var(--fg-3); }
164 +.ch-docs-card-body span { color: var(--fg-2); font-size: var(--fs-0); line-height: 1.35; }
165 +.ch-docs-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: -12px 0 22px; }
166 +.ch-docs-tags { display: flex; flex-wrap: wrap; gap: 4px; }
167 +.ch-docs-tags .ch-tag { padding: 0 8px; border-radius: 4px; background: var(--bg-2); color: var(--fg-2); font-size: 11px; line-height: 20px; }
168 +.ch-docs-tags .ch-tag kbd { font-size: 10px; }
169 +.prose .ch-figure img { width: 100%; height: auto; }
154 170