@gravity-ui/charts 1.14.0 → 1.15.0

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

@@ -39,8 +39,13 @@ export function useChartInnerProps(props) {
     const [xAxis, setXAxis] = React.useState(null);
     React.useEffect(() => {
         setXAxis(null);
-        getPreparedXAxis({ xAxis: data.xAxis, width, seriesData: zoomedSeriesData }).then((val) => setXAxis(val));
-    }, [data.xAxis, width, zoomedSeriesData]);
+        getPreparedXAxis({
+            xAxis: data.xAxis,
+            width,
+            seriesData: zoomedSeriesData,
+            seriesOptions: preparedSeriesOptions,
+        }).then((val) => setXAxis(val));
+    }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
     const [yAxis, setYAxis] = React.useState([]);
     React.useEffect(() => {
         setYAxis([]);

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -5,6 +5,7 @@ export interface ChartTooltipContentProps {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
+    rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
     totals?: ChartTooltip['totals'];
 }

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, valueFormat, totals } = props;
+    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, totals } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals, rowRenderer: rowRenderer })) : (customTooltip);
 };

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -6,6 +6,7 @@ type Props = {
     valueFormat?: ValueFormat;
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    rowRenderer?: ChartTooltip['rowRenderer'];
 };
-export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -7,9 +7,25 @@ import { Row } from './Row';
 import { RowTotals } from './RowTotals';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals }) => {
+export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }) => {
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
+    const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
+        if (typeof rowRenderer === 'function') {
+            return rowRenderer({
+                id,
+                name,
+                color,
+                value,
+                formattedValue,
+                striped,
+                active,
+                className: b('content-row', { active, striped }),
+                hovered,
+            });
+        }
+        return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
+    };
     return (React.createElement("div", { className: b('content') },
         measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
         // eslint-disable-next-line complexity
@@ -30,7 +46,15 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        active,
+                        color,
+                        name: series.name,
+                        striped,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
@@ -56,7 +80,15 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        active,
+                        color,
+                        name: series.name,
+                        striped,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'pie':
                 case 'treemap': {
@@ -65,11 +97,13 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: [seriesData.name || seriesData.id]
-                                    .flat()
-                                    .join('\n'),
-                            } }), value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        name: [seriesData.name || seriesData.id].flat().join('\n'),
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'sankey': {
                     const { target, data: source } = seriesItem;
@@ -77,11 +111,13 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, color: source.color, label: React.createElement("span", null,
-                            source.name,
-                            " \u2192 ", target === null || target === void 0 ? void 0 :
-                            target.name,
-                            ":"), value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'radar': {
                     const radarSeries = series;
@@ -89,7 +125,14 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: radarSeries.name || radarSeries.id, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        active,
+                        name: radarSeries.name || radarSeries.id,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 default: {
                     return null;

package/dist/cjs/components/Tooltip/index.js

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
 };

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -29,6 +29,7 @@ export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
+    seriesOptions: PreparedSeriesOptions;
     hasZoomX?: boolean;
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**

package/dist/cjs/hooks/useAxisScales/index.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
+import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
@@ -130,32 +131,55 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, maxPadding, }) {
+    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
+    const xRange = [0, boundsWidth - maxPadding];
+    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = hasZoomX ? xRangeZoom : xRange;
+    const barXSeries = series.filter((s) => s.type === SeriesType.BarX);
+    if (barXSeries.length) {
+        const groupedData = groupBarXDataByXValue(barXSeries, axis);
+        if (Object.keys(groupedData).length > 1) {
+            const { bandSize } = getBarXLayoutForNumericScale({
+                plotWidth: boundsWidth - maxPadding,
+                groupedData,
+                seriesOptions,
+            });
+            const offset = bandSize / 2;
+            return [range[0] + offset, range[1] - offset];
+        }
+    }
+    return range;
+}
 // eslint-disable-next-line complexity
 export function createXScale(args) {
-    const { axis, boundsWidth, series, hasZoomX } = args;
+    const { axis, boundsWidth, series, seriesOptions, hasZoomX } = args;
     const xMinProps = get(axis, 'min');
     const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
-    const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
-    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
-    const xRange = [0, boundsWidth - xAxisMaxPadding];
-    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = getXScaleRange({
+        boundsWidth,
+        series,
+        seriesOptions,
+        hasZoomX,
+        axis,
+        maxPadding: xAxisMaxPadding,
+    });
     switch (axis.order) {
         case 'sortDesc':
         case 'reverse': {
-            xRange.reverse();
-            xRangeZoom.reverse();
+            range.reverse();
         }
     }
     switch (xType) {
         case 'linear':
         case 'logarithmic': {
-            const domain = getDomainDataXBySeries(series);
-            if (isNumericalArrayData(domain)) {
-                const [xMinDomain, xMaxDomain] = extent(domain);
+            const domainData = getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinDomain, xMaxDomain] = extent(domainData);
                 let xMin;
                 let xMax;
                 if (typeof xMinProps === 'number') {
@@ -176,11 +200,10 @@ export function createXScale(args) {
                             : xMaxDomain;
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                const scale = scaleFn().domain([xMin, xMax]).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
@@ -195,40 +218,27 @@ export function createXScale(args) {
                 });
                 const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
                 if (xScale.step() / 2 < xAxisMaxPadding) {
-                    xScale.range(xRange);
+                    xScale.range(range);
                 }
                 return xScale;
             }
             break;
         }
         case 'datetime': {
-            if (xTimestamps) {
-                const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
+            let domain = null;
+            const domainData = get(axis, 'timestamps') || getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinTimestamp, xMaxTimestamp] = extent(domainData);
                 const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                const scale = scaleUtc()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                domain = [xMin, xMax];
+                const scale = scaleUtc().domain(domain).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
-            else {
-                const domain = getDomainDataXBySeries(series);
-                if (isNumericalArrayData(domain)) {
-                    const [xMinTimestamp, xMaxTimestamp] = extent(domain);
-                    const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
-                    const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                    const scale = scaleUtc()
-                        .domain([xMin, xMax])
-                        .range(hasZoomX ? xRangeZoom : xRange);
-                    if (!hasZoomX) {
-                        scale.nice();
-                    }
-                    return scale;
-                }
-            }
             break;
         }
     }
@@ -242,7 +252,13 @@ const createScales = (args) => {
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
         xScale: xAxis
-            ? createXScale({ axis: xAxis, boundsWidth, series: visibleSeries, hasZoomX })
+            ? createXScale({
+                axis: xAxis,
+                boundsWidth,
+                series: visibleSeries,
+                seriesOptions,
+                hasZoomX,
+            })
             : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {

package/dist/cjs/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,9 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
+import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, width, }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
+    seriesOptions: PreparedSeriesOptions;
     width: number;
 }) => Promise<PreparedAxis>;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -3,8 +3,8 @@ import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLa
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
-async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
-    const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
+async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
+    const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getXAxisItems({
         scale: scale,
@@ -40,7 +40,7 @@ async function getLabelSettings({ axis, seriesData, width, autoRotation = true,
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
-export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
+export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
@@ -132,6 +132,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     const { height, rotation } = await getLabelSettings({
         axis: preparedXAxis,
         seriesData,
+        seriesOptions,
         width,
         autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
     });

package/dist/cjs/hooks/utils/bar-x.d.ts

@@ -0,0 +1,16 @@
+import type { BarXSeries, BarXSeriesData } from '../../types';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
+export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedAxis): Record<string | number, Record<string, {
+    data: BarXSeriesData;
+    series: T;
+}[]>>;
+export declare function getBarXLayoutForNumericScale(args: {
+    plotWidth: number;
+    seriesOptions: PreparedSeriesOptions;
+    groupedData: ReturnType<typeof groupBarXDataByXValue>;
+}): {
+    bandSize: number;
+    barGap: number;
+    barSize: number;
+};

package/dist/cjs/hooks/utils/bar-x.js

@@ -0,0 +1,41 @@
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getSeriesStackId } from '../useSeries/utils';
+export function groupBarXDataByXValue(series, xAxis) {
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            var _a;
+            const categories = (_a = xAxis.categories) !== null && _a !== void 0 ? _a : [];
+            const key = xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x;
+            if (key) {
+                if (!data[key]) {
+                    data[key] = {};
+                }
+                const stackId = getSeriesStackId(s);
+                if (!data[key][stackId]) {
+                    data[key][stackId] = [];
+                }
+                data[key][stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    return data;
+}
+export function getBarXLayoutForNumericScale(args) {
+    const { plotWidth, groupedData, seriesOptions } = args;
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotWidth / groups.length;
+    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupSize = bandSize - groupGap;
+    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
+}

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

@@ -84,10 +84,24 @@ export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends Ch
 }
 export type ChartTooltipTotalsBuiltInAggregation = (typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION)[keyof typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION];
 export type ChartTooltipTotalsAggregationValue = number | string | undefined;
+export type ChartTooltipRowRendererArgs = {
+    id: string;
+    name: string;
+    active?: boolean;
+    color?: string;
+    striped?: boolean;
+    value: string | number | null | undefined;
+    formattedValue?: string;
+    hovered?: TooltipDataChunk<unknown>[];
+    className?: string;
+};
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    /** Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
+     * It is useful in cases where you need to display additional information, but keep the general format of the tooltip. */
+    rowRenderer?: (args: ChartTooltipRowRendererArgs) => React.ReactElement | null;
     pin?: {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';

package/dist/cjs/utils/chart/index.d.ts

@@ -43,7 +43,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
         category: string;
     }[];
 };
-export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => unknown[];
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;
 export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;

package/dist/cjs/utils/chart/index.js

@@ -51,7 +51,11 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
         seriesStack.forEach((singleSeries) => {
             const data = new Map();
             singleSeries.data.forEach((point) => {
-                const key = String(point[keyAttr]);
+                const keyValue = point[keyAttr];
+                if (keyValue === null) {
+                    return;
+                }
+                const key = String(keyValue);
                 let value = 0;
                 if (valueAttr in point && typeof point[valueAttr] === 'number') {
                     value = point[valueAttr];
@@ -71,7 +75,7 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
 }
 export const getDomainDataXBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
-    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+    const values = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
             case 'bar-y': {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
@@ -85,6 +89,7 @@ export const getDomainDataXBySeries = (series) => {
         }
         return acc;
     }, []);
+    return Array.from(new Set(values.filter((v) => v !== null)));
 };
 export function getDefaultMaxXAxisValue(series) {
     if (series.some((s) => s.type === 'bar-y')) {

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

@@ -39,8 +39,13 @@ export function useChartInnerProps(props) {
     const [xAxis, setXAxis] = React.useState(null);
     React.useEffect(() => {
         setXAxis(null);
-        getPreparedXAxis({ xAxis: data.xAxis, width, seriesData: zoomedSeriesData }).then((val) => setXAxis(val));
-    }, [data.xAxis, width, zoomedSeriesData]);
+        getPreparedXAxis({
+            xAxis: data.xAxis,
+            width,
+            seriesData: zoomedSeriesData,
+            seriesOptions: preparedSeriesOptions,
+        }).then((val) => setXAxis(val));
+    }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
     const [yAxis, setYAxis] = React.useState([]);
     React.useEffect(() => {
         setYAxis([]);

package/dist/esm/components/Tooltip/ChartTooltipContent.d.ts

@@ -5,6 +5,7 @@ export interface ChartTooltipContentProps {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
+    rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
     totals?: ChartTooltip['totals'];
 }

package/dist/esm/components/Tooltip/ChartTooltipContent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, valueFormat, totals } = props;
+    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, totals } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals, rowRenderer: rowRenderer })) : (customTooltip);
 };

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -6,6 +6,7 @@ type Props = {
     valueFormat?: ValueFormat;
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    rowRenderer?: ChartTooltip['rowRenderer'];
 };
-export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }: Props) => React.JSX.Element;
 export {};

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.js

@@ -7,9 +7,25 @@ import { Row } from './Row';
 import { RowTotals } from './RowTotals';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals }) => {
+export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }) => {
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
+    const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
+        if (typeof rowRenderer === 'function') {
+            return rowRenderer({
+                id,
+                name,
+                color,
+                value,
+                formattedValue,
+                striped,
+                active,
+                className: b('content-row', { active, striped }),
+                hovered,
+            });
+        }
+        return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
+    };
     return (React.createElement("div", { className: b('content') },
         measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
         // eslint-disable-next-line complexity
@@ -30,7 +46,15 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        active,
+                        color,
+                        name: series.name,
+                        striped,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
@@ -56,7 +80,15 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        active,
+                        color,
+                        name: series.name,
+                        striped,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'pie':
                 case 'treemap': {
@@ -65,11 +97,13 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: [seriesData.name || seriesData.id]
-                                    .flat()
-                                    .join('\n'),
-                            } }), value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        name: [seriesData.name || seriesData.id].flat().join('\n'),
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'sankey': {
                     const { target, data: source } = seriesItem;
@@ -77,11 +111,13 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, color: source.color, label: React.createElement("span", null,
-                            source.name,
-                            " \u2192 ", target === null || target === void 0 ? void 0 :
-                            target.name,
-                            ":"), value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 case 'radar': {
                     const radarSeries = series;
@@ -89,7 +125,14 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format: valueFormat || { type: 'number' },
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: radarSeries.name || radarSeries.id, value: formattedValue }));
+                    return renderRow({
+                        id,
+                        color,
+                        active,
+                        name: radarSeries.name || radarSeries.id,
+                        value: hoveredValues[i],
+                        formattedValue,
+                    });
                 }
                 default: {
                     return null;

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

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
 };

package/dist/esm/hooks/useAxisScales/index.d.ts

@@ -29,6 +29,7 @@ export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
+    seriesOptions: PreparedSeriesOptions;
     hasZoomX?: boolean;
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**

package/dist/esm/hooks/useAxisScales/index.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
+import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
@@ -130,32 +131,55 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, maxPadding, }) {
+    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
+    const xRange = [0, boundsWidth - maxPadding];
+    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = hasZoomX ? xRangeZoom : xRange;
+    const barXSeries = series.filter((s) => s.type === SeriesType.BarX);
+    if (barXSeries.length) {
+        const groupedData = groupBarXDataByXValue(barXSeries, axis);
+        if (Object.keys(groupedData).length > 1) {
+            const { bandSize } = getBarXLayoutForNumericScale({
+                plotWidth: boundsWidth - maxPadding,
+                groupedData,
+                seriesOptions,
+            });
+            const offset = bandSize / 2;
+            return [range[0] + offset, range[1] - offset];
+        }
+    }
+    return range;
+}
 // eslint-disable-next-line complexity
 export function createXScale(args) {
-    const { axis, boundsWidth, series, hasZoomX } = args;
+    const { axis, boundsWidth, series, seriesOptions, hasZoomX } = args;
     const xMinProps = get(axis, 'min');
     const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
-    const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
-    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
-    const xRange = [0, boundsWidth - xAxisMaxPadding];
-    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = getXScaleRange({
+        boundsWidth,
+        series,
+        seriesOptions,
+        hasZoomX,
+        axis,
+        maxPadding: xAxisMaxPadding,
+    });
     switch (axis.order) {
         case 'sortDesc':
         case 'reverse': {
-            xRange.reverse();
-            xRangeZoom.reverse();
+            range.reverse();
         }
     }
     switch (xType) {
         case 'linear':
         case 'logarithmic': {
-            const domain = getDomainDataXBySeries(series);
-            if (isNumericalArrayData(domain)) {
-                const [xMinDomain, xMaxDomain] = extent(domain);
+            const domainData = getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinDomain, xMaxDomain] = extent(domainData);
                 let xMin;
                 let xMax;
                 if (typeof xMinProps === 'number') {
@@ -176,11 +200,10 @@ export function createXScale(args) {
                             : xMaxDomain;
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                const scale = scaleFn().domain([xMin, xMax]).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
@@ -195,40 +218,27 @@ export function createXScale(args) {
                 });
                 const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
                 if (xScale.step() / 2 < xAxisMaxPadding) {
-                    xScale.range(xRange);
+                    xScale.range(range);
                 }
                 return xScale;
             }
             break;
         }
         case 'datetime': {
-            if (xTimestamps) {
-                const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
+            let domain = null;
+            const domainData = get(axis, 'timestamps') || getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinTimestamp, xMaxTimestamp] = extent(domainData);
                 const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                const scale = scaleUtc()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                domain = [xMin, xMax];
+                const scale = scaleUtc().domain(domain).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
-            else {
-                const domain = getDomainDataXBySeries(series);
-                if (isNumericalArrayData(domain)) {
-                    const [xMinTimestamp, xMaxTimestamp] = extent(domain);
-                    const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
-                    const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                    const scale = scaleUtc()
-                        .domain([xMin, xMax])
-                        .range(hasZoomX ? xRangeZoom : xRange);
-                    if (!hasZoomX) {
-                        scale.nice();
-                    }
-                    return scale;
-                }
-            }
             break;
         }
     }
@@ -242,7 +252,13 @@ const createScales = (args) => {
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
         xScale: xAxis
-            ? createXScale({ axis: xAxis, boundsWidth, series: visibleSeries, hasZoomX })
+            ? createXScale({
+                axis: xAxis,
+                boundsWidth,
+                series: visibleSeries,
+                seriesOptions,
+                hasZoomX,
+            })
             : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {

package/dist/esm/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,9 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
+import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, width, }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
+    seriesOptions: PreparedSeriesOptions;
     width: number;
 }) => Promise<PreparedAxis>;

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -3,8 +3,8 @@ import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLa
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
-async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
-    const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
+async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
+    const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getXAxisItems({
         scale: scale,
@@ -40,7 +40,7 @@ async function getLabelSettings({ axis, seriesData, width, autoRotation = true,
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
-export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
+export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
@@ -132,6 +132,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     const { height, rotation } = await getLabelSettings({
         axis: preparedXAxis,
         seriesData,
+        seriesOptions,
         width,
         autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
     });

package/dist/esm/hooks/utils/bar-x.d.ts

@@ -0,0 +1,16 @@
+import type { BarXSeries, BarXSeriesData } from '../../types';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
+export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedAxis): Record<string | number, Record<string, {
+    data: BarXSeriesData;
+    series: T;
+}[]>>;
+export declare function getBarXLayoutForNumericScale(args: {
+    plotWidth: number;
+    seriesOptions: PreparedSeriesOptions;
+    groupedData: ReturnType<typeof groupBarXDataByXValue>;
+}): {
+    bandSize: number;
+    barGap: number;
+    barSize: number;
+};

package/dist/esm/hooks/utils/bar-x.js

@@ -0,0 +1,41 @@
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getSeriesStackId } from '../useSeries/utils';
+export function groupBarXDataByXValue(series, xAxis) {
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            var _a;
+            const categories = (_a = xAxis.categories) !== null && _a !== void 0 ? _a : [];
+            const key = xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x;
+            if (key) {
+                if (!data[key]) {
+                    data[key] = {};
+                }
+                const stackId = getSeriesStackId(s);
+                if (!data[key][stackId]) {
+                    data[key][stackId] = [];
+                }
+                data[key][stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    return data;
+}
+export function getBarXLayoutForNumericScale(args) {
+    const { plotWidth, groupedData, seriesOptions } = args;
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotWidth / groups.length;
+    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupSize = bandSize - groupGap;
+    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
+}

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

@@ -84,10 +84,24 @@ export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends Ch
 }
 export type ChartTooltipTotalsBuiltInAggregation = (typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION)[keyof typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION];
 export type ChartTooltipTotalsAggregationValue = number | string | undefined;
+export type ChartTooltipRowRendererArgs = {
+    id: string;
+    name: string;
+    active?: boolean;
+    color?: string;
+    striped?: boolean;
+    value: string | number | null | undefined;
+    formattedValue?: string;
+    hovered?: TooltipDataChunk<unknown>[];
+    className?: string;
+};
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    /** Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
+     * It is useful in cases where you need to display additional information, but keep the general format of the tooltip. */
+    rowRenderer?: (args: ChartTooltipRowRendererArgs) => React.ReactElement | null;
     pin?: {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';

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

@@ -43,7 +43,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
         category: string;
     }[];
 };
-export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => unknown[];
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;
 export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;

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

@@ -51,7 +51,11 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
         seriesStack.forEach((singleSeries) => {
             const data = new Map();
             singleSeries.data.forEach((point) => {
-                const key = String(point[keyAttr]);
+                const keyValue = point[keyAttr];
+                if (keyValue === null) {
+                    return;
+                }
+                const key = String(keyValue);
                 let value = 0;
                 if (valueAttr in point && typeof point[valueAttr] === 'number') {
                     value = point[valueAttr];
@@ -71,7 +75,7 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
 }
 export const getDomainDataXBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
-    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+    const values = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
             case 'bar-y': {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
@@ -85,6 +89,7 @@ export const getDomainDataXBySeries = (series) => {
         }
         return acc;
     }, []);
+    return Array.from(new Set(values.filter((v) => v !== null)));
 };
 export function getDefaultMaxXAxisValue(series) {
     if (series.some((s) => s.type === 'bar-y')) {

package/package.json

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