@gravity-ui/charts 1.18.2 → 1.20.0

package/dist/cjs/utils/chart/get-closest-data.js

@@ -49,7 +49,7 @@ export function getClosestPoints(args) {
     const groups = groupBy(shapesData, getSeriesType);
     // eslint-disable-next-line complexity
     Object.entries(groups).forEach(([seriesType, list]) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         switch (seriesType) {
             case 'bar-x': {
                 const points = list.map((d) => ({
@@ -177,6 +177,23 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'heatmap': {
+                const data = list;
+                const closestPoint = (_d = data[0]) === null || _d === void 0 ? void 0 : _d.items.find((cell) => {
+                    return (pointerX >= cell.x &&
+                        pointerX <= cell.x + cell.width &&
+                        pointerY >= cell.y &&
+                        pointerY <= cell.y + cell.height);
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data,
+                        series: data[0].series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
             case 'sankey': {
                 const [data] = list;
                 const closestLink = data.links.find((d) => {

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

@@ -2,7 +2,7 @@ import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, SeriesType } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { getWaterfallPointSubtotal } from './series/waterfall';
 export * from './axis';
@@ -109,19 +109,16 @@ export function getDefaultMinXAxisValue(series) {
 }
 export function getDefaultMinYAxisValue(series) {
     if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+        if (series.some((s) => s.type === SeriesType.Waterfall)) {
+            const seriesData = series.map((s) => s.data).flat();
+            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
+            return Math.min(0, minSubTotal);
+        }
         return series.reduce((minValue, s) => {
-            switch (s.type) {
-                case 'waterfall': {
-                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
-                    return Math.min(minValue, minSubTotal);
-                }
-                default: {
-                    // https://github.com/gravity-ui/charts/issues/160
-                    // @ts-expect-error
-                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-                    return Math.min(minValue, minYValue);
-                }
-            }
+            // https://github.com/gravity-ui/charts/issues/160
+            // @ts-expect-error
+            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
+            return Math.min(minValue, minYValue);
         }, 0);
     }
     return undefined;

package/dist/cjs/utils/chart/series/waterfall.d.ts

@@ -1,4 +1,4 @@
 import type { PreparedWaterfallSeries, PreparedWaterfallSeriesData } from '../../../hooks';
 import type { WaterfallSeriesData } from '../../../types';
 export declare function getWaterfallPointColor(point: WaterfallSeriesData, series: PreparedWaterfallSeries): string;
-export declare function getWaterfallPointSubtotal(point: PreparedWaterfallSeriesData, series: PreparedWaterfallSeries): number | null;
+export declare function getWaterfallPointSubtotal(point: PreparedWaterfallSeriesData, data: PreparedWaterfallSeriesData[]): number | null;

package/dist/cjs/utils/chart/series/waterfall.js

@@ -4,12 +4,12 @@ export function getWaterfallPointColor(point, series) {
     }
     return series.color;
 }
-export function getWaterfallPointSubtotal(point, series) {
-    const pointIndex = series.data.indexOf(point);
+export function getWaterfallPointSubtotal(point, data) {
+    const pointIndex = data.indexOf(point);
     if (pointIndex === -1) {
         return null;
     }
-    return series.data.reduce((sum, d, index) => {
+    return data.reduce((sum, d, index) => {
         if (index <= pointIndex) {
             const value = d.total ? 0 : Number(d.y);
             return sum + value;

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

@@ -2,6 +2,22 @@ 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, }) {
+    const seen = new Set();
+    categories.forEach((category) => {
+        if (seen.has(category)) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_duplicate-axis-categories', {
+                    key,
+                    axisIndex,
+                    duplicate: category,
+                }),
+            });
+        }
+        seen.add(category);
+    });
+}
 function validateAxisType({ axis, key }) {
     if (axis.type && !AVAILABLE_AXIS_TYPES.includes(axis.type)) {
         throw new ChartError({
@@ -38,9 +54,23 @@ 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) {
+            validateDuplicateCategories({
+                categories: xAxis.categories,
+                key: 'x',
+                axisIndex: 0,
+            });
+        }
     }
-    yAxis.forEach((axis) => {
+    yAxis.forEach((axis, axisIndex) => {
         validateAxisType({ axis, key: 'y' });
+        if (axis.type === 'category' && axis.categories) {
+            validateDuplicateCategories({
+                categories: axis.categories,
+                key: 'y',
+                axisIndex,
+            });
+        }
         validateLabelsHtmlOptions({ axis });
     });
 }

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

@@ -43,11 +43,13 @@ export const AxisY = (props) => {
                 .attr('y', (d) => d.y)
                 .attr('text-anchor', 'start');
         }
-        svgElement
-            .append('path')
-            .attr('class', b('domain'))
-            .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
-            .style('stroke', preparedAxisData.domain.lineColor);
+        if (preparedAxisData.domain) {
+            svgElement
+                .append('path')
+                .attr('class', b('domain'))
+                .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
+                .style('stroke', preparedAxisData.domain.lineColor);
+        }
         const tickClassName = b('tick');
         const ticks = svgElement
             .selectAll(`.${tickClassName}`)

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

@@ -86,11 +86,14 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
     const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
-    const domain = {
-        start: [domainX, axisPlotTopPosition],
-        end: [domainX, axisPlotTopPosition + axisHeight],
-        lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
-    };
+    let domain = null;
+    if (axis.visible) {
+        domain = {
+            start: [domainX, axisPlotTopPosition],
+            end: [domainX, axisPlotTopPosition + axisHeight],
+            lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+        };
+    }
     const ticks = [];
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;

package/dist/esm/components/AxisY/types.d.ts

@@ -74,7 +74,7 @@ export type AxisDomainData = {
 export type AxisYData = {
     id: string;
     title: AxisTitleData | null;
-    domain: AxisDomainData;
+    domain: AxisDomainData | null;
     ticks: AxisTickData[];
     plotLines: AxisPlotLineData[];
     plotBands: AxisPlotBandData[];

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

@@ -15,8 +15,8 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
         }
         const getScaleTicks = () => {
             var _a;
+            const domainData = getDomainDataYBySeries(series);
             if (series.some((s) => s.type === 'bar-y')) {
-                const domainData = getDomainDataYBySeries(series);
                 if (domainData.length < 3) {
                     return domainData;
                 }

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

@@ -13,6 +13,7 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
+import { useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
@@ -82,34 +83,27 @@ export const ChartInner = (props) => {
             unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
-    const [yAxisDataItems, setYAxisDataItems] = React.useState([]);
-    const countedRef = React.useRef(0);
-    React.useEffect(() => {
-        countedRef.current++;
-        (async function () {
-            const currentRun = countedRef.current;
-            const items = [];
-            for (let i = 0; i < yAxis.length; i++) {
-                const axis = yAxis[i];
-                const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
-                if (scale) {
-                    const axisData = await prepareAxisData({
-                        axis,
-                        scale,
-                        top: boundsOffsetTop,
-                        width: boundsWidth,
-                        height: boundsHeight,
-                        split: preparedSplit,
-                        series: preparedSeries,
-                    });
-                    items.push(axisData);
-                }
-            }
-            if (countedRef.current === currentRun) {
-                setYAxisDataItems(items);
+    const setYAxisDataItems = React.useCallback(async () => {
+        const items = [];
+        for (let i = 0; i < yAxis.length; i++) {
+            const axis = yAxis[i];
+            const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+            if (scale) {
+                const axisData = await prepareAxisData({
+                    axis,
+                    scale,
+                    top: boundsOffsetTop,
+                    width: boundsWidth,
+                    height: boundsHeight,
+                    split: preparedSplit,
+                    series: preparedSeries.filter((s) => s.visible),
+                });
+                items.push(axisData);
             }
-        })();
+        }
+        return items;
     }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
+    const yAxisDataItems = useAsyncState([], setYAxisDataItems);
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapeSeries, useShapes, useSplit, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
@@ -38,37 +39,6 @@ export function useChartInnerProps(props) {
             zoomState,
         });
     }, [data.xAxis, data.yAxis, sortedSeriesData, zoomState]);
-    const [xAxis, setXAxis] = React.useState(null);
-    React.useEffect(() => {
-        setXAxis(null);
-        getPreparedXAxis({
-            xAxis: data.xAxis,
-            width,
-            seriesData: zoomedSeriesData,
-            seriesOptions: preparedSeriesOptions,
-        }).then((val) => setXAxis(val));
-    }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
-    const estimatedBoundsHeight = React.useMemo(() => {
-        if (xAxis) {
-            return (height -
-                xAxis.title.height +
-                xAxis.title.margin +
-                xAxis.labels.margin +
-                parseInt(xAxis.labels.style.fontSize, 10));
-        }
-        return 0;
-    }, [height, xAxis]);
-    const [yAxis, setYAxis] = React.useState([]);
-    React.useEffect(() => {
-        setYAxis([]);
-        getPreparedYAxis({
-            height,
-            boundsHeight: estimatedBoundsHeight,
-            width,
-            seriesData: zoomedSeriesData,
-            yAxis: data.yAxis,
-        }).then((val) => setYAxis(val));
-    }, [data.yAxis, estimatedBoundsHeight, height, width, zoomedSeriesData]);
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,
@@ -76,6 +46,62 @@ export function useChartInnerProps(props) {
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });
+    // preparing the X and Y axes
+    const [axesState, setValue] = React.useState({ xAxis: null, yAxis: [] });
+    const axesStateRunRef = React.useRef(0);
+    const prevAxesStateValue = React.useRef(axesState);
+    const axesStateReady = React.useRef(false);
+    React.useEffect(() => {
+        axesStateRunRef.current++;
+        axesStateReady.current = false;
+        (async function () {
+            const currentRun = axesStateRunRef.current;
+            const seriesData = preparedSeries.filter((s) => s.visible);
+            const xAxis = await getPreparedXAxis({
+                xAxis: data.xAxis,
+                width,
+                seriesData,
+                seriesOptions: preparedSeriesOptions,
+            });
+            let estimatedBoundsHeight = height;
+            if (xAxis) {
+                estimatedBoundsHeight =
+                    height -
+                        (xAxis.title.height +
+                            xAxis.title.margin +
+                            xAxis.labels.margin +
+                            xAxis.labels.height +
+                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                            chart.margin.top +
+                            chart.margin.bottom);
+            }
+            const yAxis = await getPreparedYAxis({
+                height,
+                boundsHeight: estimatedBoundsHeight,
+                width,
+                seriesData,
+                yAxis: data.yAxis,
+            });
+            const newStateValue = { xAxis, yAxis };
+            if (axesStateRunRef.current === currentRun) {
+                if (!isEqual(prevAxesStateValue.current, newStateValue)) {
+                    setValue(newStateValue);
+                    prevAxesStateValue.current = newStateValue;
+                }
+                axesStateReady.current = true;
+            }
+        })();
+    }, [
+        chart.margin,
+        data.xAxis,
+        data.yAxis,
+        height,
+        preparedLegend,
+        preparedSeries,
+        preparedSeriesOptions,
+        width,
+    ]);
+    const { xAxis, yAxis } = axesStateReady.current ? axesState : { xAxis: null, yAxis: [] };
     const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
     const { preparedSeries: preparedShapesSeries } = useShapeSeries({
         colors,

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

@@ -1,3 +1,4 @@
 import type { PreparedAxis } from '../../hooks/useChartOptions/types';
 import type { ChartSeries } from '../../types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxes?: PreparedAxis[]): boolean;
+export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
 export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     const hasDataMap = new Map();
     yAxes.forEach((yAxis) => {
@@ -26,3 +28,22 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     });
     return [...hasDataMap.values()].every((hasData) => hasData);
 }
+export function useAsyncState(value, setState) {
+    const [stateValue, setValue] = React.useState(value);
+    const countedRef = React.useRef(0);
+    const prevValue = React.useRef(value);
+    const ready = React.useRef(false);
+    React.useEffect(() => {
+        countedRef.current++;
+        (async function () {
+            const currentRun = countedRef.current;
+            const newValue = await setState();
+            ready.current = true;
+            if (countedRef.current === currentRun && !isEqual(prevValue.current, newValue)) {
+                setValue(newValue);
+                prevValue.current = newValue;
+            }
+        })();
+    }, [setState]);
+    return stateValue;
+}

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

@@ -12,4 +12,4 @@ export interface ChartTooltipContentProps {
     yAxis?: ChartYAxis;
     qa?: string;
 }
-export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;
+export declare const ChartTooltipContent: React.MemoExoticComponent<(props: ChartTooltipContentProps) => React.JSX.Element | null>;

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
-export const ChartTooltipContent = (props) => {
+export const ChartTooltipContent = React.memo((props) => {
     const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = 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, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis, qa: qa })) : (customTooltip);
-};
+});
+ChartTooltipContent.displayName = 'ChartTooltipContent';

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

@@ -150,6 +150,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                         });
                     }
                     case 'pie':
+                    case 'heatmap':
                     case 'treemap': {
                         const seriesData = data;
                         const formattedValue = getFormattedValue({

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

@@ -39,7 +39,7 @@ export function getDefaultValueFormat({ axis, closestPointsRange, }) {
 }
 export const getMeasureValue = ({ data, xAxis, yAxis, headerFormat, }) => {
     var _a, _b, _c, _d, _e, _f;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'heatmap'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'radar')) {
@@ -78,6 +78,7 @@ export function getHoveredValues(args) {
             }
             case 'pie':
             case 'radar':
+            case 'heatmap':
             case 'treemap': {
                 const seriesData = data;
                 return seriesData.value;

package/dist/esm/constants/chart-types.d.ts

@@ -9,4 +9,5 @@ export declare const SeriesType: {
     readonly Waterfall: "waterfall";
     readonly Sankey: "sankey";
     readonly Radar: "radar";
+    readonly Heatmap: "heatmap";
 };

package/dist/esm/constants/chart-types.js

@@ -9,4 +9,5 @@ export const SeriesType = {
     Waterfall: 'waterfall',
     Sankey: 'sankey',
     Radar: 'radar',
+    Heatmap: 'heatmap',
 };

package/dist/esm/constants/defaults/series-options.js

@@ -117,4 +117,12 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    heatmap: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+        },
+    },
 };

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

@@ -3,8 +3,8 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 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 { getBandSize } from '../utils';
 import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
+import { getBandSize } from '../utils/get-band-size';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
     let hasNumberAndNullValues;
@@ -59,6 +59,10 @@ function getYScaleRange(args) {
         }
     }
 }
+function isSeriesWithYAxisOffset(series) {
+    const types = [SeriesType.BarY, SeriesType.Heatmap];
+    return series.some((s) => types.includes(s.type));
+}
 // eslint-disable-next-line complexity
 export function createYScale(args) {
     const { axis, boundsHeight, series } = args;
@@ -89,9 +93,9 @@ export function createYScale(args) {
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 const scale = scaleFn().domain([yMin, yMax]).range(range);
                 let offsetMin = 0;
-                let offsetMax = boundsHeight * axis.maxPadding;
-                const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-                if (barYSeries.length) {
+                // We should ignore padding if we are drawing only one point on the plot.
+                let offsetMax = yMin === yMax ? 0 : boundsHeight * axis.maxPadding;
+                if (isSeriesWithYAxisOffset(series)) {
                     if (domain.length > 1) {
                         const bandWidth = getBandSize({
                             scale: scale,
@@ -138,8 +142,7 @@ export function createYScale(args) {
                     const scale = scaleUtc().domain([yMin, yMax]).range(range);
                     let offsetMin = 0;
                     let offsetMax = boundsHeight * axis.maxPadding;
-                    const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-                    if (barYSeries.length) {
+                    if (isSeriesWithYAxisOffset(series)) {
                         if (Object.keys(domain).length > 1) {
                             const bandWidth = getBandSize({
                                 scale: scale,
@@ -175,6 +178,10 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+function isSeriesWithXAxisOffset(series) {
+    const types = [SeriesType.Heatmap];
+    return series.some((s) => types.includes(s.type));
+}
 function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, maxPadding, }) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth - maxPadding];
@@ -252,7 +259,23 @@ export function createXScale(args) {
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
                 const scale = scaleFn().domain([xMin, xMax]).range(range);
-                if (!hasZoomX) {
+                let offsetMin = 0;
+                let offsetMax = 0;
+                const hasOffset = isSeriesWithXAxisOffset(series);
+                if (hasOffset) {
+                    if (domainData.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domainData,
+                        });
+                        offsetMin += bandWidth / 2;
+                        offsetMax += bandWidth / 2;
+                    }
+                }
+                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                if (!hasZoomX && !hasOffset) {
                     // 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));
                 }
@@ -288,7 +311,23 @@ export function createXScale(args) {
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
-                if (!hasZoomX) {
+                let offsetMin = 0;
+                let offsetMax = 0;
+                const hasOffset = isSeriesWithXAxisOffset(series);
+                if (hasOffset) {
+                    if (domainData.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domainData,
+                        });
+                        offsetMin += bandWidth / 2;
+                        offsetMax += bandWidth / 2;
+                    }
+                }
+                const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                if (!hasZoomX && !hasOffset) {
                     // 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));
                 }

package/dist/esm/hooks/useChartOptions/tooltip.js

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
 function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
-    if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar'].includes(item.type))) {
+    if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap'].includes(item.type))) {
         return undefined;
     }
     if (seriesData.some((item) => item.type === 'bar-y')) {

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

@@ -6,4 +6,4 @@ export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, widt
     seriesData: ChartSeries[];
     seriesOptions: PreparedSeriesOptions;
     width: number;
-}) => Promise<PreparedAxis>;
+}) => Promise<PreparedAxis | null>;