gloomberb 0.7.2 → 0.7.3

package/README.md

@@ -1,30 +1,70 @@
 <div align="center">
 
-<img src="src/assets/gloomberb-logo.png" alt="Gloomberb logo" width="96" />
+<img src="https://gloomberb.com/gloomberb-logo-grayscale.svg" alt="Gloomberb logo" width="76" />
 
 # Gloomberb
 
-**Modern extensible financial terminal.**
+**Open-source finance terminal. Fast, keyboard-driven and extensible.**
 
-> The Bloomberb Terminal for the rest of us.
+Available as a desktop app or TUI.
 
-<img src="https://gloomberb.com/landing-terminal.png" alt="Gloomberb terminal screenshot" width="720" />
+<a href="https://gloomberb.com/download/desktop"><strong>Download desktop for Mac</strong></a>
+
+<br />
+<br />
+
+<img src="https://gloomberb.com/landing-terminal.png" alt="Gloomberb terminal showing portfolio, watchlists, market data, and chart panels." width="720" />
 
 </div>
 
-## ✨ Features
+## Functions
+
+Open the command bar with `Ctrl+P` or `` ` ``, then type a shortcut or command name.
+
+| Shortcut | Function |
+|----------|----------|
+| `DES <ticker>` | Security details for a ticker |
+| `QQ <tickers>` | Ticker quote monitor |
+| `PM <query>` | Polymarket and Kalshi prediction data |
+| `TOP` | Ranked market stories |
+| `MOST` | Top gainers, losers, most active, and trending tickers |
+| `WEI` | Global equity indices |
+| `ECON` | Economic events and releases |
+| `CMP <tickers>` | Ticker charts |
+| `CORR <tickers>` | Ticker return correlations |
+| `ANR <ticker>` | Analyst targets and ratings |
+| `SEC <ticker>` | SEC filings and company disclosures |
+| `TWIT <query>` | Ticker-related market posts |
+| `OMON <ticker>` | Options monitor |
+| `PORT` | Portfolio risk and sector exposure |
+| `BI` / `SP` | S&P 500 sector performance |
+| `FXC` | Major FX cross rates |
+| `FNG` | Fear and greed market gauge |
+| `ALRT` | Price alerts |
+| `CHAT` | Gloomberb Cloud chat |
+| `PF` | Portfolio and watchlist workspace |
+| `N` | News feed |
+| `CN <ticker>` | Ticker news |
+| `NI` | Sector news |
+| `FIRST` | Breaking news |
+| `NOTE` | Notes |
+| `AI <prompt>` | AI screener |
+| `GC` | Yield curve |
+| `ERN` | Earnings calendar |
+| `HDS <ticker>` | Institutional holders |
+| `INS <ticker>` | Insider activity |
+| `EVT <ticker>` | Corporate actions |
+| `RV <tickers>` | Relative valuation |
+| `IBKR` | IBKR trading pane |
+| `BR` | Broker connections |
+
+## Install
 
-- **Track portfolios & trade**
-- **Real-time quotes & fundamentals**
-- **Beautiful high-rez charts**
-- **Fast & keyboard-driven**
-- **Powerful layouts**
-- **Extensible**
-- **100% local**
+Desktop:
 
-For the best experience, use a [Kitty](https://sw.kovidgoyal.net/kitty/)-compatible terminal such as Ghostty, Kitty or WezTerm.
+- [Download Gloomberb for Mac](https://gloomberb.com/download/desktop)
 
-## 🚀 Install
+Terminal UI:
 
 ```bash
 curl -fsSL gloomberb.com/install | bash
@@ -32,139 +72,46 @@ curl -fsSL gloomberb.com/install | bash
 bun install -g gloomberb
 ```
 
-Then run `gloomberb`.
-
-## 🧩 Plugins
-
-Everything, from the portfolio list to broker integrations, is a plugin. 
-
-Plugins can add tabs, columns, command bar commands, CLI commands, status bar widgets, and more.
-
-See **[PLUGINS.md](PLUGINS.md)** for the plugin API and the shared UI surface available through `gloomberb/components`.
-
-### Core plugins
-
-| Plugin | Description |
-|--------|-------------|
-| **Portfolio List** | Main ticker list with portfolios & watchlists |
-| **Ticker Detail** | Overview, financials, and chart tabs |
-| **Gloomberb Cloud** | Near-real-time market data, macro calendar, yield curve, and chat |
-| **Manual Entry** | Manually add positions, saved locally |
-| **IBKR** | Import positions from Flex Query or trade with Gateway API |
-| **News** | Ticker and market-wide news from Cloud, Yahoo fallback, and RSS feeds |
-| **SEC** | View recent SEC filings for supported US equities |
-| **Options** | View US equity options chains |
-| **Notes** | Write and save markdown notes, stored locally |
-| **AI** | Keep an Ask AI detail tab for tickers and create prompt-driven AI screener panes |
-| **Alerts** | Create price trigger alerts with desktop notifications |
-| **Compare Charts** | Compare multiple ticker charts overlaid on one shared chart |
-| **Prediction Markets** | Browse Polymarket and Kalshi markets |
-| **Correlation** | Compare ticker return correlations |
-| **Portfolio Analytics** | Sharpe ratio, beta, and sector allocation |
-| **Insider** | View recent insider transactions |
-| **World Equity Indices** | Global equity index monitor grouped by region |
-| **Market Movers** | Gainers, losers, most active, and trending tickers |
-| **FX Cross Rates** | Currency cross-rate matrix for major FX pairs |
-| **Sector Performance** | S&P 500 sector performance via ETF proxies |
-| **Earnings Calendar** | Upcoming earnings dates and estimates |
-| **Research** | Analyst ratings, corporate actions, and relative valuation |
+Then run:
 
-### Data providers
-
-| Provider | Description |
-|----------|-------------|
-| **Gloomberb Cloud** | Real-time data (recommended, free) |
-| **Yahoo Finance** | Delayed data, rate-limiting |
-
-### Broker connectors
-
-| Plugin | Description |
-|--------|-------------|
-| **IBKR** | Import positions from Flex Query or trade with Gateway API |
-| **Manual Entry** | Manually add positions, saved locally |
+```bash
+gloomberb
+```
 
-Toggleable plugins can be enabled/disabled from the command bar screen (`Ctrl+p`).
+For the best terminal experience, use a [Kitty](https://sw.kovidgoyal.net/kitty/)-compatible terminal such as Ghostty, Kitty, or WezTerm.
 
-## 💻 CLI
+## CLI
 
 Running `gloomberb` with no arguments launches the terminal UI. Use `gloomberb help` to see the full command list.
-Feature-owned root commands such as `portfolio`, `watchlist`, and `predictions` are registered by their plugins rather than hardcoded in the main CLI switch.
 
 | Command | Use |
 |---------|-----|
 | `gloomberb` | Launch the terminal UI |
-| `gloomberb help` | Show all CLI commands and plugin-owned help |
+| `gloomberb help` | Show all CLI commands |
 | `gloomberb search <query>` | Search tickers and company names |
 | `gloomberb ticker <symbol>` | Show quote, ownership, and financials |
-| `gloomberb portfolio [action]` | List, inspect, create, delete, and manage manual portfolios |
-| `gloomberb watchlist [action]` | List, inspect, create, delete, and manage watchlists |
-| `gloomberb predictions [...]` | Launch the UI with Prediction Markets focused |
+| `gloomberb portfolio [action]` | Manage manual portfolios |
+| `gloomberb watchlist [action]` | Manage watchlists |
+| `gloomberb predictions [...]` | Launch Prediction Markets |
 | `gloomberb plugins` | List installed plugins |
 | `gloomberb install <user/repo>` | Install a plugin from GitHub |
 | `gloomberb remove <name>` | Remove an installed plugin |
 | `gloomberb update [name]` | Update plugins |
 
-```bash
-gloomberb
-gloomberb help
-gloomberb search NVDA
-gloomberb ticker AAPL
-gloomberb portfolio list
-gloomberb portfolio show Research
-gloomberb portfolio create Research
-gloomberb portfolio add Research ASML
-gloomberb portfolio position set Research NVDA 10 400
-gloomberb watchlist list
-gloomberb watchlist add Growth NVDA
-gloomberb predictions kalshi macro top fed
-gloomberb plugins
-gloomberb update
-```
+## Plugins
 
-## Command Bar Shortcuts
+Everything from the portfolio list to broker integrations is a plugin. Plugins can add panes, tabs, columns, command bar commands, CLI commands, status bar widgets, and data providers.
 
-Open the command bar with `Ctrl+P` or `` ` ``, then type a shortcut or command name.
+Core plugin areas include:
 
-| Shortcut | Opens |
-|----------|-------|
-| `PF` | Collection Pane |
-| `DES <ticker>` | Ticker Detail |
-| `QQ <ticker>` | Quote Monitor |
-| `CHAT` | New Chat Pane |
-| `IBKR` | New IBKR Trading Pane |
-| `NOTE` | Notes |
-| `AI <prompt>` | AI Screener |
-| `CMP <tickers>` | Comparison Chart |
-| `PM <query>` | Prediction Markets |
-| `CORR <tickers>` | Correlation Matrix |
-| `PORT` | Portfolio Analytics |
-| `ECON` | Economic Calendar |
-| `WEI` | World Equity Indices |
-| `MOST` | Market Movers |
-| `TOP` | Top News |
-| `N` | News Feed |
-| `CN <ticker>` | Ticker News |
-| `NI` | Industry News |
-| `FIRST` | Breaking News |
-| `ALRT` | Alerts |
-| `FXC` | FX Cross Rates |
-| `GC` | Yield Curve |
-| `BI` | Sector Performance |
-| `ERN` | Earnings Calendar |
-| `OMON <ticker>` | Options |
-| `HDS <ticker>` | Holders |
-| `ANR <ticker>` | Analyst Research |
-| `EVT <ticker>` | Corporate Actions |
-| `SEC <ticker>` | SEC Filings |
-| `INS <ticker>` | Insider Activity |
-| `RV <tickers>` | Relative Valuation |
-
-| Shortcut | Command |
-|----------|---------|
-| `GL` | Gridlock all windows |
-| `SA <symbol condition price>` | Add Alert, e.g. `SA AMD above 200` |
-
-## ⌨️ Keyboard Shortcuts
+- Portfolios, watchlists, manual entry, and broker connections
+- Ticker details, quotes, charts, options, filings, holders, insiders, and research
+- News, market movers, global indices, sectors, FX, earnings, macro data, and yield curves
+- Prediction markets, alerts, notes, chat, AI screeners, and external plugins
+
+See [PLUGINS.md](PLUGINS.md) for the plugin API and the shared UI surface available through `gloomberb/components`.
+
+## Keyboard
 
 | Key | Action |
 |-----|--------|
@@ -174,10 +121,10 @@ Open the command bar with `Ctrl+P` or `` ` ``, then type a shortcut or command n
 | `Ctrl+Shift+D` | Dock or float focused pane |
 | `Ctrl+Shift+L` | Layout actions |
 | `Ctrl+Shift+G` | Gridlock all windows |
-| `Tab` | Switch between panels |
-| `j` / `k` | Navigate ticker list |
+| `Tab` | Switch panes |
+| `j` / `k` | Navigate lists |
 | `h` / `l` | Switch tabs |
-| `m` | Cycle chart mode in the chart tab |
+| `m` | Cycle chart mode |
 | `q` | Quit |
 
 Desktop builds also accept the matching `Cmd` shortcuts on macOS, plus `Cmd/Ctrl+Shift+O` to pop out a pane.
@@ -188,4 +135,4 @@ MIT
 
 ## Credits
 
-- [OpenTUI](https://opentui.com/) for the layout
+- [OpenTUI](https://opentui.com/) for the layout engine

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Bloomberg-style stock portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

package/src/app.tsx

@@ -6,6 +6,7 @@ import {
   AppProvider,
   getFocusedCollectionId,
   getFocusedTickerSymbol,
+  syncConfigActiveLayoutState,
   useAppDispatch,
   useAppSelector,
   useAppStateRef,
@@ -96,7 +97,8 @@ import {
 } from "./components/command-bar/workflow-ops";
 import { getPaneTemplateDisplayLabel } from "./components/command-bar/pane-template-display";
 import {
-  resolveTickerNavigationDetailPane,
+  findFixedTickerPaneForSymbol,
+  resolveTickerNavigationReplacementPane,
   shouldFocusTickerNavigationTarget,
 } from "./plugins/ticker-navigation";
 import { debugLog } from "./utils/debug-log";
@@ -348,11 +350,13 @@ function AppInner({
       if (!ensured) return null;
       if (ensured.layout !== state.config.layout) {
         dispatch({ type: "PUSH_LAYOUT_HISTORY" });
-        const layouts = state.config.layouts.map((savedLayout, index) => (
-          index === state.config.activeLayoutIndex ? { ...savedLayout, layout: ensured.layout } : savedLayout
-        ));
         dispatch({ type: "UPDATE_LAYOUT", layout: ensured.layout });
-        scheduleConfigSave({ ...state.config, layout: ensured.layout, layouts });
+        scheduleConfigSave(syncConfigActiveLayoutState(
+          { ...state.config, layout: ensured.layout },
+          state.paneState,
+          state.focusedPaneId,
+          state.activePanel,
+        ));
       }
       return ensured.instance.instanceId;
     })();
@@ -1078,14 +1082,16 @@ function AppInner({
   const persistLayout = (layout: LayoutConfig, options?: { pushHistory?: boolean }) => {
     const currentState = stateRef.current;
     const normalizedLayout = normalizePaneLayout(layout);
-    const layouts = currentState.config.layouts.map((savedLayout, index) => (
-      index === currentState.config.activeLayoutIndex ? { ...savedLayout, layout: normalizedLayout } : savedLayout
-    ));
     if (options?.pushHistory !== false) {
       dispatch({ type: "PUSH_LAYOUT_HISTORY" });
     }
     dispatch({ type: "UPDATE_LAYOUT", layout: normalizedLayout });
-    scheduleConfigSave({ ...currentState.config, layout: normalizedLayout, layouts });
+    scheduleConfigSave(syncConfigActiveLayoutState(
+      { ...currentState.config, layout: normalizedLayout },
+      currentState.paneState,
+      currentState.focusedPaneId,
+      currentState.activePanel,
+    ));
   };
   const resolvePanelForPane = useCallback((paneId: string, layout: LayoutConfig = state.config.layout): "left" | "right" => {
     const instanceId = resolvePaneTarget(paneId, layout);
@@ -1109,6 +1115,16 @@ function AppInner({
     dispatch({ type: "SET_ACTIVE_PANEL", panel: resolvePanelForPane(paneId, layout) });
     dispatch({ type: "FOCUS_PANE", paneId });
   }, [dispatch, resolvePanelForPane, state.config.layout]);
+  const focusVisiblePane = (paneId: string, layout: LayoutConfig = state.config.layout) => {
+    const nextLayout = layout.floating.some((entry) => entry.instanceId === paneId)
+      ? bringToFront(layout, paneId)
+      : layout;
+
+    if (nextLayout !== state.config.layout) {
+      persistLayout(nextLayout, { pushHistory: false });
+    }
+    activatePane(paneId, nextLayout);
+  };
   const placePaneInstance = useCallback((
     instance: PaneInstanceConfig,
     paneDef: NonNullable<ReturnType<typeof pluginRegistry.panes.get>>,
@@ -1341,20 +1357,20 @@ function AppInner({
       return;
     }
 
-    const layout = state.config.layout.floating.some((entry) => entry.instanceId === instanceId)
-      ? bringToFront(state.config.layout, instanceId)
-      : state.config.layout;
-
-    if (layout !== state.config.layout) {
-      persistLayout(layout, { pushHistory: false });
-    }
-    activatePane(instanceId, layout);
+    focusVisiblePane(instanceId);
   };
   pluginRegistry.pinTickerFn = (symbol, options) => {
     if (isDetachedWindow) return;
     const paneType = options?.paneType ?? "ticker-detail";
     const paneDef = pluginRegistry.panes.get(paneType);
     if (!paneDef) return;
+    const existing = options?.forceNewPane
+      ? null
+      : findFixedTickerPaneForSymbol(state.config.layout, paneType, symbol);
+    if (existing) {
+      focusVisiblePane(existing.instanceId);
+      return;
+    }
     const instance = buildPaneInstance(paneType, {
       title: symbol,
       binding: { kind: "fixed", symbol },
@@ -1383,52 +1399,43 @@ function AppInner({
     const sourcePaneId = options?.sourcePaneId ?? stateRef.current.focusedPaneId;
     (async () => {
       try {
-      // Resolve or create the ticker in the local database
-      const resolved = await resolveTickerSearch({
-        query: rawSymbol,
-        activeTicker: null,
-        tickers: stateRef.current.tickers,
-        dataProvider,
-      });
+        // Resolve or create the ticker in the local database
+        const resolved = await resolveTickerSearch({
+          query: rawSymbol,
+          activeTicker: null,
+          tickers: stateRef.current.tickers,
+          dataProvider,
+        });
 
-      let symbol = rawSymbol;
-      if (resolved?.kind === "local") {
-        symbol = resolved.symbol;
-      } else if (resolved?.kind === "provider" && resolved.result) {
-        const { ticker, created } = await upsertTickerFromSearchResult(tickerRepository, resolved.result);
-        symbol = ticker.metadata.ticker;
-        dispatch({ type: "UPDATE_TICKER", ticker });
-        if (created) {
-          pluginRegistry.events.emit("ticker:added", { symbol, ticker });
+        let symbol = rawSymbol;
+        if (resolved?.kind === "local") {
+          symbol = resolved.symbol;
+        } else if (resolved?.kind === "provider" && resolved.result) {
+          const { ticker, created } = await upsertTickerFromSearchResult(tickerRepository, resolved.result);
+          symbol = ticker.metadata.ticker;
+          dispatch({ type: "UPDATE_TICKER", ticker });
+          if (created) {
+            pluginRegistry.events.emit("ticker:added", { symbol, ticker });
+          }
         }
-      }
 
-      // Active panel resolution — navigate the initiating or linked detail pane:
-      // 1. If the source pane IS a ticker-detail, retarget it directly
-      // 2. If a ticker-detail follows the source pane, retarget that
-      // 3. Any follow-mode ticker-detail in the layout
-      // 4. Any ticker-detail in the layout
-      // 5. Fall back to pinning a new pane
-      const currentState = stateRef.current;
-      const currentLayout = currentState.config.layout;
-      const detailPane = resolveTickerNavigationDetailPane(currentLayout, sourcePaneId);
-      const focusIfStillOwned = (paneId: string, layout: LayoutConfig) => {
-        if (!shouldFocusTickerNavigationTarget({
-          sourcePaneId,
-          currentFocusedPaneId: stateRef.current.focusedPaneId,
-          targetPaneId: paneId,
-        })) {
-          return;
-        }
-        activatePane(paneId, layout);
-      };
+        // Only actions that originate from a ticker detail replace that exact pane.
+        // Everything else opens or focuses a fixed ticker detail for the symbol.
+        const currentState = stateRef.current;
+        const currentLayout = currentState.config.layout;
+        const detailPane = resolveTickerNavigationReplacementPane(currentLayout, sourcePaneId);
+        const focusIfStillOwned = (paneId: string, layout: LayoutConfig) => {
+          if (!shouldFocusTickerNavigationTarget({
+            sourcePaneId,
+            currentFocusedPaneId: stateRef.current.focusedPaneId,
+            targetPaneId: paneId,
+          })) {
+            return;
+          }
+          activatePane(paneId, layout);
+        };
 
-      if (detailPane) {
-        if (detailPane.binding?.kind === "follow") {
-          const sourceId = detailPane.binding.sourceInstanceId;
-          dispatch({ type: "UPDATE_PANE_STATE", paneId: sourceId, patch: { cursorSymbol: symbol } });
-          focusIfStillOwned(detailPane.instanceId, currentLayout);
-        } else {
+        if (detailPane) {
           const nextLayout = {
             ...currentLayout,
             instances: currentLayout.instances.map((instance) => (
@@ -1439,14 +1446,13 @@ function AppInner({
           };
           persistLayout(nextLayout);
           focusIfStillOwned(detailPane.instanceId, nextLayout);
+        } else if (shouldFocusTickerNavigationTarget({
+          sourcePaneId,
+          currentFocusedPaneId: stateRef.current.focusedPaneId,
+          targetPaneId: null,
+        })) {
+          pluginRegistry.pinTicker(symbol, { floating: false });
         }
-      } else if (shouldFocusTickerNavigationTarget({
-        sourcePaneId,
-        currentFocusedPaneId: stateRef.current.focusedPaneId,
-        targetPaneId: null,
-      })) {
-        pluginRegistry.pinTicker(symbol, { floating: false });
-      }
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
         pluginRegistry.notify({ body: `Failed to navigate to ${rawSymbol}: ${message}`, type: "error" });
@@ -1588,7 +1594,7 @@ function AppInner({
         }
       }
     }
-  });
+  }, { phase: "before" });
 
   if (desktopWindowBridge?.kind === "detached" && desktopWindowBridge.paneId) {
     return (

package/src/components/chart/chart-data.ts

@@ -43,6 +43,10 @@ function getRequestedRenderMode(mode?: ChartRenderMode, compact = false): ChartR
   return mode ?? "area";
 }
 
+function isOhlcProjectionMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || mode === "ohlc" || mode === "hlc";
+}
+
 export function resolveRenderMode(
   mode: ChartRenderMode | undefined,
   chartWidth: number,
@@ -64,6 +68,7 @@ export function resolveRenderMode(
       else if (chartWidth < 40) effectiveMode = "ohlc";
       break;
     case "ohlc":
+    case "hlc":
       if (chartWidth < 28) effectiveMode = "line";
       break;
   }
@@ -328,11 +333,11 @@ export function projectChartData(
 ): ChartProjection {
   const { requestedMode, effectiveMode, fallbackMode } = resolveRenderMode(mode, targetWidth, compact);
   const ohlcBucketWidth = options.ohlcBucketWidth ?? targetWidth;
-  const projectionWidth = effectiveMode === "candles" || effectiveMode === "ohlc"
+  const projectionWidth = isOhlcProjectionMode(effectiveMode)
     ? Math.max(Math.floor(ohlcBucketWidth / 2), 1)
     : targetWidth;
 
-  const projectedPoints = effectiveMode === "candles" || effectiveMode === "ohlc"
+  const projectedPoints = isOhlcProjectionMode(effectiveMode)
     ? bucketOhlcSeries(points, projectionWidth, options)
     : projectCloseSeries(points, projectionWidth);
 

package/src/components/chart/chart-pane-settings.ts

@@ -4,6 +4,7 @@ import {
   useAppStateRef,
   usePaneInstance,
   usePaneInstanceId,
+  syncConfigActiveLayoutState,
 } from "../../state/app-context";
 import { scheduleConfigSave } from "../../state/config-save-scheduler";
 import type { ChartResolution, TimeRange } from "./chart-types";
@@ -24,10 +25,12 @@ export function usePersistChartControlSelection(rangePresetKey: string): (
       [rangePresetKey]: range,
       chartResolution: resolution,
     });
-    const layouts = currentState.config.layouts.map((savedLayout, index) => (
-      index === currentState.config.activeLayoutIndex ? { ...savedLayout, layout } : savedLayout
-    ));
-    const nextConfig = { ...currentState.config, layout, layouts };
+    const nextConfig = syncConfigActiveLayoutState(
+      { ...currentState.config, layout },
+      currentState.paneState,
+      currentState.focusedPaneId,
+      currentState.activePanel,
+    );
     dispatch({ type: "SET_CONFIG", config: nextConfig });
     scheduleConfigSave(nextConfig);
   };

package/src/components/chart/chart-renderer.ts

@@ -278,15 +278,41 @@ function getBarHalfWidth(pointCount: number, bufWidth: number): number {
   return Math.floor(barW / 2);
 }
 
+function isOhlcLikeMode(mode: ChartRenderMode): boolean {
+  return mode === "ohlc" || mode === "hlc";
+}
+
+function isHighLowMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || isOhlcLikeMode(mode);
+}
+
+function getOhlcTickLength(pointCount: number, bufWidth: number): number {
+  if (pointCount <= 1) return 4;
+  const spacing = bufWidth / pointCount;
+  return Math.min(Math.max(Math.round(spacing * 0.45), 3), 5);
+}
+
+function getOhlcStemWidth(pointCount: number, bufWidth: number): number {
+  if (pointCount <= 1) return 3;
+  const spacing = bufWidth / pointCount;
+  return Math.min(Math.max(Math.round(spacing * 0.2), 2), 3);
+}
+
+function getOhlcHorizontalPad(pointCount: number, bufWidth: number): number {
+  const tickLen = getOhlcTickLength(pointCount, bufWidth);
+  const stemWidth = getOhlcStemWidth(pointCount, bufWidth);
+  return Math.max(tickLen - 1, Math.ceil((stemWidth - 1) / 2), 0);
+}
+
 function getDotX(index: number, pointCount: number, width: number, mode: ChartRenderMode): number {
   switch (mode) {
     case "candles": {
       const pad = getCandleHalfWidth(pointCount, width);
       return getSeriesPosition(index, pointCount, width, pad, pad);
     }
-    case "ohlc": {
-      const tickLen = Math.max(getCandleHalfWidth(pointCount, width), 2);
-      const pad = Math.max(tickLen - 1, 0);
+    case "ohlc":
+    case "hlc": {
+      const pad = getOhlcHorizontalPad(pointCount, width);
       return getSeriesPosition(index, pointCount, width, pad, pad);
     }
     default:
@@ -415,12 +441,16 @@ function drawOhlcChart(
   palette: ResolvedChartPalette,
   min: number,
   max: number,
+  mode: Extract<ChartRenderMode, "ohlc" | "hlc">,
 ) {
-  const tickLen = Math.max(getCandleHalfWidth(points.length, buf.width), 2);
+  const tickLen = getOhlcTickLength(points.length, buf.width);
+  const stemWidth = getOhlcStemWidth(points.length, buf.width);
+  const stemLeft = Math.floor((stemWidth - 1) / 2);
+  const stemRight = Math.ceil((stemWidth - 1) / 2);
 
   for (let i = 0; i < points.length; i++) {
     const point = points[i]!;
-    const x = getDotX(i, points.length, buf.width, "ohlc");
+    const x = getDotX(i, points.length, buf.width, mode);
     const highY = getScaledY(point.high, min, max, chartTop, chartBottom);
     const lowY = getScaledY(point.low, min, max, chartTop, chartBottom);
     const openY = getScaledY(point.open, min, max, chartTop, chartBottom);
@@ -428,14 +458,15 @@ function drawOhlcChart(
     const isUp = point.close >= point.open;
     const color = isUp ? palette.candleUp : palette.candleDown;
 
-    // Vertical line
-    drawLine(buf, x, highY, x, lowY, color, LAYER_DATA);
+    for (let dx = -stemLeft; dx <= stemRight; dx++) {
+      drawLine(buf, x + dx, highY, x + dx, lowY, color, LAYER_DATA);
+    }
 
-    // Open tick extends left
-    for (let dx = 0; dx < tickLen; dx++) {
-      setPixel(buf, x - dx, openY, color, LAYER_DATA);
+    if (mode === "ohlc") {
+      for (let dx = 0; dx < tickLen; dx++) {
+        setPixel(buf, x - dx, openY, color, LAYER_DATA);
+      }
     }
-    // Close tick extends right
     for (let dx = 0; dx < tickLen; dx++) {
       setPixel(buf, x + dx, closeY, color, LAYER_DATA);
     }
@@ -1222,10 +1253,10 @@ export function buildChartScene(
   if (points.length === 0) return null;
 
   const dimensions = normalizeRenderDimensions(opts);
-  const dataMin = opts.mode === "candles" || opts.mode === "ohlc"
+  const dataMin = isHighLowMode(opts.mode)
     ? Math.min(...points.map((point) => point.low))
     : Math.min(...points.map((point) => point.close));
-  const dataMax = opts.mode === "candles" || opts.mode === "ohlc"
+  const dataMax = isHighLowMode(opts.mode)
     ? Math.max(...points.map((point) => point.high))
     : Math.max(...points.map((point) => point.close));
   const indicatorValues = getIndicatorOverlayValues(opts.indicators);
@@ -1394,7 +1425,10 @@ export function renderChart(
       drawCandlestickChart(buf, points, 0, chartDotBottom, palette, min, max);
       break;
     case "ohlc":
-      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max);
+      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max, "ohlc");
+      break;
+    case "hlc":
+      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max, "hlc");
       break;
   }
 
@@ -1406,7 +1440,7 @@ export function renderChart(
       volDotBottom,
       palette.volumeUp,
       palette.volumeDown,
-      mode === "candles" || mode === "ohlc" ? "openClose" : "previousClose",
+      isHighLowMode(mode) ? "openClose" : "previousClose",
       mode,
     );
   }