@gravity-ui/charts 1.46.1 → 1.47.0

package/dist/cjs/libs/format-number/index.js

@@ -11,26 +11,30 @@ function getUnitRate(value, exponent, unitsI18nKeys) {
     }
     return resultUnitRate - 1;
 }
+const formatScaledNumber = (value, options) => {
+    const { precision, showRankDelimiter = true, lang } = options;
+    let result = value;
+    if (typeof precision === 'number') {
+        result = Number(result.toFixed(precision));
+    }
+    else if (precision === 'auto' && result % 1 !== 0) {
+        result = Number(result.toFixed(Math.abs(result) > 1 ? 2 : 4));
+    }
+    return new Intl.NumberFormat(lang !== null && lang !== void 0 ? lang : i18nInstance.lang, {
+        minimumFractionDigits: typeof precision === 'number' ? precision : 0,
+        maximumFractionDigits: 20,
+        useGrouping: showRankDelimiter,
+    }).format(result);
+};
 const unitFormatter = ({ exponent, unitsI18nKeys, unitDelimiterI18nKey, }) => {
     return function formatUnit(value, options = {}) {
-        const { precision, unitRate, showRankDelimiter = true, lang } = options;
+        const { unitRate, lang } = options;
         const i18nLang = i18nInstance.lang;
         if (lang) {
             i18nInstance.setLang(lang);
         }
         const resultUnitRate = typeof unitRate === 'number' ? unitRate : getUnitRate(value, exponent, unitsI18nKeys);
-        let result = value / Math.pow(exponent, resultUnitRate);
-        if (typeof precision === 'number') {
-            result = Number(result.toFixed(precision));
-        }
-        else if (precision === 'auto' && result % 1 !== 0) {
-            result = Number(result.toFixed(Math.abs(result) > 1 ? 2 : 4));
-        }
-        result = new Intl.NumberFormat(lang !== null && lang !== void 0 ? lang : i18nLang, {
-            minimumFractionDigits: typeof precision === 'number' ? precision : 0,
-            maximumFractionDigits: 20,
-            useGrouping: showRankDelimiter,
-        }).format(result);
+        const result = formatScaledNumber(value / Math.pow(exponent, resultUnitRate), options);
         const unit = i18n(unitsI18nKeys[resultUnitRate]);
         const delimiter = i18n(unitDelimiterI18nKey);
         i18nInstance.setLang(i18nLang);
@@ -59,6 +63,65 @@ const baseFormatNumber = unitFormatter({
     unitDelimiterI18nKey: 'value_number-delimiter',
     unitsI18nKeys: BASE_NUMBER_FORMAT_UNIT_KEYS,
 });
+const resolvePostfix = (postfix, lang) => {
+    var _a, _b;
+    if (typeof postfix === 'string') {
+        return postfix;
+    }
+    return (_b = (_a = postfix[lang]) !== null && _a !== void 0 ? _a : postfix.en) !== null && _b !== void 0 ? _b : '';
+};
+const FALLBACK_UNIT_ENTRY = { factor: 1, postfix: '' };
+const normalizedUnitsCache = new WeakMap();
+const normalizeUnits = (units) => {
+    const cached = normalizedUnitsCache.get(units);
+    if (cached) {
+        return cached;
+    }
+    const { scale } = units;
+    const rawEntries = Array.isArray(scale)
+        ? scale.map((e) => ({ factor: e.factor, postfix: e.postfix }))
+        : scale.postfixes.map((postfix, i) => ({ factor: Math.pow(scale.base, i), postfix }));
+    const valid = rawEntries.filter((e) => Number.isFinite(e.factor) && e.factor > 0);
+    valid.sort((a, b) => a.factor - b.factor);
+    const deduped = [];
+    for (const e of valid) {
+        if (deduped.length === 0 || deduped[deduped.length - 1].factor !== e.factor) {
+            deduped.push(e);
+        }
+    }
+    const result = deduped.length > 0 ? deduped : [FALLBACK_UNIT_ENTRY];
+    normalizedUnitsCache.set(units, result);
+    return result;
+};
+const pickUnitEntry = (value, scale) => {
+    const av = Math.abs(value);
+    let chosen = scale[0];
+    for (const e of scale) {
+        if (av / e.factor >= 1) {
+            chosen = e;
+        }
+        else {
+            break;
+        }
+    }
+    return chosen;
+};
+const customUnitFormatter = (value, units, options) => {
+    const { lang } = options;
+    const i18nLang = i18nInstance.lang;
+    if (lang) {
+        i18nInstance.setLang(lang);
+    }
+    const normalizedScale = normalizeUnits(units);
+    const entry = pickUnitEntry(value, normalizedScale);
+    const result = formatScaledNumber(value / entry.factor, options);
+    const effectiveLang = lang !== null && lang !== void 0 ? lang : i18nLang;
+    const resolvedPostfix = resolvePostfix(entry.postfix, effectiveLang);
+    const resolvedDelimiter = typeof units.delimiter === 'string' ? units.delimiter : ' ';
+    const delimiter = resolvedPostfix ? resolvedDelimiter : '';
+    i18nInstance.setLang(i18nLang);
+    return `${result}${delimiter}${resolvedPostfix}`;
+};
 const NUMBER_UNIT_RATE_BY_UNIT = {
     default: 0,
     auto: undefined,
@@ -77,7 +140,7 @@ export const formatNumber = (value, options = {}) => {
     if (Number.isNaN(value) || Number.isNaN(Number(value))) {
         return new Intl.NumberFormat('en').format(Number(value));
     }
-    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, labelMode } = options;
+    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, units, labelMode, } = options;
     let changedMultiplier = multiplier;
     let prePostfix = '';
     if (format === 'percent') {
@@ -87,6 +150,11 @@ export const formatNumber = (value, options = {}) => {
     if (labelMode === 'percent') {
         prePostfix = '%';
     }
+    if (units) {
+        const unitScale = 'scale' in units ? units : { scale: [units] };
+        const formattedValue = customUnitFormatter(Number(value) * changedMultiplier, unitScale, options);
+        return `${prefix}${formattedValue}${prePostfix}${postfix}`;
+    }
     const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
     return `${prefix}${formattedValue}${prePostfix}${postfix}`;
 };

package/dist/cjs/libs/format-number/presets.d.ts

@@ -0,0 +1,40 @@
+import type { FormatUnitScale } from './types';
+/**
+ * Byte scale with binary base (`1024`) and localized postfixes.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_BYTES, precision: 1},
+ * }
+ * ```
+ */
+export declare const FORMAT_UNITS_BYTES: FormatUnitScale;
+/**
+ * Short number scale with decimal base (`1000`). Renders large numbers
+ * compactly as `K/M/B/T`. Postfixes are plain Latin letters and stay the
+ * same regardless of language. The first entry has an empty postfix, so
+ * values below `1000` render as plain numbers without a delimiter.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_NUMBERS, precision: 1},
+ * }
+ * // 300       → "300"
+ * // 1_500     → "1.5 K"
+ * // 1_500_000 → "1.5 M"
+ * ```
+ */
+export declare const FORMAT_UNITS_NUMBERS: FormatUnitScale;
+/**
+ * Bit scale with decimal base (`1000`) and localized postfixes.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_BITS, precision: 1},
+ * }
+ * ```
+ */
+export declare const FORMAT_UNITS_BITS: FormatUnitScale;

package/dist/cjs/libs/format-number/presets.js

@@ -0,0 +1,66 @@
+/**
+ * Byte scale with binary base (`1024`) and localized postfixes.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_BYTES, precision: 1},
+ * }
+ * ```
+ */
+export const FORMAT_UNITS_BYTES = {
+    scale: {
+        base: 1024,
+        postfixes: [
+            { en: 'B', ru: 'Б' },
+            { en: 'KB', ru: 'КБ' },
+            { en: 'MB', ru: 'МБ' },
+            { en: 'GB', ru: 'ГБ' },
+            { en: 'TB', ru: 'ТБ' },
+        ],
+    },
+};
+/**
+ * Short number scale with decimal base (`1000`). Renders large numbers
+ * compactly as `K/M/B/T`. Postfixes are plain Latin letters and stay the
+ * same regardless of language. The first entry has an empty postfix, so
+ * values below `1000` render as plain numbers without a delimiter.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_NUMBERS, precision: 1},
+ * }
+ * // 300       → "300"
+ * // 1_500     → "1.5 K"
+ * // 1_500_000 → "1.5 M"
+ * ```
+ */
+export const FORMAT_UNITS_NUMBERS = {
+    scale: {
+        base: 1000,
+        postfixes: ['', 'K', 'M', 'B', 'T'],
+    },
+};
+/**
+ * Bit scale with decimal base (`1000`) and localized postfixes.
+ *
+ * @example
+ * ```ts
+ * tooltip: {
+ *   valueFormat: {type: 'number', units: FORMAT_UNITS_BITS, precision: 1},
+ * }
+ * ```
+ */
+export const FORMAT_UNITS_BITS = {
+    scale: {
+        base: 1000,
+        postfixes: [
+            { en: 'bit', ru: 'бит' },
+            { en: 'Kbit', ru: 'Кбит' },
+            { en: 'Mbit', ru: 'Мбит' },
+            { en: 'Gbit', ru: 'Гбит' },
+            { en: 'Tbit', ru: 'Тбит' },
+        ],
+    },
+};

package/dist/cjs/libs/format-number/types.d.ts

@@ -1,13 +1,92 @@
-export type FormatOptions = {
+export interface FormatOptions {
+    /**
+     * Number of decimal places to display.
+     * Use `'auto'` to determine precision automatically based on the value magnitude.
+     */
     precision?: number | 'auto';
+    /** When `true`, inserts a thousands separator (e.g. `1 500 000`). */
     showRankDelimiter?: boolean;
+    /**
+     * BCP 47 language tag used for locale-aware formatting (e.g. `'en'`, `'ru'`).
+     * Defaults to the application locale when omitted.
+     */
     lang?: string;
+    /** Internal rendering hint for axis label layout. Not intended for public use. */
     labelMode?: string;
+}
+/**
+ * Plain string or a per-language dictionary of strings.
+ * When a dictionary is used, the lookup chain is:
+ * current `lang` → `en` → empty string.
+ */
+export type FormatI18nString = string | Partial<Record<string, string>>;
+/** Single entry of a custom unit scale. */
+export type FormatUnitScaleEntry = {
+    /** Positive multiplier applied to the value. The entry wins when `|value| / factor >= 1`. */
+    factor: number;
+    /**
+     * String appended after the scaled value (e.g. `'KB'`).
+     * Use an empty string to suppress the suffix and the delimiter.
+     * Pass a `{lang: string}` dictionary to localize the postfix — resolution falls back to `en`, then to empty.
+     */
+    postfix: FormatI18nString;
 };
-export type FormatNumberOptions = FormatOptions & {
+/**
+ * Custom unit scale for numeric formatting.
+ *
+ * `scale` describes the unit table in one of two forms:
+ * - `{base, postfixes}` — geometric progression: `postfixes[i]` is bound to `factor = base^i` (e.g. `{base: 1024, postfixes: ['B','KB','MB']}`).
+ * - `FormatUnitScaleEntry[]` — arbitrary factors; required for non-linear scales (e.g. `[{factor:1,postfix:'s'},{factor:60,postfix:'min'},{factor:3600,postfix:'h'}]`).
+ *
+ * `delimiter` is the shared string placed between the scaled value and the
+ * postfix. Defaults to a locale-aware space; pass `''` to suppress it.
+ *
+ * The normalized scale is cached by object identity, so for best performance
+ * reuse the same `units` object across `formatNumber` calls instead of
+ * creating a new inline literal on every render.
+ */
+export type FormatUnitScale = {
+    scale: {
+        base: number;
+        postfixes: FormatI18nString[];
+    } | FormatUnitScaleEntry[];
+    delimiter?: string;
+};
+export interface FormatNumberOptions extends FormatOptions {
+    /**
+     * Display mode for the numeric value.
+     * - `'number'` — plain number (default).
+     * - `'percent'` — value is multiplied by 100 and rendered with a `%` suffix.
+     *
+     * Combining `'percent'` with `units` is not meaningful and should be avoided.
+     */
     format?: 'number' | 'percent';
+    /** Factor applied to the value before formatting. For example, `multiplier: 1000` converts seconds to milliseconds. */
     multiplier?: number;
+    /** String prepended to the formatted value (e.g. `'$'`). */
     prefix?: string;
+    /** String appended to the formatted value (e.g. `' USD'`). */
     postfix?: string;
+    /**
+     * Compact unit suffix applied to large numbers.
+     * - `'auto'` — picks the most appropriate unit automatically (`k`, `m`, `b`, `t`).
+     * - `'k'` — thousands (÷ 1 000).
+     * - `'m'` — millions (÷ 1 000 000).
+     * - `'b'` — billions (÷ 1 000 000 000).
+     * - `'t'` — trillions (÷ 1 000 000 000 000).
+     * - `null` — no unit suffix.
+     *
+     * @deprecated Use `units` for custom scales. This option is fully ignored when `units` is set.
+     */
     unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
-};
+    /**
+     * Custom unit scale, or a single `FormatUnitScaleEntry` as sugar for
+     * locking every value to one unit (equivalent to the legacy `unit: 'k'`).
+     * When set, fully overrides `unit`.
+     *
+     * Unit selection is always automatic: the entry with the largest `factor`
+     * such that `|value| / factor >= 1`, clamped to the smallest entry for
+     * very small values.
+     */
+    units?: FormatUnitScale | FormatUnitScaleEntry;
+}

package/dist/esm/components/ChartInner/index.js

@@ -55,6 +55,7 @@ export const ChartInner = (props) => {
     const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, preparedTitle, preparedChart, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, rangeSliderState,
+        updateRangeSliderState,
         updateZoomState,
         zoomState }));
     const prevWidth = usePrevious(width);

package/dist/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -9,6 +9,7 @@ type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
+    updateRangeSliderState: (nextState?: RangeSliderState) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;

package/dist/esm/components/ChartInner/useChartInnerProps.js

@@ -38,7 +38,7 @@ function getBoundsOffsetLeft(args) {
 }
 export function useChartInnerProps(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateRangeSliderState, updateZoomState, zoomState, } = props;
     const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
     const [chartState, setState] = React.useState(null);
     const prevStateValue = React.useRef(chartState);
@@ -48,20 +48,26 @@ export function useChartInnerProps(props) {
         currentRunRef.current++;
         const currentRun = currentRunRef.current;
         (async function () {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const axisTypeChanged = ((_b = (_a = previousChartData.current) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.type) !== undefined &&
+                previousChartData.current.xAxis.type !== ((_c = data.xAxis) === null || _c === void 0 ? void 0 : _c.type);
+            if (axisTypeChanged && rangeSliderState !== undefined) {
+                updateRangeSliderState(undefined);
+                return;
+            }
             const preparedTitle = await getPreparedTitle({
                 title: data.title,
                 chartWidth: width,
                 chartHeight: height,
-                chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
+                chartMargin: (_d = data.chart) === null || _d === void 0 ? void 0 : _d.margin,
             });
             const preparedChart = getPreparedChart({
                 chart: data.chart,
                 seriesData: data.series.data,
                 preparedTitle,
             });
-            const colors = (_b = data.colors) !== null && _b !== void 0 ? _b : DEFAULT_PALETTE;
+            const colors = (_e = data.colors) !== null && _e !== void 0 ? _e : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
                 xAxis: data.xAxis,
@@ -84,7 +90,7 @@ export function useChartInnerProps(props) {
                 });
             }
             else {
-                allPreparedSeries = (_d = (_c = prevStateValue.current) === null || _c === void 0 ? void 0 : _c.allPreparedSeries) !== null && _d !== void 0 ? _d : [];
+                allPreparedSeries = (_g = (_f = prevStateValue.current) === null || _f === void 0 ? void 0 : _f.allPreparedSeries) !== null && _g !== void 0 ? _g : [];
             }
             const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
             const visiblePreparedSeries = getVisibleSeries({
@@ -243,6 +249,7 @@ export function useChartInnerProps(props) {
         rangeSliderState,
         dispatcher,
         htmlLayout,
+        updateRangeSliderState,
         clipPathId,
     ]);
     // additional start

package/dist/esm/core/brush/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/brush/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/{hooks/useBrush → core/brush}/types.d.ts

@@ -1,6 +1,6 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ZoomType } from '../../core/constants';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ZoomType } from '../constants';
+import type { ChartBrush, DeepRequired } from '../types';
 export type BrushSelection = [number, number] | [[number, number], [number, number]];
 export interface BrushArea {
     /**

package/dist/esm/core/brush/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{cjs/hooks/useBrush → esm/core/brush}/utils.d.ts

@@ -1,5 +1,5 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ChartBrush, DeepRequired } from '../types';
 import type { BrushSelection } from './types';
 export declare function isOneDimensionalSelection(selection?: BrushSelection | null): selection is [number, number];
 export declare function setBrushBorder(this: SVGGElement, _brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null, options: {

package/dist/esm/core/chart/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/esm/core/chart/index.js

@@ -0,0 +1 @@
+export * from './types';

package/dist/esm/core/chart/types.d.ts

@@ -0,0 +1,8 @@
+import type { ChartBrush, ChartMargin, ChartZoom, DeepRequired } from '../types';
+export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
+    brush: ChartBrush;
+}>;
+export type PreparedChart = {
+    margin: ChartMargin;
+    zoom: PreparedZoom | null;
+};

package/dist/esm/core/chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/index.d.ts

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/esm/core/index.js

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/esm/core/layout/chart-dimensions.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartMargin, LegendConfig } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
+import type { PreparedChart } from '../chart/types';
 import type { PreparedLegend, PreparedSeries } from '../series';
 export declare const getBoundsWidth: (args: {
     chartWidth: number;

package/dist/esm/core/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/range-slider/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/range-slider/types.d.ts

@@ -0,0 +1,4 @@
+export type RangeSliderState = {
+    max: number;
+    min: number;
+};

package/dist/esm/core/range-slider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.d.ts

@@ -1,8 +1,8 @@
-import type { ChartScale } from '../../core/scales/types';
-import type { PreparedLegend } from '../../core/series/types';
-import type { PreparedChart } from '../types';
-import type { PreparedRangeSlider } from '../useAxis/types';
-import type { BrushSelection } from '../useBrush/types';
+import type { PreparedRangeSlider } from '../axes/types';
+import type { BrushSelection } from '../brush/types';
+import type { PreparedChart } from '../chart/types';
+import type { ChartScale } from '../scales/types';
+import type { PreparedLegend } from '../series/types';
 import type { RangeSliderState } from './types';
 export declare function getRangeSliderOffsetTop(args: {
     height: number;

package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.js

@@ -1,4 +1,4 @@
-import { isBandScale } from '../../core/utils';
+import { isBandScale } from '../utils';
 export function getRangeSliderOffsetTop(args) {
     var _a, _b;
     const { height, preparedChart, preparedLegend, preparedRangeSlider } = args;

package/dist/esm/core/scales/x-scale.d.ts

@@ -1,7 +1,7 @@
-import type { RangeSliderState } from '../../hooks';
-import type { ChartAxis, ChartSeries } from '../../types';
 import type { PreparedAxis } from '../axes/types';
+import type { RangeSliderState } from '../range-slider/types';
 import type { PreparedSeries } from '../series';
+import type { ChartAxis, ChartSeries } from '../types';
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;

package/dist/esm/core/scales/y-scale.js

@@ -218,6 +218,27 @@ export function createYScale(args) {
                 else {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
+                // When the user pins only one of min/max on the wrong side of all data,
+                // d3 produces either an inverted scale (yMax<yMin, silently flips the
+                // axis) or a degenerate one (yMax===yMin, maps everything to the range
+                // midpoint); both leave phantom hover targets inside an empty plot.
+                // Expand the auto-computed side so the scale stays sane. Only applies
+                // when the opposite bound is auto-derived — if the user supplied both
+                // bounds, trust the explicit range and let point filtering hide the
+                // rest. Comparison uses the raw data extent because upstream coercions
+                // like volume-series `yMax = Math.max(yMaxDomain, 0)` can make the
+                // post-coerced yMin/yMax lie about where data actually sits.
+                // Logarithmic has its own guard.
+                if (axis.type === 'linear') {
+                    const minIsUserSet = typeof yMinPropsOrState === 'number';
+                    const maxIsUserSet = typeof yMaxPropsOrState === 'number';
+                    if (minIsUserSet && !maxIsUserSet && yMaxDomain < yMin) {
+                        yMax = yMin + Math.max(Math.abs(yMin), 1);
+                    }
+                    else if (maxIsUserSet && !minIsUserSet && yMinDomain > yMax) {
+                        yMin = yMax - Math.max(Math.abs(yMax), 1);
+                    }
+                }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 let scale = scaleFn().domain([yMin, yMax]).range(range);
                 let offsetMin = 0;

package/dist/esm/core/series/prepare-legend.d.ts

@@ -1,5 +1,5 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartData } from '../../types';
+import type { PreparedChart } from '../chart/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];

package/dist/esm/core/shapes/area/prepare-data.js

@@ -2,7 +2,7 @@ import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { prepareAnnotation } from '../../series/prepare-annotation';
-import { getXValue, getYValue } from '../../shapes/utils';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
 function getXValues(series, xAxis, xScale) {
@@ -315,6 +315,11 @@ export const prepareAreaData = async (args) => {
                     }
                     return result;
                 }, []);
+                markHiddenPointsOutOfYRange({
+                    points,
+                    yScale: seriesYScale,
+                    yAxisTop,
+                });
                 seriesStackData.push({
                     annotations,
                     points,

package/dist/esm/core/shapes/area/renderer.js

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
 import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('area');
@@ -17,7 +18,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     const inactiveOptions = get(seriesOptions, 'area.states.inactive');
     const line = lineGenerator()
         .x((d) => d.x)
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
     markersSvgElement.selectAll('*').remove();
@@ -37,7 +38,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
         .attr('stroke-linejoin', 'round')
         .attr('stroke-linecap', 'round');
     const area = areaGenerator()
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y0((d) => d.y0)
         .y1((d) => d.y);
@@ -53,18 +54,11 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelsSelection = plotSvgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelsSelection = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
     const markerSelection = markersSvgElement
         .selectAll('marker')