@gravity-ui/charts 1.46.1 → 1.47.0

package/dist/esm/core/shapes/area/types.d.ts

@@ -1,13 +1,14 @@
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
 export type PointData = {
-    y0: number;
-    x: number;
-    y: number | null;
-    data: AreaSeriesData;
-    series: PreparedAreaSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: AreaSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedAreaSeries;
+    x: number;
+    y: number | null;
+    y0: number;
 };
 export type MarkerPointData = PointData & {
     y: number;

package/dist/esm/core/shapes/bar-x/renderer.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
 import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
 import { getRectPath } from '../utils';
 const b = block('bar-x');
 export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
@@ -37,18 +38,11 @@ export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelSelection = svgElement
-        .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 labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const annotationAnchors = [];
     for (const d of preparedData) {
         if (d.annotation) {

package/dist/esm/core/shapes/bar-y/renderer.js

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
 const b = block('bar-y');
 export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
@@ -31,18 +32,11 @@ export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
         .attr('fill-rule', 'evenodd')
         .attr('opacity', (d) => d.data.opacity || null)
         .attr('pointer-events', 'none');
-    const labelSelection = svgElement
-        .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 labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
     const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
     function handleShapeHover(data) {

package/dist/esm/core/shapes/data-labels.d.ts

@@ -0,0 +1,15 @@
+import type { Selection } from 'd3-selection';
+import type { BaseTextStyle } from '../types/chart/base';
+type RenderableLabelData = {
+    text: string;
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'end' | 'middle';
+    style: BaseTextStyle;
+};
+export declare function renderDataLabels<T extends RenderableLabelData>(args: {
+    container: Selection<SVGGElement, unknown, null, undefined>;
+    data: T[];
+    className: string;
+}): Selection<SVGTextElement, T, SVGGElement, unknown>;
+export {};

package/dist/esm/core/shapes/data-labels.js

@@ -0,0 +1,15 @@
+export function renderDataLabels(args) {
+    const { container, data, className } = args;
+    return container
+        .selectAll('text')
+        .data(data)
+        .join('text')
+        .html((d) => d.text)
+        .attr('class', className)
+        .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);
+}

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

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('funnel');
 export function renderFunnel(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -44,17 +45,11 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     connectorLines.append('path').attr('d', (d) => d.linePath[0].toString());
     connectorLines.append('path').attr('d', (d) => d.linePath[1].toString());
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.svgLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.svgLabels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

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

@@ -84,6 +84,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                             x: item.x + item.width / 2 - size.width / 2,
                             y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
+                            textAnchor: 'start',
                             style: series.dataLabels.style,
                         });
                     }

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

@@ -1,6 +1,7 @@
 import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('heatmap');
 export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -20,17 +21,11 @@ export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.labels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

package/dist/esm/core/shapes/heatmap/types.d.ts

@@ -14,6 +14,7 @@ export type HeatmapLabel = {
     x: number;
     y: number;
     text: string;
+    textAnchor: 'start' | 'end' | 'middle';
     style: BaseTextStyle;
 };
 export type PreparedHeatmapData = {

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

@@ -1,7 +1,7 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
-import { getXValue, getYValue } from '../utils';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
     var _a;
     const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
@@ -129,6 +129,14 @@ export const prepareLineData = async (args) => {
             }
             return result;
         }, []);
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
         const result = {
             annotations,
             points,

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

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getLineDashArray } 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('line');
@@ -17,7 +18,7 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const hoverOptions = get(seriesOptions, 'line.states.hover');
     const inactiveOptions = get(seriesOptions, 'line.states.inactive');
     const line = lineGenerator()
-        .defined((d) => d.y !== null && d.x !== null)
+        .defined((d) => d.y !== null && d.x !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
@@ -38,18 +39,11 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const dataLabels = preparedData.reduce((acc, d) => {
         return acc.concat(d.svgLabels);
     }, []);
-    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')

package/dist/esm/core/shapes/line/types.d.ts

@@ -2,12 +2,13 @@ import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } fro
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
 export type PointData = {
-    x: number | null;
-    y: number | null;
-    data: LineSeriesData;
-    series: PreparedLineSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: LineSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedLineSeries;
+    x: number | null;
+    y: number | null;
 };
 export type MarkerPointData = PointData & {
     y: number;

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

@@ -3,6 +3,7 @@ import { select } from 'd3-selection';
 import { line } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../../shapes/data-labels';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
 import { setActiveState } from '../../shapes/utils';
 const b = block('radar');
@@ -59,18 +60,13 @@ export function renderRadar(elements, preparedData, seriesOptions, dispatcher) {
         .join('g')
         .call(renderMarker);
     // Render labels
-    radarSelection
-        .selectAll('text')
-        .data((radarData) => radarData.labels)
-        .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);
+    radarSelection.each(function (radarData) {
+        renderDataLabels({
+            container: select(this),
+            data: radarData.labels,
+            className: b('label'),
+        });
+    });
     // Handle hover events
     const eventName = `hover-shape.radar`;
     const hoverOptions = get(seriesOptions, 'radar.states.hover');

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

@@ -1,5 +1,6 @@
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('sankey');
 export function renderSankey(elements, preparedData, _seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
@@ -28,18 +29,11 @@ export function renderSankey(elements, preparedData, _seriesOptions, dispatcher)
         .attr('stroke', (d) => d.color)
         .attr('stroke-width', (d) => d.strokeWidth);
     // dataLabels
-    svgElement
-        .append('g')
-        .selectAll()
-        .data(preparedData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('dy', '0.35em')
-        .attr('text-anchor', (d) => d.textAnchor)
-        .attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
+    renderDataLabels({
+        container: svgElement.append('g'),
+        data: preparedData.labels,
+        className: b('label'),
+    }).attr('dy', '0.35em');
     const eventName = `hover-shape.sankey`;
     dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (_data) => {
         // no-op hover handler

package/dist/esm/core/shapes/utils.d.ts

@@ -22,6 +22,30 @@ export declare function getYValue(args: {
     yAxis: PreparedYAxis;
     yScale: ChartScale;
 }): number | null;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export declare function markHiddenPointsOutOfYRange<P extends {
+    y: number | null;
+    hiddenInLine?: boolean;
+}>(args: {
+    points: P[];
+    yScale: ChartScale;
+    yAxisTop: number;
+    axisMin?: number;
+    axisMax?: number;
+    getDataY?: (point: P) => unknown;
+}): void;
 export declare function shapeKey(d: unknown): string | number;
 export declare function setActiveState<T extends {
     active?: boolean;

package/dist/esm/core/shapes/utils.js

@@ -53,6 +53,54 @@ export function getYValue(args) {
     }
     return point.y === null ? null : yLinearScale(point.y);
 }
+// Slack for d3 scale rounding (a `500` edge can come back as `499.9999`).
+// Half a pixel matches the ±0.5 of a 1px centered stroke and far exceeds any
+// plausible float error.
+const Y_RANGE_PIXEL_TOLERANCE = 0.5;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export function markHiddenPointsOutOfYRange(args) {
+    const { points, yScale, yAxisTop, axisMin, axisMax, getDataY } = args;
+    const [yRangeA, yRangeB] = yScale.range();
+    const yMinPx = yAxisTop + Math.min(yRangeA, yRangeB);
+    const yMaxPx = yAxisTop + Math.max(yRangeA, yRangeB);
+    const hasDataBoundsCheck = Boolean(getDataY) && (typeof axisMin === 'number' || typeof axisMax === 'number');
+    const isInRange = (point) => {
+        if (point.y === null) {
+            return false;
+        }
+        if (hasDataBoundsCheck) {
+            const dataY = getDataY === null || getDataY === void 0 ? void 0 : getDataY(point);
+            if (typeof dataY === 'number') {
+                if (typeof axisMin === 'number' && dataY < axisMin) {
+                    return false;
+                }
+                if (typeof axisMax === 'number' && dataY > axisMax) {
+                    return false;
+                }
+            }
+        }
+        return (point.y >= yMinPx - Y_RANGE_PIXEL_TOLERANCE &&
+            point.y <= yMaxPx + Y_RANGE_PIXEL_TOLERANCE);
+    };
+    const inRange = points.map(isInRange);
+    for (let idx = 0; idx < points.length; idx++) {
+        if (!inRange[idx] && !inRange[idx - 1] && !inRange[idx + 1]) {
+            points[idx].hiddenInLine = true;
+        }
+    }
+}
 export function shapeKey(d) {
     return d.id || -1;
 }

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

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { DASH_STYLE } from '../../constants';
 import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('waterfall');
 export function renderWaterfall(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
     const svgElement = select(elements.plot);
@@ -28,18 +29,11 @@ export function renderWaterfall(elements, preparedData, seriesOptions, allowOver
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelSelection = svgElement
-        .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 labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     // Add the connector line between bars
     svgElement
         .selectAll(connectorSelector)

package/dist/esm/core/shapes/x-range/renderer.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getRectPath } from '../../shapes/utils';
 import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('x-range');
 export function renderXRange(elements, preparedData, seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
@@ -48,20 +49,13 @@ export function renderXRange(elements, preparedData, seriesOptions, dispatcher)
         .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
         .attr('pointer-events', 'none');
     const svgLabels = preparedData.flatMap((d) => d.svgLabels);
-    svgElement
-        .selectAll(`text.${b('label')}`)
-        .data(svgLabels)
-        .join('text')
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
+    renderDataLabels({
+        container: svgElement,
+        data: svgLabels,
+        className: b('label'),
+    })
         .attr('dominant-baseline', 'central')
-        .attr('pointer-events', 'none')
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null)
-        .html((d) => d.text);
+        .attr('pointer-events', 'none');
     const hoverOptions = get(seriesOptions, 'x-range.states.hover');
     const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
     function handleShapeHover(data) {

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

@@ -12,7 +12,6 @@ export type CustomFormat = {
     type: 'custom';
     formatter: (args: {
         value: unknown;
-        formattedValue?: string;
     }) => string;
 };
 /**
@@ -20,7 +19,10 @@ export type CustomFormat = {
  *
  * - `{ type: 'number' }` — numeric formatting with optional precision, units, percent display, etc.
  * See [FormatNumberOptions](https://gravity-ui.github.io/charts/pages/api/Utilities/interfaces/FormatNumberOptions.html) for all available options.
- * - `{ type: 'date' }` — date/time formatting
+ * - `{ type: 'date' }` — date/time formatting.
+ * - `{ type: 'custom' }` — user-defined formatter function. Receives the raw `value`
+ *   and returns the display string. Use it when the built-in number/date formatters
+ *   are not enough (e.g. bytes → KB/MB/GB, currency with locale, etc.).
  * @example
  * // Two decimal places, shown as percent
  * { type: 'number', precision: 2, format: 'percent' }
@@ -30,8 +32,20 @@ export type CustomFormat = {
  * @example
  * // Date value (Unix ms) formatted as "17 October 2025"
  * { type: 'date', format: 'DD MMMM YYYY' }
+ * @example
+ * // Bytes → human-readable size
+ * {
+ *   type: 'custom',
+ *   formatter: ({value}) => {
+ *     const bytes = Number(value);
+ *     if (!Number.isFinite(bytes)) return String(value);
+ *     const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+ *     const i = Math.min(units.length - 1, Math.floor(Math.log(Math.abs(bytes) || 1) / Math.log(1024)));
+ *     return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
+ *   },
+ * }
  */
-export type ValueFormat = NumberFormat | DateFormat;
+export type ValueFormat = NumberFormat | DateFormat | CustomFormat;
 export interface BaseDataLabels {
     /**
      * Enable or disable the data labels

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

@@ -5,7 +5,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { CustomFormat, ValueFormat } from './base';
+import type { ValueFormat } from './base';
 import type { FunnelSeries, FunnelSeriesData } from './funnel';
 import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
@@ -107,7 +107,7 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     /** Formatting settings for tooltip header row (includes computed default). */
-    headerFormat?: ValueFormat | CustomFormat;
+    headerFormat?: ValueFormat;
 }
 export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends ChartTooltipRendererArgs<T> {
 }
@@ -167,7 +167,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /** Formatting settings for tooltip value. */
     valueFormat?: ValueFormat;
     /** Formatting settings for tooltip header row. */
-    headerFormat?: ValueFormat | CustomFormat;
+    headerFormat?: ValueFormat;
     /** Settings for totals block in tooltip */
     totals?: {
         /**

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

@@ -1,40 +1 @@
-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;
-}
-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.
-     */
-    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.
-     */
-    unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
-}
+export type { FormatNumberOptions, FormatOptions, FormatUnitScale, FormatUnitScaleEntry, } from '../../libs/format-number/types';

package/dist/esm/core/utils/format.d.ts

@@ -1,9 +1,9 @@
 import type { AxisDomain } from 'd3-axis';
-import type { CustomFormat, ValueFormat } from '../../types';
+import type { ValueFormat } from '../../types';
 import type { PreparedAxis } from '../axes/types';
 export declare function getFormattedValue(args: {
     value: string | number | undefined | null;
-    format?: ValueFormat | CustomFormat;
+    format?: ValueFormat;
 }): string;
 export declare function formatAxisTickLabel(args: {
     axis: PreparedAxis;