@gravity-ui/charts 1.51.7 → 1.52.0

package/dist/esm/core/shapes/line/prepare-data.js

@@ -1,5 +1,6 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { filterOverlappingLabels, preparePointDataLabels } from '../../utils';
+import { buildHoverMarkerGetter } from '../marker';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 export const prepareLineData = async (args) => {
     var _a, _b, _c, _d, _e, _f;
@@ -58,44 +59,53 @@ export const prepareLineData = async (args) => {
             svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
             htmlElements = filterOverlappingLabels(htmlElements, otherLayers.map((l) => l.htmlLabels).flat());
         }
-        let markers = [];
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
+        const normalState = s.marker.states.normal;
         const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
-        if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
-            markers = points.reduce((result, p) => {
-                var _a, _b, _c, _d;
-                if (p.y === null || p.x === null) {
+        const markers = s.marker.states.normal.enabled || hasPerPointNormalMarkers
+            ? points.reduce((result, p) => {
+                var _a, _b, _c, _d, _e;
+                if (p.y === null || p.x === null || p.hiddenInLine) {
                     return result;
                 }
                 const pointNormalEnabled = (_d = (_c = (_b = (_a = p.data.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : false;
                 if (s.marker.states.normal.enabled || pointNormalEnabled) {
                     result.push({
-                        point: p,
+                        cx: p.x,
+                        cy: p.y,
+                        radius: normalState.radius,
+                        symbolType: normalState.symbol,
+                        fill: (_e = p.color) !== null && _e !== void 0 ? _e : s.color,
+                        stroke: normalState.borderColor,
+                        strokeWidth: normalState.borderWidth,
+                        opacity: 1,
                         active: true,
-                        hovered: false,
                         clipped: isOutsideBounds(p.x, p.y),
+                        series: { id: s.id },
+                        data: p.data,
                     });
                 }
                 return result;
-            }, []);
-        }
+            }, [])
+            : [];
         const annotations = points.reduce((result, p) => {
             if (p.annotation && p.x !== null && p.y !== null) {
                 result.push({ annotation: p.annotation, x: p.x, y: p.y });
             }
             return result;
         }, []);
-        markHiddenPointsOutOfYRange({
-            points,
-            yScale: seriesYScale,
-            yAxisTop,
-            axisMin: seriesYAxis.min,
-            axisMax: seriesYAxis.max,
-            getDataY: (p) => p.data.y,
-        });
         const result = {
             annotations,
             points,
             markers,
+            getHoverMarkers: buildHoverMarkerGetter(points, s),
             svgLabels: svgLabels,
             series: s,
             hovered: false,

package/dist/esm/core/shapes/line/renderer.d.ts

@@ -3,9 +3,4 @@ import type { PreparedSeriesOptions } from '../../series/types';
 import type { PreparedLineData } from './types';
 export declare function renderLine(elements: {
     plot: SVGGElement;
-    markers: SVGGElement;
-    hoverMarkers: SVGGElement;
-    annotations: SVGGElement;
-    boundsWidth: number;
-    boundsHeight: number;
 }, preparedData: PreparedLineData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/line/renderer.js

@@ -4,17 +4,12 @@ import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getLineDashArray } from '../../utils';
-import { renderAnnotations } from '../annotation';
 import { renderDataLabels } from '../data-labels';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('line');
 export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
     const plotSvgElement = select(elements.plot);
-    const markersSvgElement = select(elements.markers);
-    const hoverMarkersSvgElement = select(elements.hoverMarkers);
-    const annotationsSvgElement = select(elements.annotations);
     const hoverOptions = get(seriesOptions, 'line.states.hover');
     const inactiveOptions = get(seriesOptions, 'line.states.inactive');
     const line = lineGenerator()
@@ -22,7 +17,6 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
         .x((d) => d.x)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
-    markersSvgElement.selectAll('*').remove();
     const lineSelection = plotSvgElement
         .selectAll('path')
         .data(preparedData)
@@ -44,23 +38,10 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
         data: dataLabels,
         className: b('label'),
     });
-    const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
-    const markerSelection = markersSvgElement
-        .selectAll('marker')
-        .data(markers)
-        .join('g')
-        .call(renderMarker);
-    renderAnnotations({
-        anchors: preparedData.flatMap((d) => d.annotations),
-        container: annotationsSvgElement,
-        plotHeight: elements.boundsHeight,
-        plotWidth: elements.boundsWidth,
-    });
     const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
     const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
     function handleShapeHover(data) {
         const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
-        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; });
         lineSelection.datum((d, index, list) => {
             const elementSelection = select(list[index]);
@@ -96,62 +77,6 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
                 datum: d,
             });
         });
-        markerSelection.datum((d, index, list) => {
-            const elementSelection = select(list[index]);
-            const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
-            if (d.hovered !== hovered) {
-                d.hovered = hovered;
-                elementSelection.attr('visibility', getMarkerVisibility(d));
-                selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-            }
-            if (d.point.series.marker.states.normal.enabled) {
-                const isActive = Boolean(!inactiveEnabled ||
-                    !selectedSeriesIds.length ||
-                    selectedSeriesIds.includes(d.point.series.id));
-                setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: isActive,
-                    datum: d,
-                });
-            }
-            return d;
-        });
-        hoverMarkersSvgElement.selectAll('*').remove();
-        if (hoverEnabled && selected.length > 0) {
-            const hoverOnlyMarkers = [];
-            for (const chunk of selected) {
-                const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
-                if (!seriesData) {
-                    continue;
-                }
-                const { series } = seriesData;
-                if (series.marker.states.normal.enabled || !series.marker.states.hover.enabled) {
-                    continue;
-                }
-                const point = seriesData.points.find((p) => p.data === chunk.data);
-                if (!point || point.x === null || point.y === null) {
-                    continue;
-                }
-                hoverOnlyMarkers.push({
-                    point: point,
-                    active: true,
-                    hovered: true,
-                    clipped: false,
-                });
-            }
-            if (hoverOnlyMarkers.length > 0) {
-                hoverMarkersSvgElement
-                    .selectAll('g')
-                    .data(hoverOnlyMarkers)
-                    .join('g')
-                    .call(renderMarker)
-                    .each((_d, i, nodes) => {
-                    selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
-                });
-            }
-        }
     }
     const eventName = `hover-shape.line-${(_b = (_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'unknown'}`;
     dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);

package/dist/esm/core/shapes/line/types.d.ts

@@ -1,7 +1,7 @@
 import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
-import type { SeriesShapeData } from '../types';
+import type { MarkerItem, SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -15,17 +15,11 @@ export type MarkerPointData = PointData & {
     y: number;
     x: number;
 };
-export type MarkerData = {
-    point: MarkerPointData;
-    active: boolean;
-    hovered: boolean;
-    clipped: boolean;
-};
 export type PreparedLineData = {
     annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
-    markers: MarkerData[];
+    markers: MarkerItem[];
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;

package/dist/esm/core/shapes/marker.d.ts

@@ -1,5 +1,6 @@
 import type { BaseType, Selection } from 'd3-selection';
 import { SymbolType } from '../constants';
+import type { MarkerItem } from './types';
 export interface BaseMarkerData {
     point: {
         x: number;
@@ -43,3 +44,32 @@ export declare function setMarker<T extends BaseType, D extends BaseMarkerData>(
 export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, radius: number): string | null;
 export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
 export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export declare function renderMarkers(container: Selection<SVGGElement, unknown, null, undefined>, markers: MarkerItem[]): void;
+export declare function renderHoverMarkers(container: Selection<SVGGElement, unknown, null, undefined>, hoverMarkers: MarkerItem[]): void;
+interface HoverMarkerPoint {
+    data: unknown;
+    x: number | null;
+    y: number | null;
+    hiddenInLine?: boolean;
+    color?: string;
+}
+interface HoverMarkerSeries {
+    id: string;
+    color: string;
+    marker: {
+        states: {
+            normal: {
+                enabled: boolean;
+                symbol: `${SymbolType}`;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderColor: string;
+                borderWidth: number;
+            };
+        };
+    };
+}
+export declare function buildHoverMarkerGetter(points: HoverMarkerPoint[], series: HoverMarkerSeries): (hoveredData: unknown[]) => MarkerItem[];
+export {};

package/dist/esm/core/shapes/marker.js

@@ -80,3 +80,71 @@ export function selectMarkerHalo(parentSelection) {
 export function selectMarkerSymbol(parentSelection) {
     return parentSelection.select(`.${symbolClassName}`);
 }
+export function renderMarkers(container, markers) {
+    container.selectAll('*').remove();
+    const selection = container
+        .selectAll('g')
+        .data(markers)
+        .join('g')
+        .attr('class', b('wrapper'))
+        .attr('transform', (d) => `translate(${d.cx},${d.cy})`);
+    selection
+        .append('path')
+        .attr('class', b('symbol'))
+        .attr('d', (d) => d.clipped ? null : getMarkerSymbol(d.symbolType, d.radius + d.strokeWidth))
+        .attr('fill', (d) => d.fill)
+        .attr('stroke', (d) => d.stroke)
+        .attr('stroke-width', (d) => d.strokeWidth);
+}
+export function renderHoverMarkers(container, hoverMarkers) {
+    container.selectAll('*').remove();
+    if (hoverMarkers.length === 0)
+        return;
+    container
+        .selectAll('g')
+        .data(hoverMarkers)
+        .join('g')
+        .attr('class', b('wrapper'))
+        .attr('transform', (d) => `translate(${d.cx},${d.cy})`)
+        .append('path')
+        .attr('class', b('symbol'))
+        .attr('d', (d) => getMarkerSymbol(d.symbolType, d.radius + d.strokeWidth))
+        .attr('fill', (d) => d.fill)
+        .attr('stroke', (d) => d.stroke)
+        .attr('stroke-width', (d) => d.strokeWidth);
+}
+export function buildHoverMarkerGetter(points, series) {
+    const { normal: normalState, hover: hoverState } = series.marker.states;
+    if (normalState.enabled || !hoverState.enabled)
+        return () => [];
+    const pointByData = new Map();
+    for (const p of points) {
+        if (p.x !== null && p.y !== null && !p.hiddenInLine) {
+            pointByData.set(p.data, p);
+        }
+    }
+    return (hoveredData) => {
+        var _a;
+        const items = [];
+        for (const rawData of hoveredData) {
+            const point = pointByData.get(rawData);
+            if (!point || point.x === null || point.y === null)
+                continue;
+            items.push({
+                cx: point.x,
+                cy: point.y,
+                radius: hoverState.radius,
+                symbolType: normalState.symbol,
+                fill: (_a = point.color) !== null && _a !== void 0 ? _a : series.color,
+                stroke: hoverState.borderColor,
+                strokeWidth: hoverState.borderWidth,
+                opacity: 1,
+                active: true,
+                clipped: false,
+                series: { id: series.id },
+                data: rawData,
+            });
+        }
+        return items;
+    };
+}

package/dist/esm/core/shapes/pie/prepare-data.js

@@ -2,7 +2,7 @@ import { group, max } from 'd3-array';
 import { arc, line as lineGenerator } from 'd3-shape';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';
-import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../utils';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, isPointDataLabelEnabled, shouldPrepareSeriesDataLabels, } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
 import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
@@ -32,7 +32,7 @@ export function preparePieData(args) {
     const minRadius = typeof propsMinRadius === 'number' ? propsMinRadius : maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     const dataLabelsStyle = merge({}, DEFAULT_DATALABELS_STYLE, (_b = (_a = preparedSeries[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.style);
-    const prepareItem = ({ stackId, items, labels, }) => {
+    const prepareItem = ({ stackId, items, labels, hasDataLabels, }) => {
         var _a;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, dataLabels } = series;
@@ -54,6 +54,9 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
+            markers: [],
+            getHoverMarkers: () => [],
+            annotations: [],
         };
         const labelMaxHeight = (_a = max(Object.values(labels).map((l) => { var _a, _b; return (_b = (_a = l.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; }))) !== null && _a !== void 0 ? _a : 0;
         const segments = items.reduce((acc, item) => {
@@ -62,7 +65,7 @@ export function preparePieData(args) {
                 return acc;
             }
             let maxSegmentRadius = maxRadius;
-            if (dataLabels.enabled) {
+            if (hasDataLabels) {
                 maxSegmentRadius -=
                     dataLabels.distance + dataLabels.connectorPadding + labelMaxHeight;
             }
@@ -82,16 +85,19 @@ export function preparePieData(args) {
         data.segments = pieGenerator(segments);
         return data;
     };
-    const getLabels = async ({ series }) => {
+    const getLabels = async ({ series, hasDataLabels, }) => {
         var _a;
         const { dataLabels } = series[0];
-        if (!dataLabels.enabled) {
+        if (!hasDataLabels) {
             return {};
         }
         const getTextSize = getTextSizeFn({ style: dataLabelsStyle });
         const acc = {};
         for (let i = 0; i < series.length; i++) {
             const d = series[i];
+            if (!isPointDataLabelEnabled({ data: d.data, series: d })) {
+                continue;
+            }
             const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
@@ -120,12 +126,12 @@ export function preparePieData(args) {
         return acc;
     };
     const prepareLabels = (prepareLabelsArgs) => {
-        const { data, series, labels: labelsData, allowOverlow = true } = prepareLabelsArgs;
+        const { data, series, labels: labelsData, hasDataLabels, allowOverlow = true, } = prepareLabelsArgs;
         const { dataLabels } = series[0];
         const labels = [];
         const htmlLabels = [];
         const connectors = [];
-        if (!dataLabels.enabled) {
+        if (!hasDataLabels) {
             return { labels, htmlLabels, connectors };
         }
         const shouldUseHtml = dataLabels.html;
@@ -150,6 +156,9 @@ export function preparePieData(args) {
         let shouldStopLabelPlacement = false;
         series.forEach((d, index) => {
             var _a, _b;
+            if (!isPointDataLabelEnabled({ data: d.data, series: d })) {
+                return;
+            }
             const prevLabel = labels[labels.length - 1];
             const { text = '', size: labelSize } = labelsData[d.id];
             const labelWidth = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _a !== void 0 ? _a : 0;
@@ -287,12 +296,17 @@ export function preparePieData(args) {
     };
     return Promise.all(Array.from(groupedPieSeries).map(async ([stackId, items]) => {
         var _a;
-        const seriesLabels = await getLabels({ series: items });
-        const data = prepareItem({ stackId, items, labels: seriesLabels });
+        const hasDataLabels = shouldPrepareSeriesDataLabels({
+            dataLabels: items[0].dataLabels,
+            data: items.map((it) => it.data),
+        });
+        const seriesLabels = await getLabels({ series: items, hasDataLabels });
+        const data = prepareItem({ stackId, items, labels: seriesLabels, hasDataLabels });
         const preparedLabels = prepareLabels({
             data,
             labels: seriesLabels,
             series: items,
+            hasDataLabels,
         });
         let maxLeftRightFreeSpace = Infinity;
         let labelsOverflow = 0;
@@ -370,6 +384,7 @@ export function preparePieData(args) {
             data,
             series: items,
             labels: seriesLabels,
+            hasDataLabels,
             allowOverlow: false,
         });
         if (typeof ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.innerRadius) !== 'undefined') {

package/dist/esm/core/shapes/radar/prepare-data.js

@@ -26,6 +26,9 @@ export async function prepareRadarData(args) {
         htmlLabels: [],
         grid: [],
         cursor: preparedSeries[0].cursor,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
     };
     const categories = preparedSeries[0].categories;
     const axisStrokeColor = 'var(--g-color-line-generic)';

package/dist/esm/core/shapes/sankey/prepare-data.js

@@ -70,5 +70,14 @@ export function prepareSankeyData(args) {
         });
         dataLabels.push(...labels);
     }
-    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlLabels, labels: dataLabels };
+    return {
+        series,
+        nodes: sankeyNodes,
+        links: sankeyLinks,
+        htmlLabels,
+        labels: dataLabels,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
+    };
 }

package/dist/esm/core/shapes/scatter/prepare-data.js

@@ -112,5 +112,12 @@ export async function prepareScatterData(args) {
             }
         }
     }
-    return { markers, svgLabels: allSvgLabels, htmlLabels: allHtmlLabels };
+    return {
+        scatterData: markers,
+        svgLabels: allSvgLabels,
+        htmlLabels: allHtmlLabels,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
+    };
 }

package/dist/esm/core/shapes/scatter/renderer.js

@@ -6,20 +6,21 @@ import { setActiveState, shapeKey } from '../../shapes/utils';
 import { renderDataLabels } from '../data-labels';
 const b = block('scatter');
 export function renderScatter(elements, preparedData, seriesOptions, dispatcher) {
+    var _a;
     const svgElement = select(elements.plot);
     const hoverOptions = get(seriesOptions, 'scatter.states.hover');
     const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
     svgElement.selectAll('*').remove();
     const selection = svgElement
         .selectAll('path')
-        .data(preparedData.markers, shapeKey)
+        .data(preparedData.scatterData, shapeKey)
         .join('g')
         .call(renderMarker)
         .attr('opacity', (d) => d.point.opacity)
         .attr('cursor', (d) => d.point.series.cursor);
     renderDataLabels({
         container: svgElement,
-        data: preparedData.svgLabels,
+        data: (_a = preparedData.svgLabels) !== null && _a !== void 0 ? _a : [],
         className: b('label'),
     });
     const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;

package/dist/esm/core/shapes/scatter/types.d.ts

@@ -18,7 +18,7 @@ export type MarkerData = {
 };
 export type PreparedScatterData = MarkerData;
 export type PreparedScatterShapeData = {
-    markers: PreparedScatterData[];
+    scatterData: PreparedScatterData[];
     svgLabels: LabelData[];
 } & SeriesShapeData;
 export {};

package/dist/esm/core/shapes/treemap/prepare-data.js

@@ -160,5 +160,13 @@ export async function prepareTreemapData(args) {
             labelData = labels;
         }
     }
-    return { labelData, leaves, series, htmlLabels };
+    return {
+        labelData,
+        leaves,
+        series,
+        htmlLabels,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
+    };
 }

package/dist/esm/core/shapes/types.d.ts

@@ -1,4 +1,39 @@
 import type { HtmlItem } from '../../types';
+import type { SymbolType } from '../constants';
+import type { AnnotationAnchor } from '../series/types';
+export interface MarkerItem {
+    cx: number;
+    cy: number;
+    radius: number;
+    symbolType: `${SymbolType}`;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+    active: boolean;
+    clipped: boolean;
+    series: {
+        id: string;
+    };
+    data: unknown;
+}
 export interface SeriesShapeData {
     htmlLabels: HtmlItem[];
+    markers: MarkerItem[];
+    annotations: AnnotationAnchor[];
+    getHoverMarkers(hoveredData: unknown[]): MarkerItem[];
+}
+export interface TooltipItemData {
+    type?: string;
+    series?: {
+        type?: string;
+        tooltip?: {
+            enabled?: boolean;
+        };
+    };
+    point?: {
+        series?: {
+            type?: string;
+        };
+    };
 }

package/dist/esm/core/shapes/waterfall/prepare-data.js

@@ -2,11 +2,11 @@ import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
 import { getXValue, getYValue } from '../../shapes/utils';
-import { getLabelsSize } from '../../utils';
+import { getLabelsSize, isPointDataLabelEnabled } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
 async function getLabelData(d, plotHeight) {
     var _a, _b;
-    if (!d.series.dataLabels.enabled) {
+    if (!isPointDataLabelEnabled({ data: d.data, series: d.series })) {
         return undefined;
     }
     const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
@@ -145,6 +145,9 @@ export const prepareWaterfallData = async (args) => {
             series: item.series,
             subTotal: totalValue,
             htmlLabels: [],
+            markers: [],
+            getHoverMarkers: () => [],
+            annotations: [],
         };
         preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/dist/esm/core/shapes/x-range/prepare-data.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { MIN_BAR_WIDTH } from '../../shapes/bar-constants';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../utils';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isPointDataLabelEnabled, } from '../../utils';
 import { getBandSize } from '../../utils/band-size';
 import { getFormattedValue } from '../../utils/format';
 const DEFAULT_BAR_PADDING = 0.2;
@@ -84,6 +84,9 @@ export async function prepareXRangeData(args) {
                 series: s,
                 htmlLabels: [],
                 svgLabels: [],
+                markers: [],
+                getHoverMarkers: () => [],
+                annotations: [],
             });
         });
     });
@@ -91,7 +94,9 @@ export async function prepareXRangeData(args) {
     for (let i = 0; i < result.length; i++) {
         const item = result[i];
         const { dataLabels } = item.series;
-        if (!dataLabels.enabled || item.data.label === null || isRangeSlider) {
+        if (isRangeSlider ||
+            item.data.label === null ||
+            !isPointDataLabelEnabled({ data: item.data, series: item.series })) {
             continue;
         }
         const content = getFormattedValue(Object.assign({ value: item.data.label }, dataLabels));