@gravity-ui/charts 1.27.5 → 1.28.1

package/dist/cjs/components/AxisX/AxisX.js

@@ -11,20 +11,20 @@ export const AxisX = (props) => {
     const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
     React.useEffect(() => {
         if (!ref.current) {
-            return;
+            return () => { };
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-x';
+        const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
+        const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
-            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
             plotAfterContainer = select(plotAfterRef.current);
-            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (preparedAxisData.title) {
             svgElement
@@ -93,7 +93,6 @@ export const AxisX = (props) => {
             }
         });
         if (preparedAxisData.plotBands.length > 0) {
-            const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
             const setPlotBands = (plotContainer, plotBands) => {
                 if (!plotContainer || !plotBands.length) {
                     return;
@@ -134,7 +133,6 @@ export const AxisX = (props) => {
             setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
         }
         if (preparedAxisData.plotLines.length > 0) {
-            const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
             const setPlotLines = (plotContainer, plotLines) => {
                 if (!plotContainer || !plotLines.length) {
                     return;
@@ -175,6 +173,16 @@ export const AxisX = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        return () => {
+            if (plotBeforeContainer) {
+                plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+            if (plotAfterContainer) {
+                plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+        };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
     return (React.createElement(React.Fragment, null,
         React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -244,11 +244,15 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             const labelSize = plotBand.label.text
                 ? await getPlotLabelSize(plotBand.label.text)
                 : null;
+            const plotBandWidth = Math.min(endPos, axisWidth);
+            if (plotBandWidth < 0) {
+                continue;
+            }
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
                 y: 0,
-                width: Math.min(endPos, axisWidth),
+                width: plotBandWidth,
                 height: axisHeight,
                 color: plotBand.color,
                 opacity: plotBand.opacity,
@@ -268,6 +272,9 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             const plotLine = axis.plotLines[i];
             const axisScale = scale;
             const plotLineValue = Number(axisScale(plotLine.value));
+            if (plotLineValue < 0 || plotLineValue > boundsWidth) {
+                continue;
+            }
             const points = [
                 [plotLineValue, 0],
                 [plotLineValue, axisHeight],

package/dist/cjs/components/AxisY/AxisY.js

@@ -17,20 +17,20 @@ export const AxisY = (props) => {
     React.useEffect(() => {
         var _a;
         if (!ref.current) {
-            return;
+            return () => { };
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
+        const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
+        const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
-            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
             plotAfterContainer = select(plotAfterRef.current);
-            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) === false) {
             svgElement
@@ -99,7 +99,6 @@ export const AxisY = (props) => {
             }
         });
         if (preparedAxisData.plotBands.length > 0) {
-            const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
             const setPlotBands = (plotContainer, plotBands) => {
                 if (!plotContainer || !plotBands.length) {
                     return;
@@ -140,7 +139,6 @@ export const AxisY = (props) => {
             setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
         }
         if (preparedAxisData.plotLines.length > 0) {
-            const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
             const setPlotLines = (plotContainer, plotLines) => {
                 if (!plotContainer || !plotLines.length) {
                     return;
@@ -181,6 +179,16 @@ export const AxisY = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        return () => {
+            if (plotBeforeContainer) {
+                plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+            if (plotAfterContainer) {
+                plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+        };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
     return (React.createElement(React.Fragment, null,
         React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout }),

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -211,12 +211,16 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         const startPos = halfBandwidth + Math.min(from, to);
         const endPos = Math.min(Math.abs(to - from), axisHeight - Math.min(from, to));
         const top = Math.max(0, startPos);
+        const plotBandHeight = Math.min(endPos, axisHeight);
+        if (plotBandHeight < 0) {
+            return;
+        }
         plotBands.push({
             layerPlacement: plotBand.layerPlacement,
             x: 0,
             y: axisPlotTopPosition + top,
             width,
-            height: Math.min(endPos, axisHeight),
+            height: plotBandHeight,
             color: plotBand.color,
             opacity: plotBand.opacity,
             label: plotBand.label.text
@@ -234,6 +238,9 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         const plotLine = axis.plotLines[i];
         const axisScale = scale;
         const plotLineValue = Number(axisScale(plotLine.value));
+        if (plotLineValue < 0 || plotLineValue > axisHeight) {
+            continue;
+        }
         const points = [
             [0, plotLineValue],
             [width, plotLineValue],

package/dist/cjs/i18n/keysets/en.json

@@ -19,7 +19,8 @@
     "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}].",
     "label_invalid-axis-labels-html-type": "It seems you are trying to use inappropriate type for \"labels.html\" property. Only boolean is allowed.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
-    "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}]."
+    "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}].",
+    "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/cjs/i18n/keysets/ru.json

@@ -19,7 +19,8 @@
     "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}].",
     "label_invalid-axis-labels-html-type": "Похоже, что вы пытаетесь использовать некорректный тип для свойства \"labels.html\". Допускается только использование булевых значений.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
-    "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}]."
+    "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}].",
+    "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",

package/dist/cjs/types/chart/axis.d.ts

@@ -214,15 +214,19 @@ export interface AxisPlotBand extends AxisPlot {
      *
      * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
      * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     *
+     * If the value is `-Infinity` or `null`, it will be treated as the start of the axis.
      */
-    from: number | string;
+    from: number | string | null;
     /**
      * The end position of the plot band in axis units.
      *
      * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
      * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     *
+     * If the value is `Infinity` or `null`, it will be treated as the end of the axis.
      */
-    to: number | string;
+    to: number | string | null;
 }
 export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
     /** Whether the crosshair should snap to the point or follow the pointer independent of points.

package/dist/cjs/utils/chart/axis/common.js

@@ -67,8 +67,9 @@ export const getAxisPlotsPosition = (axis, split, width = 0) => {
 export function getBandsPosition(args) {
     var _a, _b, _c;
     const { band, axisScale } = args;
-    const scalePosTo = axisScale(band.to);
-    const scalePosFrom = axisScale(band.from);
+    const range = axisScale.range();
+    const scalePosFrom = band.from === -Infinity || band.from === null ? range[0] : axisScale(band.from);
+    const scalePosTo = band.to === Infinity || band.to === null ? range[1] : axisScale(band.to);
     const isX = args.axis === 'x';
     if (scalePosTo !== undefined && scalePosFrom !== undefined) {
         return {

package/dist/cjs/validation/validate-axes.js

@@ -2,7 +2,15 @@ import { AXIS_TYPE } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
 const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
-function validateDuplicateCategories({ categories, key, axisIndex, }) {
+function validateCategories(axis) {
+    if (!axis.categories || !Array.isArray(axis.categories) || axis.categories.length === 0) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-categories'),
+        });
+    }
+}
+function validateDuplicateCategories({ axisIndex, key, categories = [], }) {
     const seen = new Set();
     categories.forEach((category) => {
         if (seen.has(category)) {
@@ -54,7 +62,8 @@ export function validateAxes(args) {
     if (xAxis) {
         validateAxisType({ axis: xAxis, key: 'x' });
         validateLabelsHtmlOptions({ axis: xAxis });
-        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category' && xAxis.categories) {
+        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category') {
+            validateCategories(xAxis);
             validateDuplicateCategories({
                 categories: xAxis.categories,
                 key: 'x',
@@ -64,7 +73,8 @@ export function validateAxes(args) {
     }
     yAxis.forEach((axis, axisIndex) => {
         validateAxisType({ axis, key: 'y' });
-        if (axis.type === 'category' && axis.categories) {
+        if (axis.type === 'category') {
+            validateCategories(axis);
             validateDuplicateCategories({
                 categories: axis.categories,
                 key: 'y',

package/dist/esm/components/AxisX/AxisX.js

@@ -11,20 +11,20 @@ export const AxisX = (props) => {
     const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
     React.useEffect(() => {
         if (!ref.current) {
-            return;
+            return () => { };
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-x';
+        const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
+        const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
-            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
             plotAfterContainer = select(plotAfterRef.current);
-            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (preparedAxisData.title) {
             svgElement
@@ -93,7 +93,6 @@ export const AxisX = (props) => {
             }
         });
         if (preparedAxisData.plotBands.length > 0) {
-            const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
             const setPlotBands = (plotContainer, plotBands) => {
                 if (!plotContainer || !plotBands.length) {
                     return;
@@ -134,7 +133,6 @@ export const AxisX = (props) => {
             setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
         }
         if (preparedAxisData.plotLines.length > 0) {
-            const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
             const setPlotLines = (plotContainer, plotLines) => {
                 if (!plotContainer || !plotLines.length) {
                     return;
@@ -175,6 +173,16 @@ export const AxisX = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        return () => {
+            if (plotBeforeContainer) {
+                plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+            if (plotAfterContainer) {
+                plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+        };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
     return (React.createElement(React.Fragment, null,
         React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),

package/dist/esm/components/AxisX/prepare-axis-data.js

@@ -244,11 +244,15 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             const labelSize = plotBand.label.text
                 ? await getPlotLabelSize(plotBand.label.text)
                 : null;
+            const plotBandWidth = Math.min(endPos, axisWidth);
+            if (plotBandWidth < 0) {
+                continue;
+            }
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
                 y: 0,
-                width: Math.min(endPos, axisWidth),
+                width: plotBandWidth,
                 height: axisHeight,
                 color: plotBand.color,
                 opacity: plotBand.opacity,
@@ -268,6 +272,9 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             const plotLine = axis.plotLines[i];
             const axisScale = scale;
             const plotLineValue = Number(axisScale(plotLine.value));
+            if (plotLineValue < 0 || plotLineValue > boundsWidth) {
+                continue;
+            }
             const points = [
                 [plotLineValue, 0],
                 [plotLineValue, axisHeight],

package/dist/esm/components/AxisY/AxisY.js

@@ -17,20 +17,20 @@ export const AxisY = (props) => {
     React.useEffect(() => {
         var _a;
         if (!ref.current) {
-            return;
+            return () => { };
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
+        const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
+        const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
-            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
             plotAfterContainer = select(plotAfterRef.current);
-            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) === false) {
             svgElement
@@ -99,7 +99,6 @@ export const AxisY = (props) => {
             }
         });
         if (preparedAxisData.plotBands.length > 0) {
-            const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
             const setPlotBands = (plotContainer, plotBands) => {
                 if (!plotContainer || !plotBands.length) {
                     return;
@@ -140,7 +139,6 @@ export const AxisY = (props) => {
             setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
         }
         if (preparedAxisData.plotLines.length > 0) {
-            const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
             const setPlotLines = (plotContainer, plotLines) => {
                 if (!plotContainer || !plotLines.length) {
                     return;
@@ -181,6 +179,16 @@ export const AxisY = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        return () => {
+            if (plotBeforeContainer) {
+                plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+            if (plotAfterContainer) {
+                plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+            }
+        };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
     return (React.createElement(React.Fragment, null,
         React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout }),

package/dist/esm/components/AxisY/prepare-axis-data.js

@@ -211,12 +211,16 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         const startPos = halfBandwidth + Math.min(from, to);
         const endPos = Math.min(Math.abs(to - from), axisHeight - Math.min(from, to));
         const top = Math.max(0, startPos);
+        const plotBandHeight = Math.min(endPos, axisHeight);
+        if (plotBandHeight < 0) {
+            return;
+        }
         plotBands.push({
             layerPlacement: plotBand.layerPlacement,
             x: 0,
             y: axisPlotTopPosition + top,
             width,
-            height: Math.min(endPos, axisHeight),
+            height: plotBandHeight,
             color: plotBand.color,
             opacity: plotBand.opacity,
             label: plotBand.label.text
@@ -234,6 +238,9 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         const plotLine = axis.plotLines[i];
         const axisScale = scale;
         const plotLineValue = Number(axisScale(plotLine.value));
+        if (plotLineValue < 0 || plotLineValue > axisHeight) {
+            continue;
+        }
         const points = [
             [0, plotLineValue],
             [width, plotLineValue],

package/dist/esm/i18n/keysets/en.json

@@ -19,7 +19,8 @@
     "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}].",
     "label_invalid-axis-labels-html-type": "It seems you are trying to use inappropriate type for \"labels.html\" property. Only boolean is allowed.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
-    "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}]."
+    "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}].",
+    "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/esm/i18n/keysets/ru.json

@@ -19,7 +19,8 @@
     "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}].",
     "label_invalid-axis-labels-html-type": "Похоже, что вы пытаетесь использовать некорректный тип для свойства \"labels.html\". Допускается только использование булевых значений.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
-    "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}]."
+    "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}].",
+    "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",

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

@@ -214,15 +214,19 @@ export interface AxisPlotBand extends AxisPlot {
      *
      * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
      * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     *
+     * If the value is `-Infinity` or `null`, it will be treated as the start of the axis.
      */
-    from: number | string;
+    from: number | string | null;
     /**
      * The end position of the plot band in axis units.
      *
      * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
      * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     *
+     * If the value is `Infinity` or `null`, it will be treated as the end of the axis.
      */
-    to: number | string;
+    to: number | string | null;
 }
 export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
     /** Whether the crosshair should snap to the point or follow the pointer independent of points.

package/dist/esm/utils/chart/axis/common.js

@@ -67,8 +67,9 @@ export const getAxisPlotsPosition = (axis, split, width = 0) => {
 export function getBandsPosition(args) {
     var _a, _b, _c;
     const { band, axisScale } = args;
-    const scalePosTo = axisScale(band.to);
-    const scalePosFrom = axisScale(band.from);
+    const range = axisScale.range();
+    const scalePosFrom = band.from === -Infinity || band.from === null ? range[0] : axisScale(band.from);
+    const scalePosTo = band.to === Infinity || band.to === null ? range[1] : axisScale(band.to);
     const isX = args.axis === 'x';
     if (scalePosTo !== undefined && scalePosFrom !== undefined) {
         return {

package/dist/esm/validation/validate-axes.js

@@ -2,7 +2,15 @@ import { AXIS_TYPE } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
 const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
-function validateDuplicateCategories({ categories, key, axisIndex, }) {
+function validateCategories(axis) {
+    if (!axis.categories || !Array.isArray(axis.categories) || axis.categories.length === 0) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-categories'),
+        });
+    }
+}
+function validateDuplicateCategories({ axisIndex, key, categories = [], }) {
     const seen = new Set();
     categories.forEach((category) => {
         if (seen.has(category)) {
@@ -54,7 +62,8 @@ export function validateAxes(args) {
     if (xAxis) {
         validateAxisType({ axis: xAxis, key: 'x' });
         validateLabelsHtmlOptions({ axis: xAxis });
-        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category' && xAxis.categories) {
+        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category') {
+            validateCategories(xAxis);
             validateDuplicateCategories({
                 categories: xAxis.categories,
                 key: 'x',
@@ -64,7 +73,8 @@ export function validateAxes(args) {
     }
     yAxis.forEach((axis, axisIndex) => {
         validateAxisType({ axis, key: 'y' });
-        if (axis.type === 'category' && axis.categories) {
+        if (axis.type === 'category') {
+            validateCategories(axis);
             validateDuplicateCategories({
                 categories: axis.categories,
                 key: 'y',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.27.5",
+  "version": "1.28.1",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",