#151 - Price (USD) chart Y-axis renders negative values — price scale extends below zero - code/cl8y-dex-terraclassic

totdking commented

2026-05-07 17:29:07 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-07 17:31:02 +00:00

(Migrated from gitlab.com)

Issue Summary

The Price (USD) chart on /trade renders a Y-axis that extends into negative price territory (−25.00, −50.00 visible on screen). Asset prices cannot be negative. The chart scale is miscalculated or auto-scaled incorrectly, producing a misleading axis that a trader would reasonably interpret as a data or rendering error.

Reproduction Steps

Navigate to /trade
Select any pair (e.g. EMBER/CORAL)
Observe the Price (USD) chart Y-axis
Note values below zero visible on the axis (e.g. −25.00, −50.00)

Expected Behavior

The Y-axis minimum should be clamped to 0 or to the lowest price in the visible data range — whichever is higher. Negative price values should never appear on a price chart.

Actual Behavior

The Y-axis auto-scales below zero, rendering negative price values (−25.00, −50.00) on the axis. The candles themselves render above zero but the axis extends well below the lowest candle, producing dead negative space and a misleading scale.

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	1470×864
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev`

Wallet / Device Details

Wallet: Station browser extension & simulated dev wallet
Wallet state: Connected — localterra
Pair tested: EMBER/CORAL

Screenshots

See attached screenshot showing the Price (USD) chart Y-axis with negative values (−25.00, −50.00) visible below the candle range.

{width=806 height=600}

Severity / Impact

P2 Polish. No funds are at risk and trades are not blocked. However a negative price axis is visually wrong and would cause any CEX-migrant trader to question whether the chart data is reliable. Undermines trust in the price surface at a glance. Found under W6-C1/C3 (Chart rendering — Display dimension).

cc: @PlasticDigits

### Issue Summary The Price (USD) chart on `/trade` renders a Y-axis that extends into negative price territory (−25.00, −50.00 visible on screen). Asset prices cannot be negative. The chart scale is miscalculated or auto-scaled incorrectly, producing a misleading axis that a trader would reasonably interpret as a data or rendering error. --- ### Reproduction Steps 1. Navigate to `/trade` 2. Select any pair (e.g. EMBER/CORAL) 3. Observe the Price (USD) chart Y-axis 4. Note values below zero visible on the axis (e.g. −25.00, −50.00) --- ### Expected Behavior The Y-axis minimum should be clamped to 0 or to the lowest price in the visible data range — whichever is higher. Negative price values should never appear on a price chart. --- ### Actual Behavior The Y-axis auto-scales below zero, rendering negative price values (−25.00, −50.00) on the axis. The candles themselves render above zero but the axis extends well below the lowest candle, producing dead negative space and a misleading scale. --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | 1470×864 | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | --- ### Wallet / Device Details - **Wallet:** Station browser extension & simulated dev wallet - **Wallet state:** Connected — localterra - **Pair tested:** EMBER/CORAL --- ### Screenshots > See attached screenshot showing the Price (USD) chart Y-axis with negative values (−25.00, −50.00) visible below the candle range. ![image.png](/uploads/2ec81ff4d72b9e48ef4829ca0c616556/image.png){width=806 height=600} --- ### Severity / Impact **P2 Polish.** No funds are at risk and trades are not blocked. However a negative price axis is visually wrong and would cause any CEX-migrant trader to question whether the chart data is reliable. Undermines trust in the price surface at a glance. Found under **W6-C1/C3** (Chart rendering — Display dimension). cc: @PlasticDigits

totdking commented

2026-05-07 17:32:42 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-09 09:33:02 +00:00

(Migrated from gitlab.com)

mentioned in commit 28ceabb1f8

mentioned in commit 28ceabb1f8fa7ce0c2399f70ead465fbb3b348da

PlasticDigits commented

2026-05-09 09:33:41 +00:00

(Migrated from gitlab.com)

Fix shipped on `main` (`28ceabb`)

What changed

Root cause: TradingView lightweight-charts autoscale was extending the candlestick pane’s right price scale below zero (padding), so the Price (USD) Y-axis could show negative tick labels even when OHLC values were positive.
Fix: Added an autoscaleInfoProvider on the candlestick series in PriceChartLightweightCanvas.tsx that composes with the default autoscale, then clamps priceRange.minValue to at least max(0, min(low) over logically visible bars). Pure logic lives in frontend-dapp/src/components/charts/priceChartPriceScale.ts with Vitest coverage in __tests__/priceChartPriceScale.test.ts.
Docs: docs/frontend.md § Trade page — price chart invariants (anchor #trade-page-price-chart-invariants) + new agent playbook skills/AGENTS_FRONTEND_PRICE_CHART.md (cross-linked from AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md).

Verification checklist (for QA / reviewers)

/trade → pick a pair with USD candles → Price (USD) chart: no negative values on the right-hand price scale.
Same on /charts with an active pair (shared PriceChart component).
Pan/zoom the time range: scale still never dips below zero and stays at or below the lowest visible candle low (no bogus negative “dead” band under the wicks).
cd frontend-dapp && npm run test -- --run src/components/charts/__tests__/priceChartPriceScale.test.ts passes.

@totdking could you confirm on your localterra + Chrome setup from the issue description? Leaving the issue open until you verify.

/cc @PlasticDigits

## Fix shipped on `main` (28ceabb) ### What changed - **Root cause:** TradingView **lightweight-charts** autoscale was extending the candlestick pane’s right price scale below **zero** (padding), so the **Price (USD)** Y-axis could show negative tick labels even when OHLC values were positive. - **Fix:** Added an `autoscaleInfoProvider` on the candlestick series in `PriceChartLightweightCanvas.tsx` that composes with the default autoscale, then clamps `priceRange.minValue` to at least `max(0, min(`low`) over logically visible bars)`. Pure logic lives in `frontend-dapp/src/components/charts/priceChartPriceScale.ts` with Vitest coverage in `__tests__/priceChartPriceScale.test.ts`. - **Docs:** `docs/frontend.md` § *Trade page — price chart invariants* (anchor `#trade-page-price-chart-invariants`) + new agent playbook `skills/AGENTS_FRONTEND_PRICE_CHART.md` (cross-linked from `AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md`). ### Verification checklist (for QA / reviewers) - [ ] `/trade` → pick a pair with USD candles → **Price (USD)** chart: **no negative values** on the right-hand price scale. - [ ] Same on `/charts` with an active pair (shared `PriceChart` component). - [ ] Pan/zoom the time range: scale still **never dips below zero** and stays **at or below** the lowest visible candle low (no bogus negative “dead” band under the wicks). - [ ] `cd frontend-dapp && npm run test -- --run src/components/charts/__tests__/priceChartPriceScale.test.ts` passes. @totdking could you confirm on your **localterra** + Chrome setup from the issue description? Leaving the issue **open** until you verify. /cc @PlasticDigits

PlasticDigits commented

2026-05-09 09:38:55 +00:00

(Migrated from gitlab.com)

mentioned in commit 9ded951a86

mentioned in commit 9ded951a866811a414ef3cbdcabfb4b05e021e28

PlasticDigits commented

2026-05-09 09:39:17 +00:00

(Migrated from gitlab.com)

mentioned in issue #149

PlasticDigits commented

2026-05-09 09:42:14 +00:00

(Migrated from gitlab.com)

mentioned in commit a153784cd3

mentioned in commit a153784cd3618551955b5af11c6eea1f7ba6235b

PlasticDigits commented

2026-05-09 09:42:29 +00:00

(Migrated from gitlab.com)

mentioned in issue #150

totdking commented

2026-05-11 12:29:00 +00:00

(Migrated from gitlab.com)

Verification checklist (for QA / reviewers)

/trade → pick a pair with USD candles → Price (USD) chart: no negative values on the right-hand price scale.
Same on /charts with an active pair (shared PriceChart component).
Pan/zoom the time range: scale still never dips below zero and stays at or below the lowest visible candle low (no bogus negative “dead” band under the wicks).
cd frontend-dapp && npm run test -- --run src/components/charts/__tests__/priceChartPriceScale.test.ts passes.

I cannot verify any of the following due to this

{width=900 height=544}

The chart part does not display on first sight which bleeds into #151 , #150 , #148 . thereby not allowing me to test and verify any of the fixes

cc -

@PlasticDigits

### Verification checklist (for QA / reviewers) * [ ] `/trade` → pick a pair with USD candles → **Price (USD)** chart: **no negative values** on the right-hand price scale. * [ ] Same on `/charts` with an active pair (shared `PriceChart` component). * [ ] Pan/zoom the time range: scale still **never dips below zero** and stays **at or below** the lowest visible candle low (no bogus negative “dead” band under the wicks). * [ ] `cd frontend-dapp && npm run test -- --run src/components/charts/__tests__/priceChartPriceScale.test.ts` passes. I cannot verify any of the following due to this ![image.png](/uploads/a0531fc8ac3ca93a2576ea02e5cf032c/image.png){width=900 height=544} The chart part does not display on first sight which bleeds into #151 , #150 , #148 . thereby not allowing me to test and verify any of the fixes cc - @PlasticDigits

PlasticDigits commented

2026-05-12 07:43:10 +00:00

(Migrated from gitlab.com)

mentioned in commit f881ec5c15

mentioned in commit f881ec5c15204a7cb6916165af7eb4b67ec8ea18

PlasticDigits commented

2026-05-12 07:43:30 +00:00

(Migrated from gitlab.com)

Update (main @ `f881ec5`) — chart viewport / first paint (#151 follow-up)

Context: The USD Y-axis autoscale clamp from earlier work remains in `priceChartPriceScale.ts` + `autoscaleInfoProvider`. @totdking reported the candle area missing on first sight (hard to verify the axis fix). Root cause for the blank region: the plot wrapper used a fixed `h-[min(52vh,560px)]` while the desktop chart cell is `overflow-hidden` inside a `react-resizable-panels` row — header + fixed plot height could exceed the panel, clipping the canvas below the fold.

What changed

`PriceChart.tsx`: root `h-full min-h-0`; plot area `flex-1 min-h-0` with `min-h-[min(52vh,280px)]` (no fixed 560px block); fullscreen branch unchanged.
`TradePage.tsx`: desktop chart shell `flex flex-col min-h-0`; sub-lg chart `card-neo` `flex flex-col min-h-0` so height flows to `PriceChart`.
`PriceChartLightweightCanvas.tsx`: double `requestAnimationFrame` → `applySize()` after `createChart` so width/height match post-layout flex/grid.
Docs: `docs/frontend.md` (price chart + responsive layout invariants) and `./skills/` playbooks cross-linked.

Verification checklist (please tick on your localterra + Chrome setup)

`/trade` with a pair that has candles: candles + volume visible immediately (no empty band where the chart should be) at ~1470×864 and after a desktop panel resize.
Price (USD) right scale: no negative tick labels when OHLC is positive (original #151).
`/charts` with the same pair: chart still has a sensible minimum height and is not clipped.
`cd frontend-dapp && npx vitest run src/components/charts/tests/priceChartPriceScale.test.ts src/components/charts/tests/PriceChart.test.tsx src/pages/TradePage.test.tsx`

@totdking — could you re-verify on your environment and confirm whether the chart is visible on first load? Leaving the issue open per instructions.

/cc @PlasticDigits

## Update (main @ f881ec5) — chart viewport / first paint (#151 follow-up) **Context:** The USD Y-axis autoscale clamp from earlier work remains in \`priceChartPriceScale.ts\` + \`autoscaleInfoProvider\`. @totdking reported the **candle area missing on first sight** (hard to verify the axis fix). Root cause for the blank region: the plot wrapper used a **fixed** \`h-[min(52vh,560px)]\` while the desktop chart cell is **\`overflow-hidden\`** inside a **\`react-resizable-panels\`** row — **header + fixed plot height** could exceed the panel, **clipping the canvas** below the fold. **What changed** - \`PriceChart.tsx\`: root **\`h-full min-h-0\`**; plot area **\`flex-1 min-h-0\`** with **\`min-h-[min(52vh,280px)]\`** (no fixed 560px block); fullscreen branch unchanged. - \`TradePage.tsx\`: desktop chart shell **\`flex flex-col min-h-0\`**; sub-lg chart **\`card-neo\`** **\`flex flex-col min-h-0\`** so height flows to \`PriceChart\`. - \`PriceChartLightweightCanvas.tsx\`: **double \`requestAnimationFrame\`** → \`applySize()\` after \`createChart\` so width/height match post-layout flex/grid. - Docs: \`docs/frontend.md\` (price chart + responsive layout invariants) and **\`./skills/\`** playbooks cross-linked. **Verification checklist** (please tick on your **localterra + Chrome** setup) - [ ] \`/trade\` with a pair that has candles: **candles + volume visible immediately** (no empty band where the chart should be) at **~1470×864** and after a **desktop panel resize**. - [ ] **Price (USD)** right scale: **no negative tick labels** when OHLC is positive (original #151). - [ ] \`/charts\` with the same pair: chart still has a **sensible minimum height** and is not clipped. - [ ] \`cd frontend-dapp && npx vitest run src/components/charts/__tests__/priceChartPriceScale.test.ts src/components/charts/__tests__/PriceChart.test.tsx src/pages/TradePage.test.tsx\` @totdking — could you **re-verify** on your environment and confirm whether the chart is visible on first load? Leaving the issue **open** per instructions. /cc @PlasticDigits

Brouie commented

2026-05-13 02:02:58 +00:00

(Migrated from gitlab.com)

walked the chart visibility fix at HEAD 94adb5f.

Source

PriceChart.tsx + PriceChartLightweightCanvas.tsx + TradePage.tsx + 2 skill docs
min-h-[min(52vh,280px)] floor replaces the old fixed min(52vh,560px)
flex-1 + h-full + flex-col chain symmetric across sub-lg grid card and lg+ PanelGroup card
double rAF reapplies canvas size after layout settle (standard pattern)
PanelGroup minSize (30 / 35) unchanged so the fix is visibility-only, doesn't force expansion

Tests

src/components/charts/tests/ — 36/36 pass across 5 files
src/pages/TradePage.test.tsx — 3/3 pass
no regressions

Live walk on localnet @ 94adb5f

/trade renders cleanly, chart visible
dragged right divider to shrink chart to minimum width — chart canvas stayed visible, volume bar held, price axis labels held, candle drawn
dragged left divider back to expand — chart re-rendered cleanly, no stuck pixels, no canvas blank-out
ran shrink/expand cycle 4x, no degradation

Notes for follow-up walks

#146 (responsive sub-lg) and #150 (chart indicators + volume) intersect with this fix — will cover both in their own walks against the same chart panel chain
desktop wide (>1280px) was the primary walk; tablet portrait (768-1023px) coverage is part of #146 walk

ready for close on your side.

walked the chart visibility fix at HEAD 94adb5f. **Source** - PriceChart.tsx + PriceChartLightweightCanvas.tsx + TradePage.tsx + 2 skill docs - min-h-[min(52vh,280px)] floor replaces the old fixed min(52vh,560px) - flex-1 + h-full + flex-col chain symmetric across sub-lg grid card and lg+ PanelGroup card - double rAF reapplies canvas size after layout settle (standard pattern) - PanelGroup minSize (30 / 35) unchanged so the fix is visibility-only, doesn't force expansion **Tests** - src/components/charts/__tests__/ — 36/36 pass across 5 files - src/pages/TradePage.test.tsx — 3/3 pass - no regressions **Live walk on localnet @ 94adb5f** - /trade renders cleanly, chart visible - dragged right divider to shrink chart to minimum width — chart canvas stayed visible, volume bar held, price axis labels held, candle drawn - dragged left divider back to expand — chart re-rendered cleanly, no stuck pixels, no canvas blank-out - ran shrink/expand cycle 4x, no degradation **Notes for follow-up walks** - #146 (responsive sub-lg) and #150 (chart indicators + volume) intersect with this fix — will cover both in their own walks against the same chart panel chain - desktop wide (>1280px) was the primary walk; tablet portrait (768-1023px) coverage is part of #146 walk ready for close on your side.

Brouie commented

2026-05-13 02:12:02 +00:00

(Migrated from gitlab.com)

correction on the prior note — walking your checklist item 3 (/charts route, sensible min height, not clipped) surfaces a regression. flagging before close.

/charts route at HEAD 94adb5f — FAIL

chart canvas mounts but the visible plot area is blank white
on hard reload, chart renders for ~0.2s then collapses to white
DevTools shows the canvas itself is the issue:

<canvas style="width: 964px; height: 3.35543e+07px; position: absolute; z-index: 1; left: 0px; top: 0px;" width="964" height="33554280">

canvas height = 33,554,280 px (33M+ pixels tall)
parent table cell matches: height: 3.35544e+07px; width: 1034px
selector chain: div.min-h-[min(52vh,280px)] > div.w-full.h-full.min-h-[320px] > div.tv-lightweight-charts > table > tr > td > div > canvas

Root cause hypothesis

f881ec5 added flex-1 min-h-0 + min-h-[min(52vh,280px)] on PriceChart
on /trade this is fine — react-resizable-panels parent constrains the chart panel to a bounded row height
on /charts the chart sits in a page layout with no react-resizable-panels parent and no fixed grid row sizes
flex-1 + the h-full chain resolves against an unbounded ancestor, so available height is the entire page-min-height
result: chart panel claims thousands of viewport heights, canvas renders at 33M px tall, visible viewport falls in the blank top portion

Other checklist items

(1) /trade with candles + volume: PASS — resize cycle clean, no canvas blank-out, floor held
(2) Price (USD) right scale no negative ticks: PASS — visible labels (0.99 / 0.98 / 0.97) all positive
(3) /charts sensible min height not clipped: FAIL (see above)
(4) targeted vitest run: PASS — 36/36 chart tests + 3/3 TradePage tests (covered priceChartPriceScale + PriceChart + TradePage)

Fix suggestion

/charts page chart container needs an upper bound on height (max-h, or a fixed h on the wrapping shell, or a flex parent with bounded height)
alternative: PriceChart could fall back to its old fixed h-[min(52vh,560px)] when no resizable-panel parent is detected, but that defeats #151's original fix scope

leaving #151 open. happy to retest once a constraint lands on /charts side.

/cc @PlasticDigits

correction on the prior note — walking your checklist item 3 (`/charts` route, sensible min height, not clipped) surfaces a regression. flagging before close. **`/charts` route at HEAD 94adb5f — FAIL** - chart canvas mounts but the visible plot area is blank white - on hard reload, chart renders for ~0.2s then collapses to white - DevTools shows the canvas itself is the issue: ``` <canvas style="width: 964px; height: 3.35543e+07px; position: absolute; z-index: 1; left: 0px; top: 0px;" width="964" height="33554280"> ``` - canvas height = 33,554,280 px (33M+ pixels tall) - parent table cell matches: `height: 3.35544e+07px; width: 1034px` - selector chain: `div.min-h-[min(52vh,280px)] > div.w-full.h-full.min-h-[320px] > div.tv-lightweight-charts > table > tr > td > div > canvas` **Root cause hypothesis** - f881ec5 added `flex-1 min-h-0` + `min-h-[min(52vh,280px)]` on PriceChart - on `/trade` this is fine — react-resizable-panels parent constrains the chart panel to a bounded row height - on `/charts` the chart sits in a page layout with no react-resizable-panels parent and no fixed grid row sizes - `flex-1` + the `h-full` chain resolves against an unbounded ancestor, so available height is the entire page-min-height - result: chart panel claims thousands of viewport heights, canvas renders at 33M px tall, visible viewport falls in the blank top portion **Other checklist items** - (1) `/trade` with candles + volume: PASS — resize cycle clean, no canvas blank-out, floor held - (2) Price (USD) right scale no negative ticks: PASS — visible labels (0.99 / 0.98 / 0.97) all positive - (3) `/charts` sensible min height not clipped: **FAIL** (see above) - (4) targeted vitest run: PASS — 36/36 chart tests + 3/3 TradePage tests (covered priceChartPriceScale + PriceChart + TradePage) **Fix suggestion** - /charts page chart container needs an upper bound on height (max-h, or a fixed h on the wrapping shell, or a flex parent with bounded height) - alternative: PriceChart could fall back to its old fixed `h-[min(52vh,560px)]` when no resizable-panel parent is detected, but that defeats #151's original fix scope leaving #151 open. happy to retest once a constraint lands on /charts side. /cc @PlasticDigits

Brouie commented

2026-05-13 02:25:09 +00:00

(Migrated from gitlab.com)

mentioned in commit 84dcae96e2

mentioned in commit 84dcae96e226f0a1c975beb737bb9dfaac76adb8

Brouie commented

2026-05-13 02:27:20 +00:00

(Migrated from gitlab.com)

mentioned in merge request !731

Brouie commented

2026-05-13 02:28:57 +00:00

(Migrated from gitlab.com)

mr !731 opened for the /charts canvas bound — https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/13

scope: wraps PriceChart on /charts in h-[min(70vh,720px)] so the flex chain has a bounded parent. /trade fix from f881ec5 unaffected.

leaving #151 close decision to you — happy to retest the full checklist post-merge if you want.

mr !731 opened for the /charts canvas bound — https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/13 scope: wraps PriceChart on /charts in h-[min(70vh,720px)] so the flex chain has a bounded parent. /trade fix from f881ec5 unaffected. leaving #151 close decision to you — happy to retest the full checklist post-merge if you want.

Brouie commented

2026-05-13 02:29:39 +00:00

(Migrated from gitlab.com)

{width=900 height=483}