@gravity-ui/charts 1.13.2 → 1.15.0

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -3,13 +3,16 @@ import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
 type Props = {
     axis: PreparedAxis;
-    width: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     scale: ChartScale;
     split: PreparedSplit;
+    width: number;
+    leftmostLimit?: number;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
-    leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

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

@@ -42,11 +42,11 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = props;
+    const { axis, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, leftmostLimit, plotAfterRef, plotBeforeRef, split, scale, width, } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         (async () => {
-            if (!ref.current) {
+            if (!ref.current || !htmlLayout) {
                 return;
             }
             const svgElement = select(ref.current);
@@ -65,24 +65,29 @@ export const AxisX = React.memo(function AxisX(props) {
             }
             const axisScale = scale;
             const xAxisGenerator = await axisBottom({
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                domain: {
+                    size: width,
+                    color: axis.lineColor,
+                },
+                htmlLayout,
                 leftmostLimit,
                 scale: axisScale,
                 ticks: {
+                    count: getTicksCount({ axis, range: width }),
+                    labelsHtml: axis.labels.html,
                     items: tickItems,
                     labelFormat: getLabelFormatter({ axis, scale }),
-                    labelsPaddings: axis.labels.padding,
+                    labelsHeight: axis.labels.height,
+                    labelsLineHeight: axis.labels.lineHeight,
                     labelsMargin: axis.labels.margin,
-                    labelsStyle: axis.labels.style,
                     labelsMaxWidth: axis.labels.maxWidth,
-                    labelsLineHeight: axis.labels.lineHeight,
-                    count: getTicksCount({ axis, range: width }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsStyle: axis.labels.style,
                     maxTickCount: getMaxTickCount({ axis, width }),
                     rotation: axis.labels.rotation,
                 },
-                domain: {
-                    size: width,
-                    color: axis.lineColor,
-                },
             });
             svgElement.call(xAxisGenerator).attr('class', b());
             // add an axis header if necessary
@@ -219,6 +224,18 @@ export const AxisX = React.memo(function AxisX(props) {
                 setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
             }
         })();
-    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
+    }, [
+        axis,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        htmlLayout,
+        leftmostLimit,
+        plotAfterRef,
+        plotBeforeRef,
+        scale,
+        split,
+        totalHeight,
+        width,
+    ]);
     return React.createElement("g", { ref: ref });
 });

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -1,16 +1,19 @@
 import React from 'react';
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
-type Props = {
+interface Props {
     axes: PreparedAxis[];
+    boundsOffsetTop: number;
+    boundsOffsetLeft: number;
     scale: ChartScale[];
     width: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     split: PreparedSplit;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
     topLimit?: number;
-};
+}
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -3,6 +3,8 @@ import { axisLeft, axisRight, line, select } from 'd3';
 import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
+const AXIS_LEFT_HTML_LABELS_DATA_ATTR = 'data-axis-left-html-labels';
+const AXIS_RIGHT_HTML_LABELS_DATA_ATTR = 'data-axis-right-html-labels';
 function transformLabel(args) {
     const { node, axis, startTopOffset } = args;
     let topOffset = startTopOffset !== null && startTopOffset !== void 0 ? startTopOffset : axis.labels.lineHeight / 2;
@@ -36,7 +38,7 @@ function getAxisGenerator(args) {
         .tickSize(tickSize)
         .tickPadding(preparedAxis.labels.margin)
         .tickFormat((value) => {
-        if (!preparedAxis.labels.enabled) {
+        if (!preparedAxis.labels.enabled || preparedAxis.labels.html) {
             return '';
         }
         return formatAxisTickLabel({
@@ -82,17 +84,20 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, topLimit = 0, } = props;
+    const { axes: allAxes, bottomLimit = 0, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, plotAfterRef, plotBeforeRef, scale, split, topLimit = 0, width, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
     React.useEffect(() => {
-        if (!ref.current) {
+        if (!ref.current || !htmlLayout) {
             return;
         }
         const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const htmlSelection = select(htmlLayout);
+        htmlSelection.selectAll(`[${AXIS_LEFT_HTML_LABELS_DATA_ATTR}]`).remove();
+        htmlSelection.selectAll(`[${AXIS_RIGHT_HTML_LABELS_DATA_ATTR}]`).remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
@@ -111,6 +116,7 @@ export const AxisY = (props) => {
             .attr('class', b())
             .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
+            var _a, _b;
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
             const axisScale = seriesScale;
@@ -125,7 +131,56 @@ export const AxisY = (props) => {
             // because the standard generator interrupts the desired font
             // https://github.com/d3/d3-axis/blob/main/src/axis.js#L110
             axisItem.attr('font-family', null);
-            if (d.labels.enabled) {
+            if (d.labels.enabled && d.labels.html) {
+                const offsetTop = ((_a = svgElement.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
+                const offsetLeft = ((_b = svgElement.node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left) || 0;
+                const htmlLabelsData = [];
+                axisItem
+                    .selectAll('.tick')
+                    .data(axisScale.domain())
+                    .each(function (tickContent) {
+                    const rect = this.getBoundingClientRect();
+                    htmlLabelsData.push({
+                        content: tickContent,
+                        right: rect.right,
+                        top: rect.top,
+                    });
+                });
+                const dataAttr = d.position === 'left'
+                    ? AXIS_LEFT_HTML_LABELS_DATA_ATTR
+                    : AXIS_RIGHT_HTML_LABELS_DATA_ATTR;
+                htmlSelection.append('div').attr(dataAttr, 1).style('position', 'absolute');
+                htmlLabelsData.forEach((labelData) => {
+                    htmlSelection
+                        .selectAll(`[${dataAttr}]`)
+                        .data([labelData])
+                        .append('div')
+                        .html(function (l) {
+                        return l.content;
+                    })
+                        .style('font-size', d.labels.style.fontSize || '')
+                        .style('position', 'absolute')
+                        .style('white-space', 'nowrap')
+                        .style('color', 'var(--g-color-text-secondary)')
+                        .style('overflow', 'hidden')
+                        .style('text-overflow', 'ellipsis')
+                        .style('height', `${d.labels.height}px`)
+                        .style('display', 'inline-flex')
+                        .style('align-items', 'center')
+                        .style('left', function (l) {
+                        if (d.position === 'right') {
+                            return `${l.right - offsetLeft + d.labels.margin + boundsOffsetLeft}px`;
+                        }
+                        const rect = this.getBoundingClientRect();
+                        return `${boundsOffsetLeft - rect.width - d.labels.margin}px`;
+                    })
+                        .style('top', function (l) {
+                        const rect = this.getBoundingClientRect();
+                        return `${l.top + boundsOffsetTop - offsetTop - rect.height / 2}px`;
+                    });
+                });
+            }
+            else if (d.labels.enabled) {
                 const labels = axisItem.selectAll('.tick text');
                 const tickTexts = labels
                     // The offset must be applied before the labels are rotated.
@@ -344,15 +399,18 @@ export const AxisY = (props) => {
         });
     }, [
         allAxes,
-        width,
-        height,
-        scale,
-        split,
         bottomLimit,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        height,
+        htmlLayout,
         lineGenerator,
-        plotBeforeRef,
         plotAfterRef,
+        plotBeforeRef,
+        scale,
+        split,
         topLimit,
+        width,
     ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -94,9 +94,9 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, topLimit: svgTopPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    React.createElement(AxisY, { axes: yAxis, bottomLimit: svgBottomPos, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: yScale, split: preparedSplit, topLimit: svgTopPos, width: boundsWidth }),
                     xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
+                        React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),

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/Legend/index.js

@@ -297,6 +297,11 @@ export const Legend = (props) => {
                 // ticks
                 const scale = scaleLinear(domain, [0, legend.width]);
                 const xAxisGenerator = await axisBottom({
+                    domain: {
+                        size: legend.width,
+                        color: 'transparent',
+                    },
+                    htmlLayout,
                     scale,
                     ticks: {
                         items: [[0, -rectHeight]],
@@ -307,10 +312,6 @@ export const Legend = (props) => {
                         labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
                         labelsStyle: legend.ticks.style,
                     },
-                    domain: {
-                        size: legend.width,
-                        color: 'transparent',
-                    },
                 });
                 const tickTop = legend.title.height + legend.title.margin + rectHeight;
                 const legendAxisClassname = b('axis');

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,11 +7,27 @@ 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') }, measureValue),
+        measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
         // eslint-disable-next-line complexity
         hovered.map((seriesItem, i) => {
             var _a;
@@ -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: 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: 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/title.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { getHorisontalSvgTextHeight } from '../../utils';
+import { getHorizontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_PADDINGS = 8 * 2;
 export const getPreparedTitle = ({ title, }) => {
@@ -9,7 +9,7 @@ export const getPreparedTitle = ({ title, }) => {
         fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
-        ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
+        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
         ? { text: titleText, style: titleStyle, height: titleHeight }

package/dist/cjs/hooks/useChartOptions/types.d.ts

@@ -1,6 +1,6 @@
 import type { DashStyle } from '../../constants';
 import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, ChartZoom, DeepRequired, PlotLayerPlacement } from '../../types';
-type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
+type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
     height: number;