@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

package/src/building-blocks/chart-line/chart-line-base.ts

@@ -42,7 +42,13 @@ import {
   formatXValue,
   XValueMode,
   observeLabelThreshold,
+  measureRangeLabelGutters,
+  rangeLabelFontString,
+  rangeLabelLineHeight,
+  formatRangeValue,
+  yRangeLabelValues,
 } from '../../charthelpers/index.js';
+import type {RangeLabelFont} from '../../charthelpers/index.js';
 import type {ChartXValue} from '../../charthelpers/x-value.js';
 import {
   EXTERNAL_SCALE_BORDER_RADIUS_CSS_VAR,
@@ -91,6 +97,8 @@ interface ExternalScaleElement extends HTMLElement {
   paddingEnd?: number;
   primaryTickmarkInterval?: number;
   showLabels?: boolean;
+  showMainTickmarkLabels?: boolean;
+  labelThickness?: number;
   fixedAspectRatio?: boolean;
   scaleReferenceSize?: number;
   state?: InstrumentState;
@@ -123,6 +131,14 @@ export enum TimeDisplay {
   date = 'date',
 }
 
+/** Which axes keep min / max labels below the label threshold. */
+export enum RangeLabels {
+  none = 'none',
+  y = 'y',
+  x = 'x',
+  xy = 'xy',
+}
+
 export type ChartLinePoint = number | {x: ChartXValue; y: number};
 
 export type ChartLineDataItem = {
@@ -145,6 +161,11 @@ export type ChartLineYAxisConfig = {
   grid?: boolean;
 };
 
+export type ChartLineXAxisConfig = {
+  min?: number;
+  max?: number;
+};
+
 const LINE_GRAPH_WATCHED_PROP_NAMES = [
   'data',
   'datasets',
@@ -153,6 +174,7 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   'xAxisType',
   'yAxisPosition',
   'yAxes',
+  'xAxis',
   'showGrid',
   'showGridX',
   'showGridY',
@@ -173,6 +195,7 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   'height',
   'fixedAspectRatioScaling', // Triggers responsive mode change
   'hasLabelPadding', // Toggles edge-to-edge rendering and label visibility
+  'rangeLabels',
 ] as const;
 
 const LINE_GRAPH_RECREATE_PROP_NAMES = [
@@ -180,6 +203,7 @@ const LINE_GRAPH_RECREATE_PROP_NAMES = [
   'width',
   'height',
   'fixedAspectRatioScaling',
+  'rangeLabels', // Adds or removes the range-labels plugin
 ] as const;
 
 /**
@@ -347,12 +371,21 @@ const LINE_GRAPH_DIMENSION_PROP_NAMES = [
  *   numeric x-values.
  * @property yAxisPosition - Single y-axis position ('left' or 'right'). For multiple y-axes, use yAxes instead.
  * @property yAxes - Multiple y-axis definitions for complex multi-axis charts.
+ * @property xAxis - Pinned x range (`min`/`max`) for time and number axes. Without it the
+ *   axis spans exactly the data, so a window that is still filling stretches across the
+ *   full width. In `minutes` display `max` is the `0min` reference.
+ * @availableWhen xAxis xAxisType!=category
  * @property showGrid - Show grid lines.
  * @property showGridX - Show vertical grid lines (x-axis). Default: false.
  * @availableWhen showGridX showGrid==true
  * @property showGridY - Show horizontal grid lines (y-axis). Default: false.
  * @availableWhen showGridY showGrid==true
  * @property showTickMarks - Show axis tick marks and labels.
+ * @property rangeLabels - Labels kept below the 192px threshold, where the axis labels are
+ *   otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the
+ *   y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both.
+ *   Ignored when `hasLabelPadding` is false.
+ * @availableWhen rangeLabels hasLabelPadding==true
  * @property showPoints - Show point markers on data points. Default: false.
  * @property lineMode - Line drawing style: 'smooth' (curved), 'straight', or 'stepped'.
  * @property unit - Unit label displayed in tooltips (e.g., 'kW', 'kg', '%').
@@ -417,6 +450,9 @@ export class ObcChartLineBase extends LitElement {
   @property({type: Array, attribute: false})
   yAxes?: ChartLineYAxisConfig[] = undefined;
 
+  @property({type: Object, attribute: false})
+  xAxis?: ChartLineXAxisConfig = undefined;
+
   @property({type: Boolean})
   showGrid = false;
 
@@ -449,6 +485,27 @@ export class ObcChartLineBase extends LitElement {
   @property({type: Boolean, attribute: false})
   hasLabelPadding = true;
 
+  @property({type: String})
+  rangeLabels: RangeLabels = RangeLabels.none;
+
+  /** @internal - The y side wants range labels; an edge-to-edge chart never does. */
+  protected get rangeLabelsY(): boolean {
+    return (
+      this.hasLabelPadding &&
+      (this.rangeLabels === RangeLabels.y ||
+        this.rangeLabels === RangeLabels.xy)
+    );
+  }
+
+  /** @internal - The x side wants range labels; an edge-to-edge chart never does. */
+  protected get rangeLabelsX(): boolean {
+    return (
+      this.hasLabelPadding &&
+      (this.rangeLabels === RangeLabels.x ||
+        this.rangeLabels === RangeLabels.xy)
+    );
+  }
+
   /** @internal - True when the x-axis positions points by numeric value. */
   protected get isNumericXAxis(): boolean {
     return (
@@ -456,6 +513,14 @@ export class ObcChartLineBase extends LitElement {
     );
   }
 
+  /**
+   * Id of the y scale a dataset lands on when it names none. Chart.js would
+   * otherwise add a default `y` scale next to the configured ones and draw it.
+   */
+  private get primaryYAxisId(): string {
+    return this.yAxes?.length ? (this.yAxes[0].id ?? 'y0') : 'y';
+  }
+
   /** @internal - Normalization mode for the current x-axis type. */
   protected get xValueMode(): XValueMode {
     return this.xAxisType === XAxisType.number
@@ -466,6 +531,9 @@ export class ObcChartLineBase extends LitElement {
   /** @internal - Last data/datasets reference already warned about. */
   private lastWarnedXSource?: unknown;
 
+  /** @internal - Whether the `date`-display scale warning has been issued. */
+  private warnedDateDisplayScale = false;
+
   /** @internal - Warn once per data assignment about unparseable x-values. */
   private warnOnInvalidX(xValues: number[], sourceRef: unknown) {
     const invalid = xValues.filter((x) => !Number.isFinite(x)).length;
@@ -621,18 +689,303 @@ export class ObcChartLineBase extends LitElement {
    */
 
   /**
-   * Check if a slotted scale element is actually visible (renders content).
-   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   * @internal - Label band each slotted scale had before the chart narrowed
+   * it for compact labels, so it can be given back on the way out.
    */
-  private hasVisibleScale(side: 'left' | 'right' | 'top' | 'bottom'): boolean {
-    const slotMap = {
+  private savedLabelThickness = new WeakMap<ExternalScaleElement, number>();
+  private savedMainTickmarkLabels = new WeakMap<
+    ExternalScaleElement,
+    boolean
+  >();
+  /** Last known threshold side, to notice a crossing in `updated()`. */
+  private wasBelowThreshold?: boolean;
+
+  /**
+   * Label band a slotted scale needs for its compact labels, in the scale's
+   * own viewBox units. The scale prints the raw values, so those are what is
+   * measured; the x band is one text line.
+   */
+  private compactLabelThickness(axis: 'x' | 'y'): number | undefined {
+    const context = this.canvasEl?.getContext('2d');
+    if (!context) return undefined;
+    const font = this.rangeLabelFont();
+    let visual: number;
+    if (axis === 'y') {
+      const bounds = this.rangeLabelCache.bounds;
+      if (!bounds) return undefined;
+      const texts = yRangeLabelValues(bounds.min, bounds.max).map(String);
+      visual = measureRangeLabelGutters(context, font, texts, []).side + 4;
+    } else {
+      visual = measureRangeLabelGutters(context, font, [], ['x']).bottom + 8;
+    }
+    if (!this.fixedAspectRatioScaling) return Math.ceil(visual);
+    const effectiveLength =
+      axis === 'y' ? this.getEffectiveHeight() : this.getEffectiveWidth();
+    return Math.ceil((visual * this.scaleReferenceSize) / effectiveLength);
+  }
+
+  /** @internal - Labels the range-labels plugin drew last, for tests. */
+  lastRangeLabels: {axis: 'x' | 'y'; text: string; x: number; y: number}[] = [];
+
+  /**
+   * Range labels for the current data and size, refreshed with every
+   * `getChartOptions()` so the plugin never rebuilds the datasets on a draw.
+   */
+  private rangeLabelCache: {
+    y: string[];
+    x: string[];
+    bounds?: {min: number; max: number};
+  } = {y: [], x: []};
+
+  private slotFor(
+    side: 'left' | 'right' | 'top' | 'bottom'
+  ): HTMLSlotElement | undefined {
+    return {
       left: this.leftScaleSlot,
       right: this.rightScaleSlot,
       top: this.topScaleSlot,
       bottom: this.bottomScaleSlot,
+    }[side];
+  }
+
+  private hasSlottedScale(side: 'left' | 'right' | 'top' | 'bottom'): boolean {
+    return (this.slotFor(side)?.assignedElements().length ?? 0) > 0;
+  }
+
+  /** @internal - Below the label threshold on either dimension. */
+  private isBelowThreshold(): boolean {
+    return (
+      this.getEffectiveWidth() <
+        RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS ||
+      this.getEffectiveHeight() <
+        RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS
+    );
+  }
+
+  private get ySide(): 'left' | 'right' {
+    const first = this.yAxes?.[0]?.position;
+    return (first ?? this.yAxisPosition) === 'right' ? 'right' : 'left';
+  }
+
+  private rangeLabelFont(): RangeLabelFont {
+    const sizePx = Number.parseFloat(
+      getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontSizeVar)
+    );
+    return {
+      family: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontFamily),
+      sizePx: Number.isFinite(sizePx) ? sizePx : 12,
+      weight: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontWeightVar),
+    };
+  }
+
+  /**
+   * Extent of the prepared data: one for x, one per y scale id. Each y axis
+   * ranges from its own datasets, so a merged extent would label one axis
+   * with another's values.
+   */
+  private dataExtents(
+    prepared: ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>
+  ): {
+    x?: {min: number; max: number};
+    y: Map<string, {min: number; max: number}>;
+  } {
+    const x = {min: Infinity, max: -Infinity};
+    const y = new Map<string, {min: number; max: number}>();
+    const take = (extent: {min: number; max: number}, v: number) => {
+      if (!Number.isFinite(v)) return;
+      extent.min = Math.min(extent.min, v);
+      extent.max = Math.max(extent.max, v);
+    };
+    prepared.datasets.forEach((dataset) => {
+      const id = dataset.yAxisID ?? this.primaryYAxisId;
+      const extent = y.get(id) ?? {min: Infinity, max: -Infinity};
+      y.set(id, extent);
+      (dataset.data as ChartLinePoint[]).forEach((point) => {
+        if (typeof point === 'number') {
+          take(extent, point);
+        } else if (point) {
+          take(x, point.x as number);
+          take(extent, point.y);
+        }
+      });
+    });
+    y.forEach((extent, id) => {
+      if (!(extent.min <= extent.max)) y.delete(id);
+    });
+    return {x: x.min <= x.max ? x : undefined, y};
+  }
+
+  /**
+   * Range the y labels describe. Below the threshold the axis runs on data
+   * bounds, so its datasets' extent is exact and needs no chart to read from.
+   */
+  private yRangeBounds(
+    extents: Map<string, {min: number; max: number}>
+  ): {min: number; max: number} | undefined {
+    let axis: ChartLineYAxisConfig | undefined;
+    let id = 'y';
+    if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (a) => (a.position ?? 'left') === this.ySide
+      );
+      const index = match === -1 ? 0 : match;
+      axis = this.yAxes[index];
+      id = axis.id ?? `y${index}`;
+    }
+    const extent = extents.get(id);
+    // Stacking makes the axis span the accumulated series, which a per-dataset
+    // extent cannot describe, so the laid-out scale is the only source for it.
+    const stackedScale = this.shouldStack()
+      ? this.chart?.scales[id]
+      : undefined;
+    const min = axis?.min ?? stackedScale?.min ?? extent?.min;
+    const max = axis?.max ?? stackedScale?.max ?? extent?.max;
+    return min !== undefined && max !== undefined ? {min, max} : undefined;
+  }
+
+  /** First and last x label, or nothing when there is no span to label. */
+  private xEdgeLabelTexts(
+    prepared: ReturnType<ObcChartLineBase['prepareChartDataAndLabels']>,
+    extent: {min: number; max: number} | undefined
+  ): string[] {
+    if (!this.isNumericXAxis) {
+      const labels = prepared.labels.map(String);
+      const first = labels[0];
+      const last = labels[labels.length - 1];
+      return labels.length > 1 && first !== last ? [first, last] : [];
+    }
+    const min = this.xAxis?.min ?? extent?.min;
+    const max = this.xAxis?.max ?? extent?.max;
+    if (min === undefined || max === undefined || min === max) return [];
+    const reference =
+      this.timeDisplay === TimeDisplay.minutes
+        ? this.computeTimeReference()
+        : undefined;
+    return [
+      formatXValue(min, this.xValueMode, reference),
+      formatXValue(max, this.xValueMode, reference),
+    ];
+  }
+
+  /**
+   * Recompute the range labels. A side with a slotted scale is labelled by
+   * the scale, so it gets no text here; the y bounds are kept regardless,
+   * since the scale's compact band is measured from them.
+   */
+  private refreshRangeLabels(): typeof this.rangeLabelCache {
+    const cache: typeof this.rangeLabelCache = {y: [], x: []};
+    if (this.isBelowThreshold() && (this.rangeLabelsY || this.rangeLabelsX)) {
+      // Prepared once: it restyles every dataset and reads CSS variables.
+      const prepared = this.prepareChartDataAndLabels();
+      const extents = this.dataExtents(prepared);
+      if (this.rangeLabelsY) {
+        cache.bounds = this.yRangeBounds(extents.y);
+        if (
+          cache.bounds &&
+          !this.hasSlottedScale('left') &&
+          !this.hasSlottedScale('right')
+        ) {
+          const {min, max} = cache.bounds;
+          cache.y = yRangeLabelValues(min, max).map((v) =>
+            formatRangeValue(v, min, max)
+          );
+        }
+      }
+      if (
+        this.rangeLabelsX &&
+        !this.hasSlottedScale('top') &&
+        !this.hasSlottedScale('bottom')
+      ) {
+        cache.x = this.xEdgeLabelTexts(prepared, extents.x);
+      }
+    }
+    this.rangeLabelCache = cache;
+    return cache;
+  }
+
+  /**
+   * Paints min / 0 / max and first / last once Chart.js has drawn, inside the
+   * gutters `getChartOptions()` reserved. The end labels sit flush with the
+   * plot edges so no vertical padding is needed for them.
+   */
+  private createRangeLabelsPlugin() {
+    return {
+      id: 'rangeLabels',
+      afterDraw: (chart: Chart) => {
+        this.lastRangeLabels = [];
+        const {y: yTexts, x: xTexts, bounds} = this.rangeLabelCache;
+        if (!yTexts.length && !xTexts.length) return;
+        const area = chart.chartArea;
+        const ctx = chart.ctx;
+        const font = this.rangeLabelFont();
+        const lineHeight = rangeLabelLineHeight(font);
+        ctx.save();
+        ctx.font = rangeLabelFontString(font);
+        ctx.fillStyle = getCssVariableValue(
+          this,
+          LINE_GRAPH_LABEL_CONFIG.fontColorVar
+        );
+
+        const scale = chart.scales[this.primaryYAxisId];
+        if (yTexts.length && bounds && scale) {
+          const onRight = this.ySide === 'right';
+          const x = onRight ? area.right + 8 : area.left - 8;
+          ctx.textAlign = onRight ? 'left' : 'right';
+          const values = yRangeLabelValues(bounds.min, bounds.max);
+          // Top-down, so the recorded order reads max, 0, min.
+          for (let i = values.length - 1; i >= 0; i--) {
+            const isMax = i === values.length - 1;
+            const isMin = i === 0;
+            const y = isMax
+              ? area.top
+              : isMin
+                ? area.bottom
+                : scale.getPixelForValue(values[i]);
+            // A 0 within a line of either end would collide with it.
+            if (
+              !isMax &&
+              !isMin &&
+              (y - area.top < lineHeight || area.bottom - y < lineHeight)
+            ) {
+              continue;
+            }
+            ctx.textBaseline = isMax ? 'top' : isMin ? 'bottom' : 'middle';
+            ctx.fillText(yTexts[i], x, y);
+            this.lastRangeLabels.push({axis: 'y', text: yTexts[i], x, y});
+          }
+        }
+
+        if (xTexts.length === 2) {
+          const y = area.bottom + 4;
+          ctx.textBaseline = 'top';
+          ctx.textAlign = 'left';
+          ctx.fillText(xTexts[0], area.left, y);
+          this.lastRangeLabels.push({
+            axis: 'x',
+            text: xTexts[0],
+            x: area.left,
+            y,
+          });
+          ctx.textAlign = 'right';
+          ctx.fillText(xTexts[1], area.right, y);
+          this.lastRangeLabels.push({
+            axis: 'x',
+            text: xTexts[1],
+            x: area.right,
+            y,
+          });
+        }
+        ctx.restore();
+      },
     };
+  }
 
-    const slot = slotMap[side];
+  /**
+   * Check if a slotted scale element is actually visible (renders content).
+   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   */
+  private hasVisibleScale(side: 'left' | 'right' | 'top' | 'bottom'): boolean {
+    const slot = this.slotFor(side);
     const elements = slot?.assignedElements() ?? [];
 
     return elements.some((el: Element) => {
@@ -1231,18 +1584,23 @@ export class ObcChartLineBase extends LitElement {
     this.isUpdatingScales = true;
 
     try {
-      // Step 1: Calculate padding from scale dimensions
-      const padding = this.calculatePaddingFromScales();
-
-      // Step 2: Calculate effective chart area
-      const effectiveWidth = this.width - padding.left - padding.right;
-      const effectiveHeight = this.height - padding.top - padding.bottom;
+      // Step 1: The padding the chart itself will lay out with, so a slotted
+      // scale's drawing area lines up with the chart area on every side.
+      const padding = this.computeChartPadding();
+
+      // Step 2: The chart area left once the (visual) padding is taken from
+      // the visual size — the reference `width` / `height` would go negative
+      // in a container larger than the reference.
+      const effectiveWidth =
+        this.getEffectiveWidth() - padding.left - padding.right;
+      const effectiveHeight =
+        this.getEffectiveHeight() - padding.top - padding.bottom;
 
       // Guard against invalid dimensions
       if (effectiveWidth <= 0 || effectiveHeight <= 0) {
         console.warn('[chart-line-base] Invalid effective dimensions', {
-          width: this.width,
-          height: this.height,
+          width: this.getEffectiveWidth(),
+          height: this.getEffectiveHeight(),
           padding,
           effectiveWidth,
           effectiveHeight,
@@ -1289,6 +1647,75 @@ export class ObcChartLineBase extends LitElement {
     return padding;
   }
 
+  /**
+   * Range a slotted scale on the given side has to cover.
+   *
+   * A range pinned in the axis configuration is used as is: it is the source
+   * of truth, and on the first sync there is no chart to read yet. Otherwise
+   * the live Chart.js scale is read under the id `buildScalesConfig()` gives
+   * it. A side with no axis of its own follows the first configured one.
+   */
+  private resolveAxisRange(side: 'left' | 'right' | 'x'): {
+    min: number;
+    max: number;
+  } {
+    let id = side === 'x' ? 'x' : 'y';
+    let configured: {min?: number; max?: number} | undefined;
+
+    if (side === 'x') {
+      configured = this.isNumericXAxis ? this.xAxis : undefined;
+    } else if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (axis) => (axis.position ?? 'left') === side
+      );
+      const index = match === -1 ? 0 : match;
+      const axis = this.yAxes[index];
+      id = axis.id ?? `y${index}`;
+      configured = axis;
+    }
+
+    if (configured?.min !== undefined && configured.max !== undefined) {
+      return {min: configured.min, max: configured.max};
+    }
+    const scale = this.chart?.scales[id];
+    return {
+      min: scale?.min ?? configured?.min ?? 0,
+      max: scale?.max ?? configured?.max ?? 100,
+    };
+  }
+
+  /**
+   * Range pushed to the top and bottom scales, or `undefined` to leave them
+   * alone. A scale prints its values verbatim, and on a `time` axis the raw
+   * range is epoch milliseconds. In `minutes` display the range is converted
+   * to the minutes the chart's own labels show; `date` display has no numeric
+   * equivalent, so the scale keeps its own range.
+   */
+  private resolveSlottedXRange(): {min: number; max: number} | undefined {
+    const range = this.resolveAxisRange('x');
+    if (this.xAxisType !== XAxisType.time) return range;
+
+    if (this.timeDisplay !== TimeDisplay.minutes) {
+      if (!this.warnedDateDisplayScale) {
+        this.warnedDateDisplayScale = true;
+        console.warn(
+          "[obc-chart] a slotted horizontal scale cannot label a time axis in 'date' display and keeps its own range; use timeDisplay='minutes' or a number axis."
+        );
+      }
+      return undefined;
+    }
+
+    const pinned =
+      this.xAxis?.min !== undefined && this.xAxis?.max !== undefined;
+    const reference = this.computeTimeReference();
+    if (reference === undefined || (!this.chart && !pinned)) return undefined;
+    const minute = 60_000;
+    return {
+      min: (range.min - reference) / minute,
+      max: (range.max - reference) / minute,
+    };
+  }
+
   /**
    * Update properties on slotted scale elements
    */
@@ -1298,11 +1725,9 @@ export class ObcChartLineBase extends LitElement {
     bottom: number;
     left: number;
   }) {
-    // Get chart scales for min/max values
-    const yMin = this.chart?.scales['y']?.min ?? 0;
-    const yMax = this.chart?.scales['y']?.max ?? 100;
-    const xMin = this.chart?.scales['x']?.min ?? 0;
-    const xMax = this.chart?.scales['x']?.max ?? 100;
+    const leftRange = this.resolveAxisRange('left');
+    const rightRange = this.resolveAxisRange('right');
+    const xRange = this.resolveSlottedXRange();
 
     // Use effective dimensions for threshold checks
     const effectiveWidth = this.getEffectiveWidth();
@@ -1314,23 +1739,75 @@ export class ObcChartLineBase extends LitElement {
     // `labelThickness` band stays in the reported thickness and the chart
     // gets re-padded inward (leaving whitespace on the scale's side), and any
     // visible labels would be clipped against the canvas edge.
-    const showLabels =
-      this.hasLabelPadding &&
+    const aboveThreshold =
       effectiveWidth >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS &&
       effectiveHeight >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+    const showLabels = this.hasLabelPadding && aboveThreshold;
+    // Below the threshold a ladder has no room, but min / 0 / max still has.
+    const compactY = !aboveThreshold && this.rangeLabelsY;
+    const compactX = !aboveThreshold && this.rangeLabelsX;
+    const compactYThickness = compactY
+      ? this.compactLabelThickness('y')
+      : undefined;
+    const compactXThickness = compactX
+      ? this.compactLabelThickness('x')
+      : undefined;
+
+    // Compact mode labels a slotted scale's main tickmarks; a scale the chart
+    // never compacted keeps whatever the consumer set.
+    const mainLabelsFor = (
+      scale: ExternalScaleElement,
+      compact: boolean
+    ): boolean | undefined => {
+      if (compact) {
+        if (!this.savedMainTickmarkLabels.has(scale)) {
+          this.savedMainTickmarkLabels.set(
+            scale,
+            scale.showMainTickmarkLabels ?? false
+          );
+        }
+        return true;
+      }
+      if (!this.savedMainTickmarkLabels.has(scale)) return undefined;
+      const saved = this.savedMainTickmarkLabels.get(scale);
+      this.savedMainTickmarkLabels.delete(scale);
+      return saved;
+    };
+
+    // Narrow a scale's label band to its compact labels, and give the scale
+    // its own band back once the chart leaves compact mode.
+    const bandFor = (
+      scale: ExternalScaleElement,
+      compact: boolean,
+      thickness: number | undefined
+    ): number | undefined => {
+      if (compact) {
+        if (
+          thickness === undefined ||
+          typeof scale.labelThickness !== 'number'
+        ) {
+          return undefined;
+        }
+        if (!this.savedLabelThickness.has(scale)) {
+          this.savedLabelThickness.set(scale, scale.labelThickness);
+        }
+        return thickness;
+      }
+      const saved = this.savedLabelThickness.get(scale);
+      this.savedLabelThickness.delete(scale);
+      return saved;
+    };
 
-    // Calculate viewBox padding for external scales.
-    // When fixedAspectRatioScaling is true, the chart's Canvas padding is scaled by
-    // scaleFactor = computedWidth / this.width. For external scales to match, their
-    // viewBox padding needs to be: basePadding * scaleReferenceSize / referenceSize
-    // This ensures the visual padding matches when the SVG scales to fill the container.
+    // Visual pixels into a viewBox stretched to the *effective* length; the
+    // reference `width` / `height` only matches in a reference-sized
+    // container, and every other one drifts.
     const verticalViewBoxPadding = this.fixedAspectRatioScaling
       ? {
           top: Math.round(
-            (padding.top * this.scaleReferenceSize) / this.height
+            (padding.top * this.scaleReferenceSize) / effectiveHeight
           ),
           bottom: Math.round(
-            (padding.bottom * this.scaleReferenceSize) / this.height
+            (padding.bottom * this.scaleReferenceSize) / effectiveHeight
           ),
         }
       : {top: padding.top, bottom: padding.bottom};
@@ -1338,10 +1815,10 @@ export class ObcChartLineBase extends LitElement {
     const horizontalViewBoxPadding = this.fixedAspectRatioScaling
       ? {
           left: Math.round(
-            (padding.left * this.scaleReferenceSize) / this.width
+            (padding.left * this.scaleReferenceSize) / effectiveWidth
           ),
           right: Math.round(
-            (padding.right * this.scaleReferenceSize) / this.width
+            (padding.right * this.scaleReferenceSize) / effectiveWidth
           ),
         }
       : {left: padding.left, right: padding.right};
@@ -1355,20 +1832,28 @@ export class ObcChartLineBase extends LitElement {
       ]
     > = [];
 
+    /** Empty on a side whose slotted scale carries a range of its own. */
+    const rangeProps = (
+      side: 'left' | 'right' | 'top' | 'bottom',
+      range: {min: number; max: number}
+    ): Partial<ExternalScaleElement> =>
+      this.ownsSlottedScaleRange(side)
+        ? {minValue: range.min, maxValue: range.max}
+        : {};
+
     // Left scale
     if (this.leftScaleSlot) {
       const scales =
         this.leftScaleSlot.assignedElements() as ExternalScaleElement[];
       scales.forEach((scale) => {
         const props: Partial<ExternalScaleElement> = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps('left', leftRange),
           height: effectiveHeight, // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -1381,6 +1866,10 @@ export class ObcChartLineBase extends LitElement {
         if (this.yStepSize !== undefined) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== undefined) props.showMainTickmarkLabels = mainLabels;
+        if (band !== undefined) props.labelThickness = band;
         updates.push([this.leftScaleSlot, scale, props]);
       });
     }
@@ -1391,14 +1880,13 @@ export class ObcChartLineBase extends LitElement {
         this.rightScaleSlot.assignedElements() as ExternalScaleElement[];
       scales.forEach((scale) => {
         const props: Partial<ExternalScaleElement> = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps('right', rightRange),
           height: effectiveHeight, // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -1411,6 +1899,10 @@ export class ObcChartLineBase extends LitElement {
         if (this.yStepSize !== undefined) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== undefined) props.showMainTickmarkLabels = mainLabels;
+        if (band !== undefined) props.labelThickness = band;
         updates.push([this.rightScaleSlot, scale, props]);
       });
     }
@@ -1421,14 +1913,13 @@ export class ObcChartLineBase extends LitElement {
         this.topScaleSlot.assignedElements() as ExternalScaleElement[];
       scales.forEach((scale) => {
         const props: Partial<ExternalScaleElement> = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth, // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -1441,6 +1932,10 @@ export class ObcChartLineBase extends LitElement {
         if (this.xStepSize !== undefined) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== undefined) props.showMainTickmarkLabels = mainLabels;
+        if (band !== undefined) props.labelThickness = band;
         updates.push([this.topScaleSlot, scale, props]);
       });
     }
@@ -1451,14 +1946,13 @@ export class ObcChartLineBase extends LitElement {
         this.bottomScaleSlot.assignedElements() as ExternalScaleElement[];
       scales.forEach((scale) => {
         const props: Partial<ExternalScaleElement> = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth, // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -1471,6 +1965,10 @@ export class ObcChartLineBase extends LitElement {
         if (this.xStepSize !== undefined) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== undefined) props.showMainTickmarkLabels = mainLabels;
+        if (band !== undefined) props.labelThickness = band;
         updates.push([this.bottomScaleSlot, scale, props]);
       });
     }
@@ -1481,6 +1979,42 @@ export class ObcChartLineBase extends LitElement {
     });
   }
 
+  /**
+   * Whether the chart's axis range is what a slotted scale on this side should
+   * describe. A subclass that slots a scale of its own and gives it a separate
+   * range returns false for that side, otherwise the sync below overwrites it.
+   */
+  protected ownsSlottedScaleRange(
+    _side: 'left' | 'right' | 'top' | 'bottom'
+  ): boolean {
+    return true;
+  }
+
+  /**
+   * Push the current axis ranges to the slotted scales. The full
+   * `updateScaleProperties()` cascade runs before the chart is (re)built and
+   * so reads the previous chart's ranges; this closes that gap once the new
+   * chart exists, and keeps auto-ranged scales in step with the data.
+   */
+  private syncSlottedScaleRanges() {
+    const apply = (
+      side: 'left' | 'right' | 'top' | 'bottom',
+      slot: HTMLSlotElement | undefined,
+      range: {min: number; max: number} | undefined
+    ) => {
+      if (!slot || !range || !this.ownsSlottedScaleRange(side)) return;
+      (slot.assignedElements() as ExternalScaleElement[]).forEach((scale) => {
+        scale.minValue = range.min;
+        scale.maxValue = range.max;
+      });
+    };
+    apply('left', this.leftScaleSlot, this.resolveAxisRange('left'));
+    apply('right', this.rightScaleSlot, this.resolveAxisRange('right'));
+    const xRange = this.resolveSlottedXRange();
+    apply('top', this.topScaleSlot, xRange);
+    apply('bottom', this.bottomScaleSlot, xRange);
+  }
+
   private hasAnyChanged(
     changed: PropertyValues,
     props: readonly (keyof ObcChartLineBase)[]
@@ -1611,13 +2145,21 @@ export class ObcChartLineBase extends LitElement {
       if (this.updateComputedDimensions()) return;
     }
 
-    // `hasLabelPadding` cascades into slotted scales via `updateScaleProperties()`
-    // (toggles `showLabels`, which collapses/expands the bar's label band and
-    // changes its reported thickness). That path only runs through
-    // `syncScalesAndChart()`, so when only `hasLabelPadding` changes we must
-    // route through there — otherwise slotted scales stay stale until the
-    // next slot/resize event and the chart re-pads on stale thickness.
-    if (changed.has('hasLabelPadding') && this.hasExternalScales()) {
+    // Only `syncScalesAndChart()` re-cascades to slotted scales, and these are
+    // the changes that need it: the two flags decide what a scale renders, and
+    // a threshold crossing reaches a plain rebuild in pixel mode.
+    const belowThreshold = this.isBelowThreshold();
+    const crossedThreshold =
+      this.wasBelowThreshold !== undefined &&
+      this.wasBelowThreshold !== belowThreshold;
+    this.wasBelowThreshold = belowThreshold;
+
+    if (
+      (changed.has('hasLabelPadding') ||
+        changed.has('rangeLabels') ||
+        crossedThreshold) &&
+      this.hasExternalScales()
+    ) {
       this.syncScalesAndChart();
       return;
     }
@@ -1689,7 +2231,9 @@ export class ObcChartLineBase extends LitElement {
       this.canvasEl,
       () =>
         (this.canvasEl?.clientHeight ?? 0) >=
-        RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
+          RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS &&
+        (this.canvasEl?.clientWidth ?? 0) >=
+          RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
       {
         rebuild: () => {
           this.chart?.destroy();
@@ -1865,6 +2409,7 @@ export class ObcChartLineBase extends LitElement {
     const result = {
       ...(existingDataset || {}),
       data: existingDataset?.data ?? values!,
+      yAxisID: existingDataset?.yAxisID ?? this.primaryYAxisId,
       borderColor,
       backgroundColor,
       borderWidth: existingDataset?.borderWidth ?? 2,
@@ -1922,6 +2467,7 @@ export class ObcChartLineBase extends LitElement {
     const baselineDataset: ChartDataset<'line', ChartLinePoint[]> = {
       label: 'threshold-baseline',
       data: baselineData,
+      yAxisID: this.primaryYAxisId,
       borderColor: 'transparent',
       backgroundColor: 'transparent',
       borderWidth: 0,
@@ -2040,6 +2586,62 @@ export class ObcChartLineBase extends LitElement {
     return {datasets, labels};
   }
 
+  /**
+   * One padding source for the Chart.js layout and the slotted scales: two
+   * sources painted the canvas over a scale and inset a scale inside a chart.
+   */
+  private computeChartPadding(): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  } {
+    const isTooSmall = this.isBelowThreshold();
+    // Get scale factor for proportional scaling in fixed aspect ratio mode
+    const scaleFactor = this.getScaleFactor();
+
+    const defaultPaddingScaled = !this.hasLabelPadding
+      ? 0
+      : this.fixedAspectRatioScaling
+        ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor)
+        : CHART_DIMENSIONS.CANVAS_PADDING;
+
+    const {y: yTexts, x: xTexts} = this.refreshRangeLabels();
+    const context = this.canvasEl?.getContext('2d');
+    const gutters =
+      (yTexts.length || xTexts.length) && context
+        ? measureRangeLabelGutters(
+            context,
+            this.rangeLabelFont(),
+            yTexts,
+            xTexts
+          )
+        : {side: 0, bottom: 0};
+
+    const scalePadding = this.calculatePaddingFromScales();
+    const freeSide = (side: 'top' | 'right' | 'bottom' | 'left'): number => {
+      if (!isTooSmall) return defaultPaddingScaled;
+      if (side === 'bottom') return gutters.bottom;
+      return side === this.ySide ? gutters.side : 0;
+    };
+    const padding = {
+      top: this.externalScaleDimensions.has('top')
+        ? scalePadding.top
+        : freeSide('top'),
+      right: this.externalScaleDimensions.has('right')
+        ? scalePadding.right
+        : freeSide('right'),
+      bottom: this.externalScaleDimensions.has('bottom')
+        ? scalePadding.bottom
+        : freeSide('bottom'),
+      left: this.externalScaleDimensions.has('left')
+        ? scalePadding.left
+        : freeSide('left'),
+    };
+
+    return padding;
+  }
+
   /**
    * Get Chart.js options with dynamic sizing and padding
    */
@@ -2053,53 +2655,7 @@ export class ObcChartLineBase extends LitElement {
       effectiveWidth < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS ||
       effectiveHeight < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
 
-    // Get scale factor for proportional scaling in fixed aspect ratio mode
-    const scaleFactor = this.getScaleFactor();
-
-    // Calculate padding for the chart.
-    // External scales report their actual visual (scaled) thickness when in fixedAspectRatio mode,
-    // so we use those values directly without additional scaling.
-    // For sides without external scales, we apply the chart's scaleFactor to default padding.
-    let padding: {top: number; right: number; bottom: number; left: number};
-
-    // When hasLabelPadding=false the chart never reserves space for axis tick
-    // labels on sides without an external scale (renders edge-to-edge there).
-    // External-scale sides still receive their reported visual thickness so
-    // slotted scales/bars remain fully visible.
-    const defaultPaddingScaled = !this.hasLabelPadding
-      ? 0
-      : this.fixedAspectRatioScaling
-        ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor)
-        : CHART_DIMENSIONS.CANVAS_PADDING;
-
-    if (isTooSmall && this.hasLabelPadding) {
-      padding = {top: 0, right: 0, bottom: 0, left: 0};
-    } else if (this.hasExternalScales()) {
-      // External scales report their visual dimensions (already scaled when fixedAspectRatio=true)
-      const scalePadding = this.calculatePaddingFromScales();
-      padding = {
-        top: this.externalScaleDimensions.has('top')
-          ? scalePadding.top
-          : defaultPaddingScaled,
-        right: this.externalScaleDimensions.has('right')
-          ? scalePadding.right
-          : defaultPaddingScaled,
-        bottom: this.externalScaleDimensions.has('bottom')
-          ? scalePadding.bottom
-          : defaultPaddingScaled,
-        left: this.externalScaleDimensions.has('left')
-          ? scalePadding.left
-          : defaultPaddingScaled,
-      };
-    } else {
-      // No external scales - apply scaleFactor to all default padding
-      padding = {
-        top: defaultPaddingScaled,
-        right: defaultPaddingScaled,
-        bottom: defaultPaddingScaled,
-        left: defaultPaddingScaled,
-      };
-    }
+    const padding = this.computeChartPadding();
 
     // Set CSS variables for wrapper and canvas sizing
     if (this.fixedAspectRatioScaling) {
@@ -2169,10 +2725,18 @@ export class ObcChartLineBase extends LitElement {
   /**
    * Compute reference timestamp for time axis formatting.
    * Returns earliest timestamp for 'date' mode, latest for 'minutes' mode.
+   * A pinned x range supplies the reference instead, so the axis edge stays
+   * the reference while the data has not reached it yet.
    */
   private computeTimeReference(): number | undefined {
     if (this.xAxisType !== XAxisType.time) return undefined;
 
+    const pinned =
+      this.timeDisplay === TimeDisplay.minutes
+        ? this.xAxis?.max
+        : this.xAxis?.min;
+    if (pinned !== undefined && Number.isFinite(pinned)) return pinned;
+
     const timestamps: number[] = [];
 
     // Collect timestamps from datasets
@@ -2267,6 +2831,9 @@ export class ObcChartLineBase extends LitElement {
       offset: false, // Always edge-to-edge (no padding on x-axis)
       grace: 0, // No extra margin
       bounds: 'data', // Use data bounds for edge-to-edge rendering
+      // A category axis has no numeric range to pin.
+      min: this.isNumericXAxis ? this.xAxis?.min : undefined,
+      max: this.isNumericXAxis ? this.xAxis?.max : undefined,
       grid: {
         display: this.showGrid && this.showGridX,
         color: gridColor,
@@ -2381,12 +2948,18 @@ export class ObcChartLineBase extends LitElement {
       type: 'line',
       data: {labels, datasets},
       options: this.getChartOptions(),
-      plugins: this.borderRadiusPosition ? [this.createBorderPlugin()] : [],
+      plugins: [
+        ...(this.borderRadiusPosition ? [this.createBorderPlugin()] : []),
+        ...(this.rangeLabels !== RangeLabels.none
+          ? [this.createRangeLabelsPlugin()]
+          : []),
+      ],
     } as ChartConfiguration<'line'>);
 
     // Defer legend update to next tick to ensure Chart.js metadata is initialized
     requestAnimationFrame(() => this.updateLegend());
     this.applyFillModes();
+    this.syncSlottedScaleRanges();
   }
 
   private updateChart() {
@@ -2403,6 +2976,7 @@ export class ObcChartLineBase extends LitElement {
 
     this.applyFillModes();
     this.chart.update();
+    this.syncSlottedScaleRanges();
 
     // Update legend after chart update completes to ensure metadata is ready
     requestAnimationFrame(() => this.updateLegend());