gloomberb 0.7.2 → 0.7.3

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

@@ -2,14 +2,14 @@ import type { PricePoint } from "../../types/financials";
 
 export type TimeRange = "1D" | "1W" | "1M" | "3M" | "6M" | "1Y" | "5Y" | "ALL";
 export type ChartResolution = "auto" | "1m" | "5m" | "15m" | "30m" | "45m" | "1h" | "1d" | "1wk" | "1mo";
-export type ChartRenderMode = "area" | "line" | "candles" | "ohlc";
+export type ChartRenderMode = "area" | "line" | "candles" | "ohlc" | "hlc";
 export type ChartAxisMode = "price" | "percent";
 export type ChartRendererPreference = "auto" | "kitty" | "braille";
 export type ResolvedChartRenderer = "kitty" | "braille";
 export type ComparisonChartRenderMode = "area" | "line";
 
 export const TIME_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
-export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc"];
+export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc", "hlc"];
 export const CHART_RENDERER_PREFERENCES: ChartRendererPreference[] = ["auto", "kitty", "braille"];
 export const COMPARISON_RENDER_MODES: ComparisonChartRenderMode[] = ["area", "line"];
 

package/src/components/chart/chart.test.ts

@@ -183,6 +183,8 @@ describe("resolveRenderMode", () => {
     expect(resolveRenderMode("candles", 28)).toMatchObject({ effectiveMode: "ohlc", fallbackMode: "ohlc" });
     expect(resolveRenderMode("candles", 39)).toMatchObject({ effectiveMode: "ohlc", fallbackMode: "ohlc" });
     expect(resolveRenderMode("candles", 40)).toMatchObject({ effectiveMode: "candles", fallbackMode: null });
+    expect(resolveRenderMode("hlc", 27)).toMatchObject({ effectiveMode: "line", fallbackMode: "line" });
+    expect(resolveRenderMode("hlc", 28)).toMatchObject({ effectiveMode: "hlc", fallbackMode: null });
   });
 
   test("forces compact charts back to area mode", () => {
@@ -192,7 +194,7 @@ describe("resolveRenderMode", () => {
     expect(projection.fallbackMode).toBeNull();
   });
 
-  test("uses fewer projected buckets for candles and ohlc to preserve spacing", () => {
+  test("uses fewer projected buckets for candles and ohlc-style bars to preserve spacing", () => {
     const denseSeries = Array.from({ length: 100 }, (_, i) => ({
       date: new Date(2024, 0, i + 1),
       open: 100 + i,
@@ -204,6 +206,7 @@ describe("resolveRenderMode", () => {
 
     expect(projectChartData(denseSeries, 80, "candles", false).points).toHaveLength(34);
     expect(projectChartData(denseSeries, 80, "ohlc", false).points).toHaveLength(34);
+    expect(projectChartData(denseSeries, 80, "hlc", false).points).toHaveLength(34);
     expect(projectChartData(denseSeries, 80, "line", false).points).toHaveLength(80);
   });
 
@@ -468,7 +471,7 @@ describe("renderChart", () => {
       cellHeightPx,
     });
 
-    expect(overlay.labelText).toBe("$214.03 ");
+    expect(overlay.labelText).toBe("$214.03");
     expect(overlay.topPercent).toBeCloseTo((cursorPixelY / (height * cellHeightPx - 1)) * 100, 5);
   });
 
@@ -528,6 +531,7 @@ describe("renderChart", () => {
       { mode: "line", width: 12, cursorX: 4 },
       { mode: "candles", width: 40, cursorX: 13 },
       { mode: "ohlc", width: 28, cursorX: 9 },
+      { mode: "hlc", width: 28, cursorX: 9 },
     ];
 
     for (const testCase of cases) {
@@ -553,6 +557,7 @@ describe("renderChart", () => {
       { mode: "area", width: 12, height: 6, cursorX: 5, cursorY: 4 },
       { mode: "candles", width: 40, height: 6, cursorX: 13, cursorY: 3 },
       { mode: "ohlc", width: 28, height: 6, cursorX: 9, cursorY: 1 },
+      { mode: "hlc", width: 28, height: 6, cursorX: 9, cursorY: 1 },
     ];
 
     for (const testCase of cases) {
@@ -638,12 +643,26 @@ describe("renderChart", () => {
         width: 28,
         height: 6,
         lines: [
-          "⠁  ⠁  ⠁  ⢸  ⠁  ⠁  ⡄  ⠁  ⠁  ⠁",
-          " ⢰       ⢸⠒⠂    ⠐⠒⡇         ",
-          "⠁⢸⠒⠂  ⠁ ⠒⢺  ⠁  ⠁  ⡇  ⠁  ⠁ ⡆⠁",
-          "⠤⢼ ⡀  ⡀  ⠸  ⡀  ⡀  ⡇  ⡀  ⡀ ⡏⠉",
-          " ⠸                ⡧⠤    ⠠⠤⡇ ",
-          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀  ⡇  ⡀  ⡀ ⠃⡀",
+          "⠁  ⠁  ⠁  ⢸⣿ ⠁  ⠁ ⣤⡄  ⠁  ⠁  ⠁",
+          " ⢰⣶      ⢸⣿⠒⠂  ⠐⠒⣿⡇         ",
+          "⠁⢸⣿⠒⠂ ⠁ ⠒⢺⣿ ⠁  ⠁ ⣿⡇  ⠁  ⠁⣶⡆⠁",
+          "⠤⢼⣿⡀  ⡀  ⠸⠿ ⡀  ⡀ ⣿⡇  ⡀  ⡀⣿⡏⠉",
+          " ⠸⠿              ⣿⡧⠤   ⠠⠤⣿⡇ ",
+          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀ ⣿⡇  ⡀  ⡀⠛⠃⡀",
+        ],
+        timeLabels: "Jan 2    3        4    Jan 5",
+      },
+      {
+        mode: "hlc",
+        width: 28,
+        height: 6,
+        lines: [
+          "⠁  ⠁  ⠁  ⢸⣿ ⠁  ⠁ ⣤⡄  ⠁  ⠁  ⠁",
+          " ⢰⣶      ⢸⣿⠒⠂    ⣿⡇         ",
+          "⠁⢸⣿⠒⠂ ⠁  ⢸⣿ ⠁  ⠁ ⣿⡇  ⠁  ⠁⣶⡆⠁",
+          "⡀⢸⣿⡀  ⡀  ⠸⠿ ⡀  ⡀ ⣿⡇  ⡀  ⡀⣿⡏⠉",
+          " ⠸⠿              ⣿⡧⠤     ⣿⡇ ",
+          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀ ⣿⡇  ⡀  ⡀⠛⠃⡀",
         ],
         timeLabels: "Jan 2    3        4    Jan 5",
       },

package/src/components/chart/comparison-stock-chart.tsx

@@ -7,12 +7,12 @@ import { useChartQueries } from "../../market-data/hooks";
 import { buildChartKey } from "../../market-data/selectors";
 import { useAppSelector, usePaneSettingValue } from "../../state/app-context";
 import { usePaneFooter, type PaneHint } from "../layout/pane-footer";
-import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
+import { blendHex, colors, getComparisonSeriesColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
 import { formatPercentRaw } from "../../utils/format";
-import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../utils/market-format";
+import { formatMarketPriceWithCurrency } from "../../utils/market-format";
 import { getSharedMarketData } from "../../plugins/registry";
 import {
   applyComparisonZoomAroundAnchor,
@@ -30,7 +30,6 @@ import {
 import {
   buildVisibleDateWindow,
   clearActivePreset,
-  formatVisibleSpanLabel,
   needsCanonicalPresetViewportReset,
   resolveChartBodyState,
   resolveCanonicalPresetViewport,
@@ -96,7 +95,7 @@ import {
   resolveNativeSurfaceVisibleRect,
   type NativeSurfaceRenderableNode,
 } from "./native/surface-visibility";
-import { formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
 import { TimeAxisLabel } from "./time-axis-label";
 import { PriceAxisLabels } from "./price-axis-labels";
 
@@ -445,6 +444,23 @@ function clipText(text: string, width: number): string {
   return `${text.slice(0, width - 3)}...`;
 }
 
+function formatLegendSummary(
+  symbol: string,
+  rawValue: number | null,
+  baseValue: number | null,
+  currency: string,
+  priceRange: number | undefined,
+): string {
+  if (rawValue === null) return `${symbol} waiting`;
+  const price = formatMarketPriceWithCurrency(rawValue, currency, {
+    minimumFractionDigits: 2,
+    precisionOffset: 1,
+    priceRange,
+  });
+  if (baseValue === null || baseValue === 0) return `${symbol} ${price}`;
+  return `${symbol} ${price} ${formatPercentRaw(((rawValue - baseValue) / baseValue) * 100)}`;
+}
+
 function getInitialComparisonMode(mode: string | undefined): ComparisonChartRenderMode {
   return mode === "line" ? "line" : "area";
 }
@@ -555,6 +571,7 @@ function ComparisonStockChartView({
   const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
+  const lastAppliedStoredSelectionKeyRef = useRef<string | null>(null);
   const pendingCanonicalResetRef = useRef(1);
   const appliedCanonicalResetRef = useRef(0);
   const pendingExpansionRef = useRef<PendingExpansionAction>(null);
@@ -564,7 +581,7 @@ function ComparisonStockChartView({
   const axisRightPadding = 1;
   const minimumAxisWidth = axisMode === "percent" ? 5 : 4;
   const axisGap = axisSectionWidthBudget > 0 ? 1 : 0;
-  const headerRows = 1;
+  const headerRows = 0;
   const controlRows = 2;
   const timeAxisRows = 1;
   const helpRows = 0;
@@ -591,13 +608,35 @@ function ComparisonStockChartView({
     ));
   };
 
-  const capabilityKey = useMemo(() => symbolSources.map((source) => [
-    source.symbol,
-    source.exchange,
-    source.brokerId ?? "",
-    source.brokerInstanceId ?? "",
-    source.instrument?.conId ?? "",
-  ].join(":")).join("|"), [symbolSources]);
+  const marketDataProvider = getSharedMarketData();
+  const capabilityDescriptor = useMemo(() => {
+    const sources = symbolSources.map((source) => ({
+      symbol: source.symbol,
+      exchange: source.exchange,
+      brokerId: source.brokerId,
+      brokerInstanceId: source.brokerInstanceId,
+      instrument: source.instrument,
+    }));
+    return {
+      key: sources.map((source) => [
+        source.symbol,
+        source.exchange,
+        source.brokerId ?? "",
+        source.brokerInstanceId ?? "",
+        source.instrument?.conId ?? "",
+        source.instrument?.localSymbol ?? "",
+        source.instrument?.symbol ?? "",
+      ].join(":")).join("|"),
+      sources,
+    };
+  }, [symbolSources]);
+  const effectiveResolutionSupport = useMemo<ChartResolutionSupport[]>(() => (
+    resolutionSupport ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS.map((resolution) => ({ resolution, maxRange: "ALL" as const }))
+  ), [resolutionSupport]);
+  const selectionSupportMap = useMemo(
+    () => buildChartResolutionSupportMap(effectiveResolutionSupport),
+    [effectiveResolutionSupport],
+  );
 
   useEffect(() => {
     if (symbols.includes(viewState.selectedSymbol ?? "")) return;
@@ -608,21 +647,25 @@ function ComparisonStockChartView({
   }, [symbols, viewState.selectedSymbol]);
 
   useEffect(() => {
+    const storedSelectionKey = `${storedRangePreset}:${storedResolution}`;
+    if (lastAppliedStoredSelectionKeyRef.current === storedSelectionKey) return;
+
+    lastAppliedStoredSelectionKeyRef.current = storedSelectionKey;
     pendingCanonicalResetRef.current += 1;
     setViewState((current) => (
       storedResolution === "auto"
-        ? resolveStoredChartSelection(current, storedRangePreset, storedResolution, supportMap)
+        ? resolveStoredChartSelection(current, storedRangePreset, storedResolution, selectionSupportMap)
         : resolvePresetSelection(
           {
             ...current,
             resolution: storedResolution,
           },
           storedRangePreset,
-          getSupportMaxRange(supportMap, storedResolution),
+          getSupportMaxRange(selectionSupportMap, storedResolution),
         )
     ));
     updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
-  }, [storedRangePreset, storedResolution, supportMap]);
+  }, [selectionSupportMap, storedRangePreset, storedResolution]);
 
   const commitDisplayCursor = (next: DisplayCursorState) => {
     displayCursorRef.current = next;
@@ -705,15 +748,15 @@ function ComparisonStockChartView({
   ), [nativeSurfaceManager]);
 
   useEffect(() => {
-    const provider = getSharedMarketData();
-    if ((!provider?.getChartResolutionSupport && !provider?.getChartResolutionCapabilities) || symbolSources.length === 0) {
+    const provider = marketDataProvider;
+    if ((!provider?.getChartResolutionSupport && !provider?.getChartResolutionCapabilities) || capabilityDescriptor.sources.length === 0) {
       setResolutionSupport(null);
       return;
     }
 
     let cancelled = false;
     setResolutionSupport(null);
-    Promise.all(symbolSources.map(async (source) => {
+    Promise.all(capabilityDescriptor.sources.map(async (source) => {
       try {
         const support = provider.getChartResolutionSupport
           ? await provider.getChartResolutionSupport(
@@ -757,11 +800,7 @@ function ComparisonStockChartView({
     return () => {
       cancelled = true;
     };
-  }, [capabilityKey, symbolSources]);
-
-  const effectiveResolutionSupport = useMemo<ChartResolutionSupport[]>(() => (
-    resolutionSupport ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS.map((resolution) => ({ resolution, maxRange: "ALL" as const }))
-  ), [resolutionSupport]);
+  }, [capabilityDescriptor.key, marketDataProvider]);
   const availableManualResolutions = resolutionSupport?.map((entry) => entry.resolution) ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS;
   const effectiveResolution: ChartResolution = viewState.resolution !== "auto"
     && resolutionSupport !== null
@@ -873,7 +912,6 @@ function ComparisonStockChartView({
   ]);
   const axisSectionWidth = axisWidth + axisRightPadding;
   const chartWidth = Math.max(width - axisSectionWidth - axisGap, minChartWidth);
-  const maxCursorX = chartWidth - 1;
   const seriesDates = useMemo(() => getUniqueSortedSeriesDates(series), [series]);
   const visibleDateWindow = useMemo(() => buildVisibleDateWindow(seriesDates, viewState.panOffset, viewState.zoomLevel), [seriesDates, viewState.panOffset, viewState.zoomLevel]);
   const activePreset = resolveVisibleActivePreset(seriesDates, {
@@ -1006,6 +1044,16 @@ function ComparisonStockChartView({
     ));
   };
 
+  const selectSymbolByOffset = (offset: number) => {
+    setViewState((current) => {
+      const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
+      return {
+        ...current,
+        selectedSymbol: symbols[clamp(currentIndex + offset, 0, symbols.length - 1)] ?? current.selectedSymbol,
+      };
+    });
+  };
+
   useEffect(() => {
     const remapCursor = (cursor: DisplayCursorState) => buildDisplayCursorState(
       cursor.cellX,
@@ -1425,22 +1473,6 @@ function ComparisonStockChartView({
       case "t":
         onEditTickers?.();
         return;
-      case "h":
-        mouseCrosshairDisabledRef.current = false;
-        cursorMotionKindRef.current = "discrete";
-        setViewState((current) => ({
-          ...current,
-          cursorX: current.cursorX === null ? maxCursorX : Math.max(current.cursorX - 1, 0),
-        }));
-        return;
-      case "l":
-        mouseCrosshairDisabledRef.current = false;
-        cursorMotionKindRef.current = "discrete";
-        setViewState((current) => ({
-          ...current,
-          cursorX: current.cursorX === null ? 0 : Math.min(current.cursorX + 1, maxCursorX),
-        }));
-        return;
       case "escape":
         mouseCrosshairDisabledRef.current = true;
         updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
@@ -1451,42 +1483,20 @@ function ComparisonStockChartView({
         if (viewState.selectedSymbol) onOpenSymbol(viewState.selectedSymbol);
         return;
       case "left":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.max(currentIndex - 1, 0)] ?? current.selectedSymbol,
-          };
-        });
+      case "h":
+        selectSymbolByOffset(-1);
         return;
       case "right":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.min(currentIndex + 1, symbols.length - 1)] ?? current.selectedSymbol,
-          };
-        });
+      case "l":
+        selectSymbolByOffset(1);
         return;
       case "up":
       case "k":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.max(currentIndex - legendColumns, 0)] ?? current.selectedSymbol,
-          };
-        });
+        selectSymbolByOffset(-legendColumns);
         return;
       case "down":
       case "j":
-        setViewState((current) => {
-          const currentIndex = Math.max(symbols.indexOf(current.selectedSymbol ?? symbols[0] ?? ""), 0);
-          return {
-            ...current,
-            selectedSymbol: symbols[Math.min(currentIndex + legendColumns, symbols.length - 1)] ?? current.selectedSymbol,
-          };
-        });
+        selectSymbolByOffset(legendColumns);
         return;
     }
 
@@ -1629,18 +1639,9 @@ function ComparisonStockChartView({
   const hasChartData = series.some((entry) => entry.points.length > 0);
   const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
   const cursorScene = hasDisplayCursor ? displayScene : staticScene;
-  const selectedSeries = hasChartData ? (cursorScene?.selectedSeries ?? staticResult.selectedSeries) : null;
-  const selectedPoint = hasChartData ? (cursorScene?.selectedPoint ?? staticResult.selectedPoint) : null;
-  const selectedRawValue = selectedPoint?.rawValue ?? selectedSeries?.latestRawValue ?? null;
-  const selectedBaseValue = selectedSeries?.baseValue ?? null;
-  const selectedChange = selectedRawValue !== null && selectedBaseValue !== null
-    ? selectedRawValue - selectedBaseValue
-    : null;
-  const selectedChangePct = selectedChange !== null && selectedBaseValue
-    ? (selectedChange / selectedBaseValue) * 100
+  const legendActiveIndex = hasChartData
+    ? cursorScene?.activeIdx ?? staticScene?.activeIdx ?? null
     : null;
-  const selectedCurrency = selectedSeries?.currency ?? "USD";
-  const displayDate = cursorScene?.activeDate ?? staticResult.activeDate;
   const visiblePriceRange = result.priceRange ?? staticResult.priceRange ?? undefined;
   const axisLabels = new Map(staticResult.axisLabels.map((entry) => [entry.row, entry.label]));
   const cursorRow = useCanvasChart ? cursorScene?.cursorRow ?? null : result.cursorRow;
@@ -1652,10 +1653,6 @@ function ComparisonStockChartView({
       visiblePriceRange,
     )
     : null;
-  const visibleLabel = formatVisibleSpanLabel({
-    start: visibleWindow.dates[0] ?? null,
-    end: visibleWindow.dates[visibleWindow.dates.length - 1] ?? null,
-  });
   const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
   const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.activeDate ?? null : null;
 
@@ -1852,32 +1849,6 @@ function ComparisonStockChartView({
       flexGrow={1}
       onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
     >
-      <Box flexDirection="row" gap={2} height={1}>
-        <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
-          {viewState.selectedSymbol ?? "Compare"} - {getChartResolutionLabel(effectiveResolution)}
-        </Text>
-        <Text fg={colors.textDim}>{visibleLabel}</Text>
-        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
-          {selectedRawValue !== null
-            ? formatMarketPriceWithCurrency(selectedRawValue, selectedCurrency, {
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })
-            : "—"}
-        </Text>
-        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
-          {selectedChange !== null && selectedChangePct !== null
-            ? `${formatSignedMarketPrice(selectedChange, {
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })} (${formatPercentRaw(selectedChangePct)})`
-            : "Waiting for data"}
-        </Text>
-        {displayDate && <Text fg={colors.textDim}>{formatDateShort(displayDate)}</Text>}
-      </Box>
-
       <Box flexDirection="row" height={1}>
         <Box flexDirection="row" gap={1}>
           {TIME_RANGES.map((range, index) => (
@@ -1964,19 +1935,11 @@ function ComparisonStockChartView({
                 {legendRow.map((symbol) => {
                   const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
                   const isSelected = viewState.selectedSymbol === symbol;
-                  const latestRaw = item?.latestRawValue ?? null;
-                  const latestChange = latestRaw !== null && item?.baseValue != null ? latestRaw - item.baseValue : null;
-                  const latestChangePct = latestChange !== null && item?.baseValue
-                    ? (latestChange / item.baseValue) * 100
-                    : null;
+                  const activeRaw = legendActiveIndex !== null
+                    ? item?.points[legendActiveIndex]?.rawValue ?? null
+                    : item?.latestRawValue ?? null;
                   const currency = item?.currency ?? "USD";
-                  const summary = latestRaw !== null && latestChangePct !== null
-                    ? `${symbol} ${formatMarketPriceWithCurrency(latestRaw, currency, {
-                      minimumFractionDigits: 2,
-                      precisionOffset: 1,
-                      priceRange: visiblePriceRange,
-                    })} ${formatPercentRaw(latestChangePct)}`
-                    : `${symbol} waiting`;
+                  const summary = formatLegendSummary(symbol, activeRaw, item?.baseValue ?? null, currency, visiblePriceRange);
 
                   return (
                     <Box

package/src/components/chart/native/chart-rasterizer.ts

@@ -247,16 +247,39 @@ function projectX(index: number, count: number, left: number, right: number): nu
   return lerp(left, right, index / (count - 1));
 }
 
+function isOhlcLikeMode(mode: ChartRenderMode): boolean {
+  return mode === "ohlc" || mode === "hlc";
+}
+
+function isHighLowMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || isOhlcLikeMode(mode);
+}
+
+function getNativeBarMetrics(count: number, width: number, mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">) {
+  const spacing = width / Math.max(count, 1);
+  if (mode === "candles") {
+    return {
+      bodyWidth: clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2)),
+      tickLength: 0,
+      stemThickness: 1.2,
+    };
+  }
+
+  return {
+    bodyWidth: 0,
+    tickLength: clamp(spacing * 0.5, 3, Math.max(spacing * 0.62, 3)),
+    stemThickness: clamp(spacing * 0.12, 2, 3.2),
+  };
+}
+
 function projectChartX(index: number, count: number, width: number, mode: ChartRenderMode): number {
-  if (mode !== "candles" && mode !== "ohlc") {
+  if (!isHighLowMode(mode)) {
     return projectX(index, count, 0, Math.max(width - 1, 0));
   }
 
-  const spacing = width / Math.max(count, 1);
-  const bodyWidth = clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2));
-  const tickLength = clamp(spacing * 0.34, 2, Math.max(spacing * 0.48, 2));
-  const horizontalPad = mode === "ohlc"
-    ? Math.ceil(Math.max(tickLength - 1, 0))
+  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(count, width, mode);
+  const horizontalPad = isOhlcLikeMode(mode)
+    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
     : Math.ceil(bodyWidth / 2);
   return projectX(index, count, horizontalPad, Math.max(width - 1 - horizontalPad, horizontalPad));
 }
@@ -332,13 +355,11 @@ function drawCandles(
   scene: ChartScene,
   top: number,
   bottom: number,
-  mode: Extract<ChartRenderMode, "candles" | "ohlc">,
+  mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">,
 ) {
-  const spacing = width / Math.max(scene.points.length, 1);
-  const bodyWidth = clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2));
-  const tickLength = clamp(spacing * 0.34, 2, Math.max(spacing * 0.48, 2));
-  const horizontalPad = mode === "ohlc"
-    ? Math.ceil(Math.max(tickLength - 1, 0))
+  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(scene.points.length, width, mode);
+  const horizontalPad = isOhlcLikeMode(mode)
+    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
     : Math.ceil(bodyWidth / 2);
   const plotLeft = horizontalPad;
   const plotRight = Math.max(width - 1 - horizontalPad, plotLeft);
@@ -355,10 +376,12 @@ function drawCandles(
     const wickColor = parseHex(isUp ? scene.colors.wickUp : scene.colors.wickDown, 0.92);
     const bodyColor = parseHex(isUp ? scene.colors.candleUp : scene.colors.candleDown, 1);
 
-    if (mode === "ohlc") {
-      drawLine(data, width, height, x, highY, x, lowY, wickColor, 1.2);
-      drawLine(data, width, height, x - tickLength, openY, x, openY, bodyColor, 1.4);
-      drawLine(data, width, height, x, closeY, x + tickLength, closeY, bodyColor, 1.4);
+    if (isOhlcLikeMode(mode)) {
+      drawLine(data, width, height, x, highY, x, lowY, wickColor, stemThickness);
+      if (mode === "ohlc") {
+        drawLine(data, width, height, x - tickLength, openY, x, openY, bodyColor, Math.max(stemThickness, 1.4));
+      }
+      drawLine(data, width, height, x, closeY, x + tickLength, closeY, bodyColor, Math.max(stemThickness, 1.4));
       continue;
     }
 
@@ -395,7 +418,7 @@ function drawVolume(
     if (heightRatio <= 0) continue;
     const x = projectX(index, scene.points.length, 0, width - 1);
     const barTop = lerp(bottom, top, heightRatio);
-    const isUp = scene.mode === "candles" || scene.mode === "ohlc"
+    const isUp = isHighLowMode(scene.mode)
       ? point.close >= point.open
       : index === 0 || point.close >= scene.points[index - 1]!.close;
     const color = parseHex(isUp ? scene.colors.volumeUp : scene.colors.volumeDown, 0.6);
@@ -486,6 +509,9 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
       case "ohlc":
         drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "ohlc");
         break;
+      case "hlc":
+        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "hlc");
+        break;
     }
 
     drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);

package/src/components/chart/price-axis-labels.tsx

@@ -25,7 +25,6 @@ function clamp(value: number, min: number, max: number): number {
 
 export function buildCursorPriceAxisOverlay({
   axisWidth,
-  axisSectionWidth,
   height,
   cursorPixelY,
   cursorLabel,
@@ -40,7 +39,7 @@ export function buildCursorPriceAxisOverlay({
 }): CursorPriceAxisOverlay {
   const labelText = cursorLabel === null
     ? null
-    : formatAxisCell(cursorLabel, axisWidth).padEnd(axisSectionWidth);
+    : formatAxisCell(cursorLabel, axisWidth).trimStart();
   const pixelHeight = Math.max(height * cellHeightPx, 1);
   let topPercent: number | null = null;
 
@@ -73,6 +72,20 @@ export function PriceAxisLabels({
     cellHeightPx,
   }), [axisSectionWidth, axisWidth, cellHeightPx, cursorLabel, cursorPixelY, height]);
   const usePixelOverlay = fractionalViewport && overlay.labelText !== null && overlay.topPercent !== null;
+  const axisPaddingWidth = Math.max(0, axisSectionWidth - axisWidth);
+  const axisLabelJustify = fractionalViewport ? "flex-start" : "flex-end";
+  const renderAxisLabel = (label: string | null, fg: string) => (
+    fractionalViewport ? (
+      <Box flexDirection="row" width={axisSectionWidth} height={1}>
+        <Box flexDirection="row" width={axisWidth} justifyContent={axisLabelJustify} overflow="hidden">
+          {label ? <Text fg={fg}>{formatAxisCell(label, axisWidth).trimStart()}</Text> : null}
+        </Box>
+        {axisPaddingWidth > 0 ? <Box width={axisPaddingWidth} /> : null}
+      </Box>
+    ) : (
+      <Text fg={fg}>{formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}</Text>
+    )
+  );
 
   return (
     <Box
@@ -86,16 +99,16 @@ export function PriceAxisLabels({
         const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;
         const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
         return (
-          <Text key={row} fg={isCursorRow ? cursorColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
+          <Box key={row} height={1}>
+            {renderAxisLabel(label, isCursorRow ? cursorColor : colors.textDim)}
+          </Box>
         );
       })}
       {usePixelOverlay ? (
-        <Text
+        <Box
           width={axisSectionWidth}
-          fg={cursorColor}
           bg={colors.bg}
+          flexDirection="row"
           style={{
             position: "absolute",
             left: 0,
@@ -106,8 +119,11 @@ export function PriceAxisLabels({
             zIndex: 1,
           }}
         >
-          {overlay.labelText}
-        </Text>
+          <Box flexDirection="row" width={axisWidth} justifyContent={axisLabelJustify} overflow="hidden">
+            <Text fg={cursorColor}>{overlay.labelText}</Text>
+          </Box>
+          {axisPaddingWidth > 0 ? <Box width={axisPaddingWidth} /> : null}
+        </Box>
       ) : null}
     </Box>
   );

package/src/components/chart/stock-chart-renderer-switch.test.tsx

@@ -382,7 +382,7 @@ describe("StockChart renderer switching", () => {
     const manager = getNativeSurfaceManager(testSetup.renderer as never) as unknown as {
       surfaces: Map<string, { snapshot: { rect: { height: number } } }>;
     };
-    expect(manager.surfaces.get("chart-surface:ticker-detail:test:full:base")?.snapshot.rect.height).toBe(11);
+    expect(manager.surfaces.get("chart-surface:ticker-detail:test:full:base")?.snapshot.rect.height).toBe(12);
   });
 
   test("moves candle OHLC summary into the pane footer", async () => {