react-native-vroom-chart 0.11.1 → 0.12.0

package/cpp/VroomChartHostObject.cpp

@@ -63,6 +63,7 @@ std::vector<jsi::PropNameID> ChartHostObject::getPropertyNames(
   out.push_back(jsi::PropNameID::forAscii(rt, "setBollinger"));
   out.push_back(jsi::PropNameID::forAscii(rt, "setVolume"));
   out.push_back(jsi::PropNameID::forAscii(rt, "setVolumeCollapse"));
+  out.push_back(jsi::PropNameID::forAscii(rt, "setAxisCollapse"));
   out.push_back(jsi::PropNameID::forAscii(rt, "coordAt"));
   out.push_back(jsi::PropNameID::forAscii(rt, "setPriceLines"));
   out.push_back(jsi::PropNameID::forAscii(rt, "hitTestPriceLine"));
@@ -919,6 +920,27 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
         });
   }
 
+  if (name == "setAxisCollapse") {
+    // setAxisCollapse(yT, xT) — hides the price / time axis strips. Both take
+    // EASED progress (0 shown, 1 hidden); there is no per-element stagger for
+    // the core to distribute, so the host owns the curve.
+    return jsi::Function::createFromHostFunction(
+        rt,
+        jsi::PropNameID::forAscii(rt, "setAxisCollapse"),
+        2,
+        [this](jsi::Runtime& /*rt2*/,
+               const jsi::Value& /*thisVal*/,
+               const jsi::Value* args,
+               size_t count) -> jsi::Value {
+          if (count < 2) return jsi::Value::undefined();
+          vroom_chart_set_axis_collapse(
+              chart_,
+              static_cast<float>(args[0].asNumber()),
+              static_cast<float>(args[1].asNumber()));
+          return jsi::Value::undefined();
+        });
+  }
+
   if (name == "coordAt") {
     // coordAt(x, y) -> { timeMs, price } | null. The continuous data coordinate
     // at a pixel — not snapped to a candle slot. Null when there are no candles

package/cpp/_core_include/vroom/vroom_chart.h

@@ -282,8 +282,12 @@ typedef enum {
     VROOM_COLOR_GRID,
     VROOM_COLOR_AXIS_TEXT,
     VROOM_COLOR_CROSSHAIR,
-    VROOM_COLOR_TOOLTIP_BG,
-    VROOM_COLOR_TOOLTIP_TEXT,
+    // Retired (was VROOM_COLOR_TOOLTIP_BG, never rendered). Held open because
+    // the TypeScript theme maps hardcode the indices below it.
+    VROOM_COLOR_RESERVED_7_,
+    // Text drawn on a filled badge: the current-price indicator, the crosshair's
+    // axis badges, and price-line pills. Defaults to white.
+    VROOM_COLOR_BADGE_TEXT,
     VROOM_COLOR_CROSSHAIR_TARGET,  // the hollow ring/dot at the intersection
     VROOM_COLOR_BORDER_BULL,       // bull body 1px outline; 0 alpha => inherit BULL fill
     VROOM_COLOR_BORDER_BEAR,       // bear body 1px outline; 0 alpha => inherit BEAR fill
@@ -564,6 +568,19 @@ void vroom_chart_set_volume(VroomChart* chart, const VroomVolume* cfg);
 // `enabled`, so the host only needs it while animating.
 void vroom_chart_set_volume_collapse(VroomChart* chart, float t, int32_t easing);
 
+// Collapses the axis strips: 0 leaves a strip at full size, 1 hides it. Driven
+// per-frame by the host animation loop, which owns the eased clock — unlike the
+// volume collapse there is no per-element stagger, so these take *eased*
+// progress directly.
+//
+// Hiding is a collapse rather than a zeroed dimension because the y-axis width
+// is measured from the widest price label and recomputed on most data changes,
+// which would overwrite a zero. The price pane grows into whatever the strips
+// give up, and each strip's contents (labels, price badge, crosshair and
+// price-line badges) fade out over the first half of the collapse so text is
+// never squeezed into a strip too narrow to hold it.
+void vroom_chart_set_axis_collapse(VroomChart* chart, float y_t, float x_t);
+
 // ---- Drawings (line annotations) ------------------------------------------
 
 // Replaces the full set of committed line drawings (data-anchored, so they track

package/cpp/_core_src/chart.cpp

@@ -64,13 +64,16 @@ vroom::Layout VroomChart::layout() const {
     return vroom::Layout{
         width_px,
         height_px,
-        axis_w,
-        theme.floats[VROOM_FLOAT_X_AXIS_HEIGHT_PX],
+        vroom::axis_extent(axis_w, y_axis_collapse_t),
+        vroom::axis_extent(theme.floats[VROOM_FLOAT_X_AXIS_HEIGHT_PX],
+                           x_axis_collapse_t),
         theme.floats[VROOM_FLOAT_RIGHT_PADDING_PX],
         theme.floats[VROOM_FLOAT_CANDLE_WIDTH_RATIO],
         0.05f,
         0.05f,
         indicator_h,
+        vroom::axis_opacity(y_axis_collapse_t),
+        vroom::axis_opacity(x_axis_collapse_t),
     };
 }
 

package/cpp/_core_src/chart.h

@@ -191,6 +191,13 @@ struct VroomChart {
     float volume_collapse_t = 0.f;
     int32_t volume_collapse_easing = VROOM_EASING_IN_OUT;
 
+    // Collapse of the axis strips, driven per-frame by the host animation loop:
+    // 0 = full strip, 1 = hidden. Unlike the volume collapse these change the
+    // layout, so the price pane grows into whatever the strips give up. The host
+    // pre-eases them (there is no per-element stagger to distribute here).
+    float y_axis_collapse_t = 0.f;
+    float x_axis_collapse_t = 0.f;
+
     // --- drawings (annotations) --------------------------------------------
     // Committed drawings, anchored in data space so they track the candles on
     // pan/zoom. Drawn on the price pane above candles/overlays.

package/cpp/_core_src/chart_facade.cpp

@@ -1401,6 +1401,15 @@ extern "C" void vroom_chart_set_volume_collapse(VroomChart* chart, float t,
     chart->mark_dirty();
 }
 
+extern "C" void vroom_chart_set_axis_collapse(VroomChart* chart, float y_t,
+                                              float x_t) {
+    if (!chart) return;
+    chart->y_axis_collapse_t = std::clamp(y_t, 0.f, 1.f);
+    chart->x_axis_collapse_t = std::clamp(x_t, 0.f, 1.f);
+    // Changes the layout, so every cached pane geometry has to be re-derived.
+    chart->mark_dirty();
+}
+
 // ---- Direct draw (used by hosts that don't need the SkPicture cache) ------
 
 extern "C" void vroom_chart_draw(VroomChart* chart, SkCanvas* canvas) {

package/cpp/_core_src/crosshair.cpp

@@ -42,7 +42,9 @@ void draw_badge(SkCanvas* canvas,
                 float cx,
                 float cy,
                 SkColor fill,
-                SkColor text_color) {
+                SkColor text_color,
+                float opacity) {
+    if (opacity <= 0.f) return;
     const size_t len = std::strlen(text);
     SkRect tb;
     const float text_w = font.measureText(text, len, SkTextEncoding::kUTF8, &tb);
@@ -54,11 +56,13 @@ void draw_badge(SkCanvas* canvas,
     SkPaint box;
     box.setAntiAlias(true);
     box.setColor(fill);
+    box.setAlphaf(box.getAlphaf() * opacity);
     canvas->drawRRect(SkRRect::MakeRectXY(rect, kCorner, kCorner), box);
 
     SkPaint text_paint;
     text_paint.setAntiAlias(true);
     text_paint.setColor(text_color);
+    text_paint.setAlphaf(text_paint.getAlphaf() * opacity);
     canvas->drawString(text, cx - text_w * 0.5f,
                        cy - (tb.fTop + tb.fBottom) * 0.5f, font, text_paint);
 }
@@ -108,8 +112,8 @@ void draw(SkCanvas* canvas,
     ring.setStrokeWidth(2.f);  // thicker border so the dot reads clearly
     canvas->drawCircle(cx, cy, kRingRadius, ring);
 
-    // Axis badges (neutral grey, white text) sit on top of the axis labels and
-    // the current-price indicator since the crosshair is the last draw step.
+    // Axis badges sit on top of the axis labels and the current-price indicator
+    // since the crosshair is the last draw step.
     // They need the axis typeface; if it isn't loaded the lines alone suffice.
     auto tf = vroom::axis_typeface();
     if (!tf) return;
@@ -119,6 +123,7 @@ void draw(SkCanvas* canvas,
     font.setEdging(SkFont::Edging::kSubpixelAntiAlias);
 
     const SkColor badge_fill = chart.theme.colors[VROOM_COLOR_CROSSHAIR_TARGET];
+    const SkColor badge_text = chart.theme.colors[VROOM_COLOR_BADGE_TEXT];
 
     // Date/time badge over the x-axis strip, centered on the vertical line and
     // vertically aligned with the time labels (centered in the strip).
@@ -140,7 +145,7 @@ void draw(SkCanvas* canvas,
         const float badge_cx =
             std::clamp(cx, half_w, std::max(half_w, candle_right - half_w));
         draw_badge(canvas, font, buf, badge_cx, strip_center_y, badge_fill,
-                   SK_ColorWHITE);
+                   badge_text, lay.x_axis_opacity);
     }
 
     // Price badge over the y-axis strip, centered on the horizontal line and
@@ -155,7 +160,7 @@ void draw(SkCanvas* canvas,
         vroom::format_price(buf, sizeof(buf), price, fmt);
         const float axis_center_x = lay.width_px - lay.y_axis_width_px * 0.5f;
         draw_badge(canvas, font, buf, axis_center_x, cy, badge_fill,
-                   SK_ColorWHITE);
+                   badge_text, lay.y_axis_opacity);
     }
 }
 

package/cpp/_core_src/labels.cpp

@@ -147,6 +147,9 @@ void draw_y_labels(SkCanvas* canvas,
                    const PriceBounds& bounds) {
     auto tf = vroom::axis_typeface();
     if (!tf) return;
+    // The fade state still advances in update_y_fades, so a hidden axis picks up
+    // wherever the ticks moved to once it is revealed again.
+    if (lay.y_axis_opacity <= 0.f) return;
 
     const float candle_area_h = vroom::price_pane_bottom(lay);
 
@@ -186,7 +189,7 @@ void draw_y_labels(SkCanvas* canvas,
         if (baseline_y - cap_h < 0.f) continue;
         if (baseline_y > candle_area_h) continue;
 
-        text_paint.setAlphaf(f.opacity);
+        text_paint.setAlphaf(f.opacity * lay.y_axis_opacity);
         canvas->drawString(buf, text_x, baseline_y, font, text_paint);
     }
 }
@@ -279,6 +282,8 @@ void draw_x_labels(SkCanvas* canvas,
     auto tf = vroom::axis_typeface();
     if (!tf || chart.candles.empty()) return;
     if (end_ms <= start_ms) return;
+    // See draw_y_labels: update_x_fades keeps running while the strip is hidden.
+    if (lay.x_axis_opacity <= 0.f) return;
 
     // X-axis labels live in the bottom strip, which stays anchored regardless
     // of any indicator pane above it.
@@ -345,7 +350,7 @@ void draw_x_labels(SkCanvas* canvas,
         if (text_x < 0.f) continue;
         if (text_x + text_w > candle_area_w) continue;
 
-        text_paint.setAlphaf(f.opacity);
+        text_paint.setAlphaf(f.opacity * lay.x_axis_opacity);
         canvas->drawString(buf, text_x, baseline_y, font, text_paint);
     }
 }

package/cpp/_core_src/macd_pane.cpp

@@ -211,14 +211,15 @@ void draw(SkCanvas* canvas,
     }
     canvas->restore();
 
-    // "0" label in the y-axis strip at the zero line.
-    if (tf) {
+    // "0" label in the y-axis strip at the zero line — hidden with that strip.
+    if (tf && lay.y_axis_opacity > 0.f) {
         SkFont font(tf, chart.theme.floats[VROOM_FLOAT_AXIS_FONT_SIZE_PX]);
         font.setSubpixel(true);
         font.setEdging(SkFont::Edging::kSubpixelAntiAlias);
         SkPaint text_paint;
         text_paint.setAntiAlias(true);
         text_paint.setColor(chart.theme.colors[VROOM_COLOR_AXIS_TEXT]);
+        text_paint.setAlphaf(text_paint.getAlphaf() * lay.y_axis_opacity);
         SkRect tb;
         const float tw =
             font.measureText("0", 1, SkTextEncoding::kUTF8, &tb);

package/cpp/_core_src/price_indicator.cpp

@@ -59,9 +59,11 @@ void draw(SkCanvas* canvas,
     canvas->drawLine(0.f, y, candle_right, y, line);
 
     // Price box in the y-axis strip. Needs the axis typeface; if it isn't
-    // loaded yet, the line alone still conveys the level.
+    // loaded yet, the line alone still conveys the level. Same when the y-axis
+    // is hidden — the level stays readable, it just loses its badge.
     auto tf = vroom::axis_typeface();
     if (!tf) return;
+    if (lay.y_axis_opacity <= 0.f) return;
 
     SkFont font(tf, chart.theme.floats[VROOM_FLOAT_AXIS_FONT_SIZE_PX]);
     font.setSubpixel(true);
@@ -95,14 +97,16 @@ void draw(SkCanvas* canvas,
     SkPaint box;
     box.setAntiAlias(true);
     box.setColor(color);
+    box.setAlphaf(box.getAlphaf() * lay.y_axis_opacity);
     canvas->drawRRect(SkRRect::MakeRectXY(rect, kCorner, kCorner), box);
 
-    // White price text, horizontally centered on the same axis center, and
-    // vertically centered: shift the baseline so the glyph bounds' midpoint
-    // lands on `y` (= the box center and the dotted line).
+    // Price text horizontally centered on the same axis center, and vertically
+    // centered: shift the baseline so the glyph bounds' midpoint lands on `y`
+    // (= the box center and the dotted line).
     SkPaint text_paint;
     text_paint.setAntiAlias(true);
-    text_paint.setColor(SK_ColorWHITE);
+    text_paint.setColor(chart.theme.colors[VROOM_COLOR_BADGE_TEXT]);
+    text_paint.setAlphaf(text_paint.getAlphaf() * lay.y_axis_opacity);
     const float text_x = axis_center_x - text_w * 0.5f;
     const float baseline_y = y - (tb.fTop + tb.fBottom) * 0.5f;
     canvas->drawString(buf, text_x, baseline_y, font, text_paint);

package/cpp/_core_src/price_lines.cpp

@@ -215,8 +215,10 @@ void draw_axis_badge(SkCanvas* canvas,
                      double price,
                      float y,
                      SkColor fill,
+                     SkColor text_color,
                      const PriceFormat& fmt) {
     if (lay.y_axis_width_px <= 0.f) return;
+    if (lay.y_axis_opacity <= 0.f) return;
 
     char buf[48];
     vroom::format_price(buf, sizeof(buf), price, fmt);
@@ -233,11 +235,13 @@ void draw_axis_badge(SkCanvas* canvas,
     SkPaint box;
     box.setAntiAlias(true);
     box.setColor(fill);
+    box.setAlphaf(box.getAlphaf() * lay.y_axis_opacity);
     canvas->drawRRect(SkRRect::MakeRectXY(rect, kCorner, kCorner), box);
 
     SkPaint text;
     text.setAntiAlias(true);
-    text.setColor(SK_ColorWHITE);
+    text.setColor(text_color);
+    text.setAlphaf(text.getAlphaf() * lay.y_axis_opacity);
     canvas->drawString(buf, cx - text_w * 0.5f,
                        y - (tb.fTop + tb.fBottom) * 0.5f, font, text);
 }
@@ -254,6 +258,7 @@ void draw(SkCanvas* canvas,
     if (chart.price_lines.empty()) return;
 
     const VroomPriceLineStyle& style = chart.price_line_style;
+    const SkColor badge_text = chart.theme.colors[VROOM_COLOR_BADGE_TEXT];
     SkFont font;
     const bool has_font = label_font(chart, &font);
     const vroom::PriceFormat fmt = vroom::with_tick_guard(
@@ -336,12 +341,12 @@ void draw(SkCanvas* canvas,
                                    line_color);
             }
             if (!group.quantity.empty()) {
-                // Solid fill + white text, so size reads at a glance against the
+                // Solid fill + badge text, so size reads at a glance against the
                 // translucent body.
                 draw_pill(canvas, group.quantity, first == &group.quantity,
                           last == &group.quantity, line_color, SK_ColorTRANSPARENT);
                 draw_centered_text(canvas, font, pl.quantity, group.quantity, y,
-                                   SK_ColorWHITE);
+                                   badge_text);
             }
             if (!group.close.empty()) {
                 const SkColor close_color =
@@ -357,7 +362,7 @@ void draw(SkCanvas* canvas,
 
         if (has_font && (pl.flags & VROOM_PRICE_LINE_AXIS_LABEL) != 0) {
             draw_axis_badge(canvas, font, lay, render_price(chart, i), y,
-                            line_color, fmt);
+                            line_color, badge_text, fmt);
         }
     }
 }

package/cpp/_core_src/rsi_pane.cpp

@@ -158,13 +158,15 @@ void draw(SkCanvas* canvas,
     // 70 / 30 labels in the y-axis strip (drawn after the clip; the strip's
     // background was already masked by draw_chart before this call). They label
     // the band rules, so they go with them.
-    if (tf && cfg.bands_visible) {
+    // The band labels live in the y-axis strip, so they go with it when it hides.
+    if (tf && cfg.bands_visible && lay.y_axis_opacity > 0.f) {
         SkFont font(tf, chart.theme.floats[VROOM_FLOAT_AXIS_FONT_SIZE_PX]);
         font.setSubpixel(true);
         font.setEdging(SkFont::Edging::kSubpixelAntiAlias);
         SkPaint text_paint;
         text_paint.setAntiAlias(true);
         text_paint.setColor(chart.theme.colors[VROOM_COLOR_AXIS_TEXT]);
+        text_paint.setAlphaf(text_paint.getAlphaf() * lay.y_axis_opacity);
 
         const float axis_center_x = lay.width_px - lay.y_axis_width_px * 0.5f;
         auto label = [&](const char* s, float y) {

package/cpp/_core_src/theme.cpp

@@ -13,8 +13,8 @@ constexpr uint32_t kDefaultColors[VROOM_COLOR_COUNT_] = {
     0xff1a1e24,  // GRID — ~20% darker than the crosshair so it recedes
     0xffc9d1d9,  // AXIS_TEXT
     0xff303741,  // CROSSHAIR — grid tone lightened ~44%; reads above GRID
-    0xff161b22,  // TOOLTIP_BG
-    0xffc9d1d9,  // TOOLTIP_TEXT
+    0x00000000,  // RESERVED_7_ — retired slot, never read
+    0xffffffff,  // BADGE_TEXT — text on filled badges/pills
     0xff3e4855,  // CROSSHAIR_TARGET — CROSSHAIR lightened 30% (prior derived ring)
     0x00000000,  // BORDER_BULL — transparent sentinel: inherit BULL fill
     0x00000000,  // BORDER_BEAR — transparent sentinel: inherit BEAR fill

package/cpp/_core_src/viewport.h

@@ -20,8 +20,40 @@ struct Layout {
     float top_padding_frac;     // fraction of candle area; keeps prices off edges
     float bottom_padding_frac;
     float indicator_area_h;     // height reserved for below-chart indicator panes
+    // Opacity of everything drawn *inside* an axis strip, 1 = shown, 0 = hidden.
+    // Separate from the strip's extent because the two ramp at different rates
+    // while an axis is being hidden or revealed (see axis_opacity).
+    float y_axis_opacity;
+    float x_axis_opacity;
 };
 
+// --- Axis show/hide ---------------------------------------------------------
+// An axis is hidden by collapsing its strip to nothing rather than by zeroing
+// the underlying dimension: the y-axis width is *measured* from the widest price
+// label (labels::recompute_axis_width) and gets recomputed constantly, so a zero
+// written there would not survive. `t` is the collapse progress the host eases,
+// 0 = fully shown, 1 = fully hidden.
+
+inline float clamp_collapse(float t) {
+    return t < 0.f ? 0.f : (t > 1.f ? 1.f : t);
+}
+
+// The strip's on-screen extent. Everything downstream (candle_area_width,
+// price_pane_bottom) is derived from this, so the plot reclaims the space as
+// the strip shrinks.
+inline float axis_extent(float base, float t) {
+    return base * (1.f - clamp_collapse(t));
+}
+
+// Opacity of the strip's contents. Deliberately front-loaded: the labels are
+// fully gone by the time the strip is halfway collapsed, so text never sits in
+// a strip too narrow to hold it.
+inline float axis_opacity(float t) {
+    constexpr float kFadeBy = 0.5f;  // fraction of the collapse spent fading
+    const float p = clamp_collapse(t) / kFadeBy;
+    return p >= 1.f ? 0.f : 1.f - p;
+}
+
 // Bottom of the price (candle) pane = top of the indicator band. Shrinks when
 // an indicator pane is present so candles, volume, and price labels reflow.
 inline float price_pane_bottom(const Layout& l) {

package/lib/index.d.mts

@@ -93,6 +93,13 @@ type VroomTheme = {
     grid?: VroomColor;
     /** Axis label text (price + time). */
     axisText?: VroomColor;
+    /**
+     * Text drawn on a filled badge — the current-price indicator, the crosshair's
+     * price and time badges, and price-line pills. Defaults to white, which reads
+     * against the saturated fills those badges use on a dark theme; light themes
+     * generally want a dark value here.
+     */
+    badgeText?: VroomColor;
     /** Crosshair dashed lines. */
     crosshair?: VroomColor;
     /** Crosshair target — the hollow ring/dot at the intersection. */
@@ -134,6 +141,26 @@ type VroomTheme = {
      * continuously — leave it off for charts that should be able to go idle.
      */
     lineTipPulse?: boolean;
+    /**
+     * Show the price (y) axis strip down the right edge. Defaults to `true`.
+     *
+     * Hiding it collapses the strip and hands the reclaimed width to the plot, so
+     * the candles widen to fill it. Its contents — price labels, the current-price
+     * badge, the crosshair price badge, price-line axis badges — fade out ahead of
+     * the collapse; gridlines and the price indicator's dotted line stay. Animated
+     * over `transitionMs` unless the OS asks for reduced motion.
+     *
+     * The axis drag-to-scale region goes with the strip, so a hidden axis can't be
+     * scaled by dragging it.
+     */
+    showYAxis?: boolean;
+    /**
+     * Show the time (x) axis strip along the bottom. Defaults to `true`.
+     *
+     * Behaves like {@link VroomTheme.showYAxis}: the strip collapses, the plot
+     * grows into it, and the time labels and crosshair time badge fade first.
+     */
+    showXAxis?: boolean;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {

package/lib/index.d.ts

@@ -93,6 +93,13 @@ type VroomTheme = {
     grid?: VroomColor;
     /** Axis label text (price + time). */
     axisText?: VroomColor;
+    /**
+     * Text drawn on a filled badge — the current-price indicator, the crosshair's
+     * price and time badges, and price-line pills. Defaults to white, which reads
+     * against the saturated fills those badges use on a dark theme; light themes
+     * generally want a dark value here.
+     */
+    badgeText?: VroomColor;
     /** Crosshair dashed lines. */
     crosshair?: VroomColor;
     /** Crosshair target — the hollow ring/dot at the intersection. */
@@ -134,6 +141,26 @@ type VroomTheme = {
      * continuously — leave it off for charts that should be able to go idle.
      */
     lineTipPulse?: boolean;
+    /**
+     * Show the price (y) axis strip down the right edge. Defaults to `true`.
+     *
+     * Hiding it collapses the strip and hands the reclaimed width to the plot, so
+     * the candles widen to fill it. Its contents — price labels, the current-price
+     * badge, the crosshair price badge, price-line axis badges — fade out ahead of
+     * the collapse; gridlines and the price indicator's dotted line stay. Animated
+     * over `transitionMs` unless the OS asks for reduced motion.
+     *
+     * The axis drag-to-scale region goes with the strip, so a hidden axis can't be
+     * scaled by dragging it.
+     */
+    showYAxis?: boolean;
+    /**
+     * Show the time (x) axis strip along the bottom. Defaults to `true`.
+     *
+     * Behaves like {@link VroomTheme.showYAxis}: the strip collapses, the plot
+     * grows into it, and the time labels and crosshair time badge fade first.
+     */
+    showXAxis?: boolean;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {

package/lib/index.js

@@ -163,6 +163,8 @@ var COLOR_KEYS = {
   // VROOM_COLOR_AXIS_TEXT
   crosshair: 6,
   // VROOM_COLOR_CROSSHAIR
+  badgeText: 8,
+  // VROOM_COLOR_BADGE_TEXT (7 is a retired slot)
   crosshairTarget: 9,
   // VROOM_COLOR_CROSSHAIR_TARGET
   borderBull: 10,
@@ -638,9 +640,13 @@ function VroomChart(props) {
       handle.setChartType(target);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return void 0;
+    }
+    if (morphFade.current === target) {
+      maybeStartAnim();
       return void 0;
     }
-    if (morphFade.current === target) return void 0;
     if (morphRaf.current != null) {
       cancelAnimationFrame(morphRaf.current);
       morphRaf.current = null;
@@ -651,6 +657,7 @@ function VroomChart(props) {
       handle.setChartType(target);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
       return void 0;
     }
     const from = morphFade.current;
@@ -671,6 +678,7 @@ function VroomChart(props) {
         handle.setChartType(target);
         const q = handle.render();
         if (q) pictureSV.value = q;
+        maybeStartAnim();
       }
     };
     morphRaf.current = requestAnimationFrame(step);
@@ -680,7 +688,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, reduceMotion, pictureSV]);
+  }, [handle, chartType, transitionMs, reduceMotion, pictureSV, maybeStartAnim]);
   const volumeRaf = (0, import_react2.useRef)(null);
   const volumeHandle = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -690,9 +698,13 @@ function VroomChart(props) {
     if (volumeHandle.current !== handle || volumeCollapseRef.current == null) {
       volumeHandle.current = handle;
       volumeCollapseRef.current = { t: target, easing };
+      maybeStartAnim();
+      return void 0;
+    }
+    if (volumeCollapseRef.current.t === target) {
+      maybeStartAnim();
       return void 0;
     }
-    if (volumeCollapseRef.current.t === target) return void 0;
     if (volumeRaf.current != null) {
       cancelAnimationFrame(volumeRaf.current);
       volumeRaf.current = null;
@@ -703,6 +715,7 @@ function VroomChart(props) {
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
       return void 0;
     }
     const from = volumeCollapseRef.current.t;
@@ -716,7 +729,12 @@ function VroomChart(props) {
       handle.setVolumeCollapse(t, kind);
       const p = handle.render();
       if (p) pictureSV.value = p;
-      volumeRaf.current = prog < 1 ? requestAnimationFrame(step) : null;
+      if (prog < 1) {
+        volumeRaf.current = requestAnimationFrame(step);
+      } else {
+        volumeRaf.current = null;
+        maybeStartAnim();
+      }
     };
     volumeRaf.current = requestAnimationFrame(step);
     return () => {
@@ -725,7 +743,86 @@ function VroomChart(props) {
         volumeRaf.current = null;
       }
     };
-  }, [handle, volume?.enabled, transitionMs, reduceMotion, pictureSV, volumeCollapseRef]);
+  }, [
+    handle,
+    volume?.enabled,
+    transitionMs,
+    reduceMotion,
+    pictureSV,
+    volumeCollapseRef,
+    maybeStartAnim
+  ]);
+  const axisRaf = (0, import_react2.useRef)(null);
+  const axisHandle = (0, import_react2.useRef)(null);
+  const axisCollapse = (0, import_react2.useRef)(null);
+  const showYAxis = theme?.showYAxis ?? true;
+  const showXAxis = theme?.showXAxis ?? true;
+  (0, import_react2.useEffect)(() => {
+    if (!handle) return void 0;
+    const targetY = showYAxis ? 0 : 1;
+    const targetX = showXAxis ? 0 : 1;
+    if (axisHandle.current !== handle || axisCollapse.current == null) {
+      axisHandle.current = handle;
+      axisCollapse.current = { y: targetY, x: targetX };
+      handle.setAxisCollapse(targetY, targetX);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return void 0;
+    }
+    const fromY = axisCollapse.current.y;
+    const fromX = axisCollapse.current.x;
+    if (fromY === targetY && fromX === targetX) {
+      maybeStartAnim();
+      return void 0;
+    }
+    if (axisRaf.current != null) {
+      cancelAnimationFrame(axisRaf.current);
+      axisRaf.current = null;
+    }
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (dur === 0 || reduceMotion) {
+      axisCollapse.current = { y: targetY, x: targetX };
+      handle.setAxisCollapse(targetY, targetX);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return void 0;
+    }
+    let startTs = null;
+    const step = (now) => {
+      if (startTs == null) startTs = now;
+      const prog = Math.min(1, (now - startTs) / dur);
+      const e = ease(easingRef.current, prog);
+      const y = prog < 1 ? fromY + (targetY - fromY) * e : targetY;
+      const x = prog < 1 ? fromX + (targetX - fromX) * e : targetX;
+      axisCollapse.current = { y, x };
+      handle.setAxisCollapse(y, x);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      if (prog < 1) {
+        axisRaf.current = requestAnimationFrame(step);
+      } else {
+        axisRaf.current = null;
+        maybeStartAnim();
+      }
+    };
+    axisRaf.current = requestAnimationFrame(step);
+    return () => {
+      if (axisRaf.current != null) {
+        cancelAnimationFrame(axisRaf.current);
+        axisRaf.current = null;
+      }
+    };
+  }, [
+    handle,
+    showYAxis,
+    showXAxis,
+    transitionMs,
+    reduceMotion,
+    pictureSV,
+    maybeStartAnim
+  ]);
   const hitAxis = (0, import_react2.useCallback)(
     (x, y) => {
       if (!handle) return "chart";