Visible OHLC autoscaling

Run Stop Open full page

Read as Markdown

Derive a padded linear domain from complete candles in one visible window.

APIs demonstrated

• visibleOhlcPriceExtent from @pibbl/core/viz
• padLinearDomain from @pibbl/core/viz
• PadLinearDomainOptions from @pibbl/core/viz
• VisibleOhlcPriceExtentOptions from @pibbl/core/viz

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import { CandlestickSeries, LinearScale, TradingTimeScale, padLinearDomain, useTradingTimeScale, visibleOhlcPriceExtent, type PadLinearDomainOptions, type VisibleOhlcPriceExtentOptions } from "@pibbl/core/viz";
import { Rectangle, Text, pibbl } from "@pibbl/core";
const bars = [{ time: Date.UTC(2026, 9, 5), open: 100, high: 103, low: 99, close: 102 }, { time: Date.UTC(2026, 9, 6), open: 102, high: 150, low: 50, close: 103 }, { time: Date.UTC(2026, 9, 7), open: 103, high: 104, low: 100, close: 102 }];
function Price() {
  const scale = useTradingTimeScale("time").get();
  const extentOptions: VisibleOhlcPriceExtentOptions<(typeof bars)[number]> = { time: "time", open: "open", high: "high", low: "low", close: "close", positionAtTime: (time) => scale.slotAtTime(time), visibleRange: scale.logicalRange };
  const extent = visibleOhlcPriceExtent(bars, extentOptions);
  const padding: PadLinearDomainOptions = { padding: 0.1 };
  const visible = bars.filter((bar) => {
    const slot = scale.slotAtTime(bar.time)!;
    return slot >= Math.min(...scale.logicalRange) && slot <= Math.max(...scale.logicalRange);
  });
  return <LinearScale id="price" domain={padLinearDomain(extent!, padding)} range={[165, 40]}>
    <Rectangle style={{ left: 30, top: 40, width: 260, height: 125, fill: "#f6f8fb" }} />
    <Text style={{ left: 30, top: 12, font: "11px sans-serif", fill: "#18283d" }}>Only the final candle is visible; the middle extreme is excluded.</Text>
    <CandlestickSeries data={visible} time="time" open="open" high="high" low="low" close="close" xScale="time" yScale="price" />
  </LinearScale>;
}
const canvas = document.createElement("canvas"); canvas.width = 320; canvas.height = 190; document.body.append(canvas);
const controller = pibbl(canvas, <TradingTimeScale id="time" timestamps={bars.map((bar) => bar.time)} logicalRange={[1.5, 2.5]} range={[30, 290]}><Price /></TradingTimeScale>);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

Documentation version

Documentation built with @pibbl/core 0.0.2, revision dd39ce2. ALPHA — NOT FOR PRODUCTION USE.