react-native-vroom-chart 0.6.0 → 0.7.0

package/lib/index.d.ts

@@ -82,7 +82,12 @@ type VroomTheme = {
     candleRadius?: number;
     /** Round the wick end caps. Defaults to false. */
     wickRoundCap?: boolean;
-    /** Corner radius (px) of the *top* of volume bars. Defaults to 0 (square). */
+    /**
+     * Corner radius (px) of the *top* of volume bars. Defaults to 0 (square).
+     *
+     * @deprecated Use `volume.radius`, which sits with the rest of the volume
+     * styling. This still applies when `volume.radius` is omitted.
+     */
     volumeRadius?: number;
     /** Gridlines. */
     grid?: VroomColor;
@@ -92,10 +97,16 @@ type VroomTheme = {
     crosshair?: VroomColor;
     /** Crosshair target — the hollow ring/dot at the intersection. */
     crosshairTarget?: VroomColor;
-    /** Line-chart-mode close polyline color. Defaults to a neutral foreground. */
+    /** Line-chart-mode close polyline color. Defaults to violet, matching the RSI line. */
     lineColor?: VroomColor;
     /** Line-chart-mode polyline stroke width in px. Defaults to 1.5. */
     lineWidth?: number;
+    /**
+     * Opacity of the gradient filled beneath the line-chart polyline, at its
+     * strongest point. The fill uses `lineColor` and ramps to fully transparent at
+     * the bottom of the price pane. Defaults to 0.28; set to 0 to disable the fill.
+     */
+    lineGradientOpacity?: number;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {
@@ -117,6 +128,11 @@ type ChartMode = 'pan' | 'draw';
  *               overlays, crosshair, and drawings still render.
  */
 type ChartType = 'candles' | 'line';
+/**
+ * Easing curve for animated transitions (candle↔line and interval switches).
+ * Defaults to `'ease-in-out'`.
+ */
+type TransitionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
 /** Active drawing tool while in `draw` mode. `null` draws nothing. */
 type DrawTool = null | 'line' | 'box' | 'pencil';
 /** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
@@ -226,8 +242,21 @@ type UndoRedoControls = {
      */
     clearHistory: () => void;
 };
-/** RSI indicator config. Rendered in a pane below the candles when enabled. */
+/** Price source for a moving average. */
+type MASource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4';
+/** Averaging used by a moving average: simple or exponential. */
+type MAKind = 'sma' | 'ema';
+/**
+ * RSI indicator config. Rendered in a pane below the candles when enabled: the
+ * RSI line, an optional moving-average trendline over it, and two dashed rules
+ * at the overbought and oversold levels.
+ *
+ * RSI reads closes only — Wilder's definition is built on close-to-close
+ * change — so unlike the moving-average, Bollinger, and MACD configs it takes
+ * no {@link MASource}.
+ */
 type RSIConfig = {
+    /** Draw the pane. Default false. */
     enabled?: boolean;
     /** Lookback period in candle counts. Default 14, clamped to >= 2. */
     period?: number;
@@ -235,23 +264,37 @@ type RSIConfig = {
     upperBand?: number;
     /** Oversold band level (0..100). Default 30. */
     lowerBand?: number;
-    /** Show the RSI-based moving-average trendline. Default true. */
-    maEnabled?: boolean;
     /** Trendline (MA of RSI) length. Default 14, clamped to >= 1. */
     maPeriod?: number;
+    /** Averaging used for the trendline ({@link MAKind}). Default 'sma'. */
+    maType?: MAKind;
+    /** Draw the moving-average trendline. Default true. */
+    maVisible?: boolean;
+    /** RSI line color (hex string or packed ARGB number). Default violet. */
+    lineColor?: string | number;
+    /** RSI line stroke width in px. Default 1.5. */
+    lineWidth?: number;
+    /** Draw the RSI line. Default true. */
+    lineVisible?: boolean;
+    /** Trendline color. Default amber. */
+    maColor?: string | number;
+    /** Trendline stroke width in px. Default 1.5. */
+    maWidth?: number;
+    /** Color of both dashed band rules. Default gray. */
+    bandColor?: string | number;
+    /** Draw the overbought/oversold rules. Default true. */
+    bandsVisible?: boolean;
 };
-/** Price source for a moving average. */
-type MASource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4';
 /**
  * A moving-average overlay line drawn on the price pane. Provide an array of
  * these via `movingAverages` to render a ribbon of SMA/EMA lines.
  */
 type MovingAverageOverlay = {
-    /** 'sma' (simple) or 'ema' (exponential). */
-    kind: 'sma' | 'ema';
+    /** Averaging for this line ({@link MAKind}). */
+    maType: MAKind;
     /** Lookback in candles. */
-    length: number;
-    /** Price source. Default 'close'. */
+    period: number;
+    /** Price source ({@link MASource}). Default 'close'. */
     source?: MASource;
     /** Line color (hex string or packed ARGB number). */
     color?: string | number;
@@ -263,6 +306,7 @@ type MovingAverageOverlay = {
  * pane, resetting each session.
  */
 type VWAPConfig = {
+    /** Draw the line. Default false. */
     enabled?: boolean;
     /** Session reset offset from UTC midnight, in minutes (default 0). */
     resetMinutes?: number;
@@ -278,18 +322,20 @@ type VWAPConfig = {
  * fill between the bands. No pane is reserved.
  */
 type BollingerBandsConfig = {
+    /** Draw the bands. Default false. */
     enabled?: boolean;
     /** Lookback in candles. Default 20, clamped to >= 1. */
     period?: number;
     /** Standard-deviation multiplier. Default 2. */
     stdDev?: number;
-    /** Price source. Default 'close'. */
+    /** Price source ({@link MASource}). Default 'close'. */
     source?: MASource;
     /**
-     * Basis (middle) line type. Default 'sma'. The stdev always uses the
-     * window's arithmetic mean, even with an EMA basis (TradingView semantics).
+     * Averaging for the basis (middle) line ({@link MAKind}). Default 'sma'. The
+     * stdev always uses the window's arithmetic mean, even with an EMA basis
+     * (the standard semantics).
      */
-    basis?: 'sma' | 'ema';
+    maType?: MAKind;
     /** Upper band color (hex string or packed ARGB number). Default blue. */
     upperColor?: string | number;
     /** Upper band stroke width in px. Default 1. */
@@ -302,11 +348,40 @@ type BollingerBandsConfig = {
     lowerColor?: string | number;
     /** Lower band stroke width in px. Default 1. */
     lowerWidth?: number;
-    /** Translucent fill between the bands. Default true. */
-    fill?: boolean;
+    /** Draw the translucent fill between the bands. Default true. */
+    fillVisible?: boolean;
     /** Fill opacity 0..1, applied to the upper band color. Default 0.1. */
     fillOpacity?: number;
 };
+/**
+ * Volume bar config. One bottom-anchored bar per candle on the price pane,
+ * drawn under the candles and sharing their x position and body width.
+ *
+ * Unlike the other indicator configs the bars are on by default, so omitting
+ * this prop leaves the chart looking as it always has.
+ */
+type VolumeConfig = {
+    /** Draw the bars. Default true. */
+    enabled?: boolean;
+    /** Bar opacity 0..1 (1 = opaque). Default 0.5, so bars read quieter than the candles. */
+    opacity?: number;
+    /**
+     * Height of the tallest bar as a fraction of the price pane, 0..1.
+     * Default 0.2.
+     *
+     * This is a ceiling rather than a reserved strip: raising it lets the bars
+     * reach further up over the candles rather than compressing them, matching
+     * the conventional volume overlay. Heights always auto-fit the loudest volume
+     * in view, so the tallest bar sits exactly at the ceiling.
+     */
+    height?: number;
+    /** Corner radius (px) of the *top* of each bar. Defaults to `theme.volumeRadius`, else 0 (square). */
+    radius?: number;
+    /** Up-bar color (hex string or packed ARGB number). Defaults to `theme.accentBull`. */
+    upColor?: string | number;
+    /** Down-bar color (hex string or packed ARGB number). Defaults to `theme.accentBear`. */
+    downColor?: string | number;
+};
 /**
  * A single resting-liquidity band: a price interval carrying a total order size
  * on one side of the book. Consolidate raw L2 levels into these buckets before
@@ -360,9 +435,9 @@ type LiquidityConfig = {
  * plus an optional solid-filled `quantity` pill and an optional close button),
  * with a price badge in the y-axis strip.
  *
- * Interaction is opt-in and callback-gated, mirroring TradingView: the line is
- * only draggable when `draggable` is set, and the close button only renders when
- * you pass `onPriceLineClose`. Dragging is a *preview* — the chart never mutates
+ * Interaction is opt-in and callback-gated: the line is only draggable when
+ * `draggable` is set, and the close button only renders when you pass
+ * `onPriceLineClose`. Dragging is a *preview* — the chart never mutates
  * the price you gave it, so a move your backend rejects reverts on its own
  * simply by leaving your `priceLines` state unchanged.
  */
@@ -424,15 +499,65 @@ type PriceLinesStyle = {
      */
     hoverBoost?: number;
 };
-/** MACD indicator config. Rendered in its own pane below the candles. */
+/**
+ * MACD indicator config. Rendered in its own pane below the candles: the gap
+ * between a fast and a slow moving average, a signal line smoothing that gap,
+ * and a histogram of the distance between the two.
+ *
+ * Every style field is optional and falls back to the stock look, so an
+ * untouched config renders exactly as it always has.
+ */
 type MACDConfig = {
+    /** Draw the pane. Default false. */
     enabled?: boolean;
-    /** Fast EMA length. Default 12. */
+    /** Fast moving-average length. Default 12. */
     fast?: number;
-    /** Slow EMA length (forced > fast). Default 26. */
+    /** Slow moving-average length (forced > fast). Default 26. */
     slow?: number;
-    /** Signal-line EMA length. Default 9. */
+    /** Signal-line length. Default 9. */
     signal?: number;
+    /** Price source for the fast/slow legs ({@link MASource}). Default 'close'. */
+    source?: MASource;
+    /** Averaging used for the fast and slow legs ({@link MAKind}). Default 'ema'. */
+    maType?: MAKind;
+    /** Averaging applied to the MACD series for the signal line. Default 'ema'. */
+    signalMaType?: MAKind;
+    /** MACD line color (hex string or packed ARGB number). Default blue. */
+    lineColor?: string | number;
+    /** MACD line stroke width in px. Default 1.5. */
+    lineWidth?: number;
+    /** Draw the MACD line. Default true. */
+    lineVisible?: boolean;
+    /** Signal line color. Default orange. */
+    signalColor?: string | number;
+    /** Signal line stroke width in px. Default 1.5. */
+    signalWidth?: number;
+    /** Draw the signal line. Default true. */
+    signalVisible?: boolean;
+    /** Draw the histogram bars. Default true. */
+    histogramVisible?: boolean;
+    /**
+     * Bars above zero that are still growing away from it. Defaults to
+     * `theme.accentBull`. Set all four histogram colors alike for a flat,
+     * single-color histogram.
+     */
+    histogramUpColor?: string | number;
+    /**
+     * Bars above zero that are falling back toward it, i.e. momentum easing.
+     * Defaults to `histogramUpColor` at half opacity.
+     */
+    histogramUpFadingColor?: string | number;
+    /** Bars below zero still growing away from it. Defaults to `theme.accentBear`. */
+    histogramDownColor?: string | number;
+    /**
+     * Bars below zero rising back toward it. Defaults to `histogramDownColor` at
+     * half opacity.
+     */
+    histogramDownFadingColor?: string | number;
+    /** Zero-reference line color. Default gray. */
+    zeroLineColor?: string | number;
+    /** Draw the zero-reference line. Default true. */
+    zeroLineVisible?: boolean;
 };
 /**
  * Platform-agnostic props shared by every vroom chart component. Each platform
@@ -474,11 +599,17 @@ type VroomChartCoreProps = {
      */
     chartType?: ChartType;
     /**
-     * Duration (ms) of the animated candle↔line transition when `chartType`
-     * changes. Default ~300. `0` snaps instantly. Ignored (snaps) when the OS
-     * requests reduced motion, which instead uses a plain cross-fade.
+     * Duration (ms) of the animated transitions: the candle↔line switch when
+     * `chartType` changes, and the candle reshape when the `candles` array is
+     * swapped for a different interval of the same asset. Default ~300. `0` snaps
+     * instantly. Ignored (snaps) when the OS requests reduced motion, which
+     * instead uses a plain cross-fade.
      */
     transitionMs?: number;
+    /**
+     * Easing curve applied to those transitions. Default `'ease-in-out'`.
+     */
+    transitionEasing?: TransitionEasing;
     theme?: VroomTheme;
     /** RSI indicator (pane below the candles). Omit/disable to hide it. */
     rsi?: RSIConfig;
@@ -490,6 +621,8 @@ type VroomChartCoreProps = {
     vwap?: VWAPConfig;
     /** Bollinger Bands overlay (three lines + fill on the price pane). */
     bollingerBands?: BollingerBandsConfig;
+    /** Volume bars under the candles. On by default; disable or restyle them here. */
+    volume?: VolumeConfig;
     /** Resting-order / order-book liquidity bands drawn behind the candles. */
     liquidity?: LiquidityConfig;
     /**
@@ -650,4 +783,4 @@ declare global {
  */
 declare function VroomChart(props: VroomChartProps): React.JSX.Element;
 
-export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };
+export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };

package/lib/index.js

@@ -104,8 +104,10 @@ var FLOAT_KEYS = {
   // VROOM_FLOAT_CANDLE_RADIUS_PX
   volumeRadius: 10,
   // VROOM_FLOAT_VOLUME_RADIUS_PX
-  lineWidth: 11
+  lineWidth: 11,
   // VROOM_FLOAT_LINE_WIDTH_PX
+  lineGradientOpacity: 12
+  // VROOM_FLOAT_LINE_GRADIENT_OPACITY
 };
 var BOOL_KEYS = {
   wickRoundCap: 9
@@ -151,16 +153,43 @@ var MA_SOURCES = [
   "hlc3",
   "ohlc4"
 ];
+var inheritColor = (v) => (v != null ? parseColor(v) : null) ?? 0;
 function overlayToNumeric(o) {
   const srcIdx = o.source ? MA_SOURCES.indexOf(o.source) : 0;
   return {
-    kind: o.kind === "ema" ? 1 : 0,
-    period: o.length,
+    kind: o.maType === "ema" ? 1 : 0,
+    period: o.period,
     source: srcIdx < 0 ? 0 : srcIdx,
     color: (o.color != null ? parseColor(o.color) : null) ?? 4280902399,
     width: o.width ?? 1.5
   };
 }
+function rsiToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    period: cfg?.period ?? 14,
+    upperBand: cfg?.upperBand ?? 70,
+    lowerBand: cfg?.lowerBand ?? 30,
+    maPeriod: cfg?.maPeriod ?? 14,
+    maKind: cfg?.maType === "ema" ? 1 : 0,
+    maVisible: cfg?.maVisible ?? true,
+    lineColor: inheritColor(cfg?.lineColor),
+    lineWidth: cfg?.lineWidth ?? -1,
+    lineVisible: cfg?.lineVisible ?? true,
+    maColor: inheritColor(cfg?.maColor),
+    maWidth: cfg?.maWidth ?? -1,
+    bandColor: inheritColor(cfg?.bandColor),
+    bandsVisible: cfg?.bandsVisible ?? true
+  };
+}
+function vwapToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? false,
+    resetOffsetMin: cfg?.resetMinutes ?? 0,
+    color: inheritColor(cfg?.color),
+    width: cfg?.width ?? -1
+  };
+}
 var DEFAULT_BB_BAND_COLOR = 4280902399;
 var DEFAULT_BB_BASIS_COLOR = 4294929664;
 function bollingerToSpec(cfg) {
@@ -170,17 +199,52 @@ function bollingerToSpec(cfg) {
     period: cfg?.period ?? 20,
     mult: cfg?.stdDev ?? 2,
     source: srcIdx < 0 ? 0 : srcIdx,
-    basisKind: cfg?.basis === "ema" ? 1 : 0,
+    basisKind: cfg?.maType === "ema" ? 1 : 0,
     upperColor: (cfg?.upperColor != null ? parseColor(cfg.upperColor) : null) ?? DEFAULT_BB_BAND_COLOR,
     upperWidth: cfg?.upperWidth ?? 1,
     middleColor: (cfg?.middleColor != null ? parseColor(cfg.middleColor) : null) ?? DEFAULT_BB_BASIS_COLOR,
     middleWidth: cfg?.middleWidth ?? 1,
     lowerColor: (cfg?.lowerColor != null ? parseColor(cfg.lowerColor) : null) ?? DEFAULT_BB_BAND_COLOR,
     lowerWidth: cfg?.lowerWidth ?? 1,
-    fillEnabled: cfg?.fill ?? true,
+    fillEnabled: cfg?.fillVisible ?? true,
     fillOpacity: cfg?.fillOpacity ?? 0.1
   };
 }
+function macdToSpec(cfg) {
+  const srcIdx = cfg?.source ? MA_SOURCES.indexOf(cfg.source) : 0;
+  return {
+    enabled: cfg?.enabled ?? false,
+    fast: cfg?.fast ?? 12,
+    slow: cfg?.slow ?? 26,
+    signal: cfg?.signal ?? 9,
+    source: srcIdx < 0 ? 0 : srcIdx,
+    maKind: cfg?.maType === "sma" ? 0 : 1,
+    signalMaKind: cfg?.signalMaType === "sma" ? 0 : 1,
+    lineColor: inheritColor(cfg?.lineColor),
+    lineWidth: cfg?.lineWidth ?? -1,
+    lineVisible: cfg?.lineVisible ?? true,
+    signalColor: inheritColor(cfg?.signalColor),
+    signalWidth: cfg?.signalWidth ?? -1,
+    signalVisible: cfg?.signalVisible ?? true,
+    histVisible: cfg?.histogramVisible ?? true,
+    histUpColor: inheritColor(cfg?.histogramUpColor),
+    histUpFadingColor: inheritColor(cfg?.histogramUpFadingColor),
+    histDownColor: inheritColor(cfg?.histogramDownColor),
+    histDownFadingColor: inheritColor(cfg?.histogramDownFadingColor),
+    zeroColor: inheritColor(cfg?.zeroLineColor),
+    zeroVisible: cfg?.zeroLineVisible ?? true
+  };
+}
+function volumeToSpec(cfg) {
+  return {
+    enabled: cfg?.enabled ?? true,
+    heightFrac: cfg?.height ?? -1,
+    opacity: cfg?.opacity ?? -1,
+    radiusPx: cfg?.radius ?? -1,
+    upColor: (cfg?.upColor != null ? parseColor(cfg.upColor) : null) ?? 0,
+    downColor: (cfg?.downColor != null ? parseColor(cfg.downColor) : null) ?? 0
+  };
+}
 var DEFAULT_PRICE_LINE_COLOR = 4293874512;
 var DEFAULT_PRICE_LINE_BODY_BG = 3642499368;
 var DEFAULT_PRICE_LINE_HOVER_BOOST = 1.25;
@@ -218,9 +282,10 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, priceLines) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
+  const volumeCollapseRef = (0, import_react.useRef)(null);
   const [picture, setPicture] = (0, import_react.useState)(null);
   if (!handleRef.current && size.width > 0 && size.height > 0) {
     ensureInstalled();
@@ -235,6 +300,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const maKey = movingAverages ? JSON.stringify(movingAverages) : "";
   const vwapKey = vwap ? JSON.stringify(vwap) : "";
   const bollingerKey = bollingerBands ? JSON.stringify(bollingerBands) : "";
+  const volumeKey = volume ? JSON.stringify(volume) : "";
   const priceLinesKey = priceLines ? JSON.stringify(priceLines) : "";
   (0, import_react.useEffect)(() => {
     const h = handleRef.current;
@@ -253,34 +319,44 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     if (theme) {
       applyTheme(h, theme);
     }
-    h.setRSI(
-      rsi?.enabled ?? false,
-      rsi?.period ?? 14,
-      rsi?.upperBand ?? 70,
-      rsi?.lowerBand ?? 30,
-      rsi?.maEnabled ?? true,
-      rsi?.maPeriod ?? 14
-    );
-    h.setMACD(
-      macd?.enabled ?? false,
-      macd?.fast ?? 12,
-      macd?.slow ?? 26,
-      macd?.signal ?? 9
-    );
+    h.setRSI(rsiToSpec(rsi));
+    h.setMACD(macdToSpec(macd));
     h.setOverlays((movingAverages ?? []).map(overlayToNumeric));
-    h.setVWAP(
-      vwap?.enabled ?? false,
-      vwap?.resetMinutes ?? 0,
-      (vwap?.color != null ? parseColor(vwap.color) : null) ?? 4278238420,
-      vwap?.width ?? 1.5
-    );
+    h.setVWAP(vwapToSpec(vwap));
     h.setBollinger(bollingerToSpec(bollingerBands));
+    h.setVolume(volumeToSpec(volume));
+    const collapse = volumeCollapseRef.current;
+    if (collapse) h.setVolumeCollapse(collapse.t, collapse.easing);
     h.setPriceLines(
       priceLines?.lines.length ? priceLinesToSpec(priceLines) : EMPTY_PRICE_LINES
     );
     setPicture(h.render());
-  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, priceLinesKey]);
-  return { handle: handleRef.current, picture };
+  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey]);
+  return { handle: handleRef.current, picture, volumeCollapseRef };
+}
+
+// src/easing.ts
+function ease(kind, p) {
+  switch (kind) {
+    case "linear":
+      return p;
+    case "ease-in":
+      return p * p;
+    case "ease-out":
+      return p * (2 - p);
+    default:
+      return p * p * (3 - 2 * p);
+  }
+}
+var EASINGS = [
+  "linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out"
+];
+function easingIndex(kind) {
+  const i = kind ? EASINGS.indexOf(kind) : -1;
+  return i < 0 ? EASINGS.indexOf("ease-in-out") : i;
 }
 
 // src/VroomChart.tsx
@@ -294,12 +370,14 @@ function VroomChart(props) {
     defaultCandleWidth,
     chartType,
     transitionMs,
+    transitionEasing,
     theme,
     rsi,
     macd,
     movingAverages,
     vwap,
     bollingerBands,
+    volume,
     crosshairOffset = 40,
     onCrosshair,
     onViewportChange,
@@ -327,7 +405,7 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
-  const { handle, picture } = useChartCore(
+  const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
     { width, height },
     visibleRange,
@@ -339,6 +417,7 @@ function VroomChart(props) {
     movingAverages,
     vwap,
     bollingerBands,
+    volume,
     priceLinesProp
   );
   const emptyPicture = (0, import_react2.useMemo)(() => {
@@ -386,6 +465,8 @@ function VroomChart(props) {
   const morphRaf = (0, import_react2.useRef)(null);
   const morphFade = (0, import_react2.useRef)(null);
   const morphHandle = (0, import_react2.useRef)(null);
+  const easingRef = (0, import_react2.useRef)(transitionEasing);
+  easingRef.current = transitionEasing;
   (0, import_react2.useEffect)(() => {
     if (!handle) return void 0;
     const target = chartType === "line" ? 1 : 0;
@@ -415,8 +496,7 @@ function VroomChart(props) {
     const step = (now) => {
       if (startTs == null) startTs = now;
       const prog = Math.min(1, (now - startTs) / dur);
-      const e = prog * prog * (3 - 2 * prog);
-      const fade = from + (target - from) * e;
+      const fade = from + (target - from) * ease(easingRef.current, prog);
       morphFade.current = fade;
       handle.setMorph(fade, fade);
       const p = handle.render();
@@ -439,6 +519,51 @@ function VroomChart(props) {
       }
     };
   }, [handle, chartType, transitionMs, pictureSV]);
+  const volumeRaf = (0, import_react2.useRef)(null);
+  const volumeHandle = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!handle) return void 0;
+    const target = volume?.enabled ?? true ? 0 : 1;
+    const easing = easingIndex(easingRef.current);
+    if (volumeHandle.current !== handle || volumeCollapseRef.current == null) {
+      volumeHandle.current = handle;
+      volumeCollapseRef.current = { t: target, easing };
+      return void 0;
+    }
+    if (volumeCollapseRef.current.t === target) return void 0;
+    if (volumeRaf.current != null) {
+      cancelAnimationFrame(volumeRaf.current);
+      volumeRaf.current = null;
+    }
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (dur === 0) {
+      volumeCollapseRef.current = { t: target, easing };
+      handle.setVolumeCollapse(target, easing);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      return void 0;
+    }
+    const from = volumeCollapseRef.current.t;
+    let startTs = null;
+    const step = (now) => {
+      if (startTs == null) startTs = now;
+      const prog = Math.min(1, (now - startTs) / dur);
+      const t = prog < 1 ? from + (target - from) * prog : target;
+      const kind = easingIndex(easingRef.current);
+      volumeCollapseRef.current = { t, easing: kind };
+      handle.setVolumeCollapse(t, kind);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      volumeRaf.current = prog < 1 ? requestAnimationFrame(step) : null;
+    };
+    volumeRaf.current = requestAnimationFrame(step);
+    return () => {
+      if (volumeRaf.current != null) {
+        cancelAnimationFrame(volumeRaf.current);
+        volumeRaf.current = null;
+      }
+    };
+  }, [handle, volume?.enabled, transitionMs, pictureSV, volumeCollapseRef]);
   const hitAxis = (0, import_react2.useCallback)(
     (x, y) => {
       if (!handle) return "chart";