@gravity-ui/charts 0.5.0 → 0.6.1-beta.1

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

@@ -4,18 +4,24 @@ import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
 import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = props;
+    const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
-    const anchorRef = useVirtualElementRef({ rect: { top, left } });
+    const anchorRef = useVirtualElementRef({ rect: { left, top } });
+    const handleOutsideClick = (e) => {
+        if (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.contains(e.target)) {
+            return;
+        }
+        onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
+    };
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), contentClassName: b('popup-content'), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

package/dist/esm/components/Tooltip/styles.css

@@ -1,25 +1,30 @@
-.gcharts-d3-tooltip[class] {
+.gcharts-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;
 }
-.gcharts-d3-tooltip[class] > div {
+.gcharts-tooltip[class] > div {
   animation-duration: unset;
   animation-timing-function: unset;
   animation-fill-mode: unset;
 }
-.gcharts-d3-tooltip__content {
-  padding: 10px 14px;
+.gcharts-tooltip[class].gcharts-tooltip_pinned {
+  pointer-events: inherit;
+}
+.gcharts-tooltip__popup-content {
+  box-shadow: none;
+}
+.gcharts-tooltip__content {
+  padding: 8px 14px;
   text-wrap: nowrap;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content-row {
+.gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
 }
-.gcharts-d3-tooltip__color {
+.gcharts-tooltip__color {
   display: inline-block;
   width: 16px;
   height: 8px;

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
-export type ChartRef = {
+export interface ChartRef {
     reflow: () => void;
-};
-type ChartDimentions = {
+}
+export interface ChartDimentions {
     height: number;
     width: number;
-};
-export type ChartProps = {
+}
+export type ChartOnResize = (args: {
+    dimensions?: ChartDimentions;
+}) => void;
+export interface ChartProps {
     data: ChartData;
     lang?: string;
-    onResize?: (args: {
-        dimensions?: ChartDimentions;
-    }) => void;
-};
+    onResize?: ChartOnResize;
+}
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

package/dist/esm/constants/index.d.ts

@@ -9,6 +9,7 @@ export declare const SeriesType: {
     readonly Scatter: "scatter";
     readonly Treemap: "treemap";
     readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/dist/esm/constants/index.js

@@ -9,6 +9,7 @@ export const SeriesType = {
     Scatter: 'scatter',
     Treemap: 'treemap',
     Waterfall: 'waterfall',
+    Sankey: 'sankey',
 };
 export var DashStyle;
 (function (DashStyle) {

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

@@ -2,9 +2,10 @@ export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';
+export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
-export * from './useTooltip/types';
+export * from './useSplit';
 export * from './useSplit/types';

package/dist/esm/hooks/index.js

@@ -2,9 +2,10 @@ export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';
+export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
-export * from './useTooltip/types';
+export * from './useSplit';
 export * from './useSplit/types';

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

@@ -1,4 +1,5 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+import type { DashStyle } from 'src/constants';
+import type { AxisPlotLine, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -10,6 +11,14 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
 export type PreparedChart = {
     margin: ChartMargin;
 };
+export type PreparedAxisPlotLine = {
+    value: number;
+    color: string;
+    width: number;
+    dashStyle: DashStyle;
+    opacity: number;
+    layerPlacement: AxisPlotLine['layerPlacement'];
+};
 export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
@@ -32,6 +41,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
     };
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
+    plotLines: PreparedAxisPlotLine[];
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

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

@@ -102,6 +102,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         position: 'bottom',
         plotIndex: 0,
+        plotLines: [],
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

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

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
@@ -108,6 +108,14 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
             },
             position: get(axisItem, 'position', defaultAxisPosition),
             plotIndex: get(axisItem, 'plotIndex', 0),
+            plotLines: get(axisItem, 'plotLines', []).map((d) => ({
+                value: get(d, 'value', 0),
+                color: get(d, 'color', 'var(--g-color-base-brand)'),
+                width: get(d, 'width', 1),
+                dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+                opacity: get(d, 'opacity', 1),
+                layerPlacement: get(d, 'layerPlacement', 'before'),
+            })),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });

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

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/esm/hooks/useSeries/prepare-area.d.ts

@@ -5,9 +5,9 @@ export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/esm/hooks/useSeries/prepare-bar-x.d.ts

@@ -1,10 +1,11 @@
 import type { ScaleOrdinal } from 'd3';
-import type { BarXSeries } from '../../types';
+import type { BarXSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarXSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarXSeries[];
     legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
 };
 export declare function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[];
 export {};

package/dist/esm/hooks/useSeries/prepare-bar-x.js

@@ -3,7 +3,7 @@ import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export function prepareBarXSeries(args) {
-    const { colorScale, series: seriesList, legend } = args;
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
         var _a, _b, _c, _d, _e;
         const name = series.name || '';
@@ -33,6 +33,7 @@ export function prepareBarXSeries(args) {
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
+            borderRadius: get(series, 'borderRadius', get(seriesOptions, 'bar-x.borderRadius', 0)),
         };
     }, []);
 }

package/dist/esm/hooks/useSeries/prepare-bar-y.d.ts

@@ -1,10 +1,11 @@
 import type { ScaleOrdinal } from 'd3';
-import type { BarYSeries } from '../../types';
+import type { BarYSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarYSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarYSeries[];
     legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
 };
 export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[];
 export {};

package/dist/esm/hooks/useSeries/prepare-bar-y.js

@@ -24,8 +24,9 @@ function prepareDataLabels(series) {
     };
 }
 export function prepareBarYSeries(args) {
-    const { colorScale, series: seriesList, legend } = args;
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
+        var _a, _b, _c;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -43,6 +44,7 @@ export function prepareBarYSeries(args) {
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
+            borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
         };
     }, []);
 }

package/dist/esm/hooks/useSeries/prepare-line.d.ts

@@ -8,9 +8,9 @@ export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/esm/hooks/useSeries/prepare-pie.js

@@ -11,7 +11,7 @@ export function preparePieSeries(args) {
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem, i) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const result = {
             type: 'pie',
             data: dataItem,
@@ -40,7 +40,7 @@ export function preparePieSeries(args) {
             borderColor: series.borderColor || '',
             borderRadius: (_b = series.borderRadius) !== null && _b !== void 0 ? _b : 0,
             borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
-            radius: series.radius || '100%',
+            radius: (_e = (_d = dataItem.radius) !== null && _d !== void 0 ? _d : series.radius) !== null && _e !== void 0 ? _e : '100%',
             innerRadius: series.innerRadius || 0,
             stackId,
             states: {

package/dist/esm/hooks/useSeries/prepare-sankey.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleOrdinal } from 'd3';
+import type { ChartSeriesOptions, SankeySeries } from '../../types';
+import type { PreparedLegend, PreparedSankeySeries } from './types';
+type PrepareSankeySeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    legend: PreparedLegend;
+    series: SankeySeries[];
+    seriesOptions?: ChartSeriesOptions;
+};
+export declare function prepareSankeySeries(args: PrepareSankeySeriesArgs): PreparedSankeySeries[];
+export {};

package/dist/esm/hooks/useSeries/prepare-sankey.js

@@ -0,0 +1,38 @@
+import get from 'lodash/get';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareSankeySeries(args) {
+    const { colorScale, legend, series } = args;
+    return series.map((s) => {
+        var _a;
+        const id = getUniqId();
+        const name = s.name || '';
+        const color = colorScale(name);
+        const preparedSeries = {
+            color,
+            data: s.data.map((d) => {
+                var _a;
+                return ({
+                    name: d.name,
+                    color: (_a = d.color) !== null && _a !== void 0 ? _a : colorScale(d.name),
+                    links: d.links,
+                });
+            }),
+            dataLabels: {
+                enabled: get(s, 'dataLabels.enabled', true),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = s.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
+            },
+            id,
+            type: s.type,
+            name,
+            visible: get(s, 'visible', true),
+            legend: {
+                enabled: get(s, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(s),
+            },
+            cursor: get(s, 'cursor', null),
+        };
+        return preparedSeries;
+    });
+}

package/dist/esm/hooks/useSeries/prepareSeries.js

@@ -4,6 +4,7 @@ import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
+import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
@@ -17,10 +18,20 @@ export function prepareSeries(args) {
             }, []);
         }
         case 'bar-x': {
-            return prepareBarXSeries({ series: series, legend, colorScale });
+            return prepareBarXSeries({
+                series: series,
+                legend,
+                colorScale,
+                seriesOptions,
+            });
         }
         case 'bar-y': {
-            return prepareBarYSeries({ series: series, legend, colorScale });
+            return prepareBarYSeries({
+                series: series,
+                legend,
+                colorScale,
+                seriesOptions,
+            });
         }
         case 'scatter': {
             return prepareScatterSeries({ series: series, legend, colorScale });
@@ -56,6 +67,14 @@ export function prepareSeries(args) {
                 colorScale,
             });
         }
+        case 'sankey': {
+            return prepareSankeySeries({
+                series: series,
+                seriesOptions,
+                colorScale,
+                legend,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

package/dist/esm/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -107,6 +107,7 @@ export type PreparedBarXSeries = {
         padding: number;
         html: boolean;
     };
+    borderRadius: number;
     yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarYSeries = {
@@ -122,6 +123,7 @@ export type PreparedBarYSeries = {
         maxWidth: number;
         html: boolean;
     };
+    borderRadius: number;
 } & BasePreparedSeries;
 export type PreparedPieSeries = {
     type: PieSeries['type'];
@@ -248,7 +250,15 @@ export type PreparedWaterfallSeries = {
     positiveColor: string;
     negativeColor: string;
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries;
+export type PreparedSankeySeries = {
+    type: SankeySeries['type'];
+    data: SankeySeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+    };
+} & BasePreparedSeries & Omit<SankeySeries, keyof BasePreparedSeries>;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/dist/esm/hooks/useSeries/utils.js

@@ -1,6 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
-import { getUniqId } from '../../utils';
+import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {

package/dist/esm/hooks/useShapes/area/index.js

@@ -8,6 +8,7 @@ import { setActiveState } from '../utils';
 const b = block('d3-area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -72,7 +73,8 @@ export const AreaSeriesShapes = (args) => {
             .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.area', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
             const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
@@ -132,7 +134,11 @@ export const AreaSeriesShapes = (args) => {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.area', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.area', null);
         };

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -102,10 +102,14 @@ export const prepareAreaData = (args) => {
                 const labelItems = points.map((p) => getLabelData(p, s, xMax));
                 if (s.dataLabels.html) {
                     const htmlLabels = labelItems.map((l) => {
+                        var _a;
+                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
+                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
+                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
                         };
                     });
                     htmlElements.push(...htmlLabels);

package/dist/esm/hooks/useShapes/bar-x/index.js

@@ -3,11 +3,13 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block, filterOverlappingLabels } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
-const b = block('d3-bar-x');
+const b = block('bar-x');
 export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -21,7 +23,20 @@ export const BarXSeriesShapes = (args) => {
         const rectSelection = svgElement
             .selectAll('allRects')
             .data(preparedData)
-            .join('rect')
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = d.isLastStackItem
+                ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+                : 0;
+            const p = getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius: [borderRadius, borderRadius, 0, 0],
+            });
+            return p.toString();
+        })
             .attr('class', b('segment'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)
@@ -46,7 +61,8 @@ export const BarXSeriesShapes = (args) => {
             .style('font-size', (d) => d.style.fontSize)
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
-        dispatcher.on('hover-shape.bar-x', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -84,7 +100,11 @@ export const BarXSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.bar-x', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.bar-x', null);
         };

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -103,7 +103,7 @@ export const prepareBarXData = (args) => {
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
-            sortedData.forEach((yValue) => {
+            sortedData.forEach((yValue, yValueIndex) => {
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
@@ -129,6 +129,7 @@ export const prepareBarXData = (args) => {
                     data: yValue.data,
                     series: yValue.series,
                     htmlElements: [],
+                    isLastStackItem: yValueIndex === sortedData.length - 1,
                 };
                 const label = getLabelData(barData);
                 if (yValue.series.dataLabels.html && label) {
@@ -136,6 +137,7 @@ export const prepareBarXData = (args) => {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 }
                 else {

package/dist/esm/hooks/useShapes/bar-x/types.d.ts

@@ -9,4 +9,5 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     series: PreparedBarXSeries;
     label?: LabelData;
     htmlElements: HtmlItem[];
+    isLastStackItem: boolean;
 };