@gravity-ui/charts 1.51.7 → 1.52.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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));

package/dist/cjs/core/types/chart/base.d.ts

@@ -93,14 +93,34 @@ export interface BaseSeries {
     };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
     /**
      * A reserved subspace to store options and values for customized functionality
      *
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
-    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
-    color?: string;
+    /** Per-point overrides for the series data label. */
+    dataLabels?: {
+        /**
+         * Per-point override of `series.dataLabels.enabled`. The point-level value takes precedence:
+         * `true` shows the label even when series-level labels are disabled,
+         * `false` hides the label even when series-level labels are enabled.
+         * @default series.dataLabels.enabled
+         */
+        enabled?: boolean;
+    };
+    /** Per-point overrides for the tooltip behavior. */
+    tooltip?: {
+        /**
+         * Per-point override of `series.tooltip.enabled`. The point-level value takes precedence:
+         * `true` shows the point in the tooltip even when the series is hidden from the tooltip,
+         * `false` hides the point even when the series is shown.
+         * @default series.tooltip.enabled
+         */
+        enabled?: boolean;
+    };
 }
 export interface BaseSeriesLegend extends ChartLegendItem {
     /**

package/dist/cjs/core/types/chart/funnel.d.ts

@@ -62,8 +62,32 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
         areaOpacity?: number;
     };
     dataLabels?: Omit<BaseDataLabels, 'allowOverlap'> & {
-        /** Horizontal alignment of the data labels. */
+        /**
+         * Horizontal alignment of the data labels.
+         * @default 'center'
+         */
         align?: 'left' | 'center' | 'right';
+        /**
+         * Whether to align the data label inside or outside the shape.
+         * @default false
+         */
+        inside?: boolean;
+        /**
+         * Whether to shrink the funnel shapes to reserve space for outside labels.
+         * When true, the plot area is inset on the labelled side so labels do not overlap segments.
+         * When false, no space is reserved and labels are clamped to the plot area boundary if they overflow.
+         * Only relevant when `inside` is false.
+         * @default true
+         */
+        reserveSpace?: boolean;
+        /**
+         * The reference area for label alignment. Only relevant when `inside` is false.
+         *
+         * - `'shape'` - aligns relative to the data shape (e.g., funnel section).
+         * - `'plot'` - aligns relative to the chart plot area boundaries.
+         * @default 'plot'
+         */
+        anchor?: 'plot' | 'shape';
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: ChartLegendItem & {

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

@@ -6,7 +6,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { ValueFormat } from './base';
+import type { BaseSeries, ValueFormat } from './base';
 import type { FunnelSeries, FunnelSeriesData } from './funnel';
 import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
@@ -31,6 +31,7 @@ export interface TooltipDataChunkPie<T = MeaningfulAny> {
         type: PieSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkScatter<T = MeaningfulAny> {
@@ -39,6 +40,7 @@ export interface TooltipDataChunkScatter<T = MeaningfulAny> {
         type: ScatterSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkLine<T = MeaningfulAny> {
@@ -47,6 +49,7 @@ export interface TooltipDataChunkLine<T = MeaningfulAny> {
         type: LineSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
     closest?: boolean;
 }
@@ -56,6 +59,7 @@ export interface TooltipDataChunkArea<T = MeaningfulAny> {
         type: AreaSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkTreemap<T = MeaningfulAny> {
@@ -88,6 +92,7 @@ export interface TooltipDataChunkFunnel<T = MeaningfulAny> {
         type: FunnelSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkXRange<T = MeaningfulAny> {

package/dist/cjs/core/utils/data-labels.d.ts

@@ -7,12 +7,46 @@ type PointLabelSeries = {
         html: boolean;
         padding: number;
         format?: ValueFormat;
+        enabled?: boolean;
     };
 };
+/**
+ * Resolves the effective dataLabels visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export declare function isPointDataLabelEnabled(args: {
+    data?: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    } | null;
+    series?: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    } | null;
+}): boolean;
+/**
+ * Returns `true` if the series should run its dataLabels prep pipeline:
+ * either series-level is enabled, or at least one point opts in via override.
+ */
+export declare function shouldPrepareSeriesDataLabels(series: {
+    dataLabels?: {
+        enabled?: boolean;
+    };
+    data?: ReadonlyArray<{
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    }>;
+}): boolean;
 type LabelPoint = {
     x: number | null;
     y: number | null;
     data: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
         label?: string | number | null;
         y?: string | number | null;
     };

package/dist/cjs/core/utils/data-labels.js

@@ -1,5 +1,28 @@
 import { getFormattedValue } from './format';
 import { getLabelsSize, getTextSizeFn } from './text';
+/**
+ * Resolves the effective dataLabels visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export function isPointDataLabelEnabled(args) {
+    var _a, _b, _c, _d, _e;
+    const pointEnabled = (_b = (_a = args.data) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.enabled;
+    if (pointEnabled !== undefined) {
+        return pointEnabled;
+    }
+    return (_e = (_d = (_c = args.series) === null || _c === void 0 ? void 0 : _c.dataLabels) === null || _d === void 0 ? void 0 : _d.enabled) !== null && _e !== void 0 ? _e : true;
+}
+/**
+ * Returns `true` if the series should run its dataLabels prep pipeline:
+ * either series-level is enabled, or at least one point opts in via override.
+ */
+export function shouldPrepareSeriesDataLabels(series) {
+    var _a, _b;
+    if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
+        return true;
+    }
+    return Boolean((_b = series.data) === null || _b === void 0 ? void 0 : _b.some((d) => { var _a; return ((_a = d.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) === true; }));
+}
 /**
  * Shared "above-point" dataLabels algorithm used by line, area, and scatter series.
  *
@@ -25,6 +48,9 @@ export async function preparePointDataLabels({ series, points, xMax, yAxisTop, i
         if (point.y === null || point.x === null || isOutsideBounds(point.x, point.y)) {
             continue;
         }
+        if (!isPointDataLabelEnabled({ data: point.data, series })) {
+            continue;
+        }
         const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
         const anchorY = point.y - anchorYOffset;
         if (series.dataLabels.html) {

package/dist/cjs/core/utils/get-closest-data.d.ts

@@ -1,8 +1,8 @@
-import type { ShapeData } from '../../hooks/useShapes';
 import type { TooltipDataChunk } from '../../types';
+import type { TooltipItemData } from '../shapes/types';
 type GetClosestPointsArgs = {
     position: [number, number];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     boundsHeight: number;
     boundsWidth: number;
 };

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

@@ -1,34 +1,7 @@
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
-import { getTooltipData as areaGetTooltipData } from '../shapes/area/get-tooltip-data';
-import { getTooltipData as barXGetTooltipData } from '../shapes/bar-x/get-tooltip-data';
-import { getTooltipData as barYGetTooltipData } from '../shapes/bar-y/get-tooltip-data';
-import { getTooltipData as funnelGetTooltipData } from '../shapes/funnel/get-tooltip-data';
-import { getTooltipData as heatmapGetTooltipData } from '../shapes/heatmap/get-tooltip-data';
-import { getTooltipData as lineGetTooltipData } from '../shapes/line/get-tooltip-data';
-import { getTooltipData as pieGetTooltipData } from '../shapes/pie/get-tooltip-data';
-import { getTooltipData as radarGetTooltipData } from '../shapes/radar/get-tooltip-data';
-import { getTooltipData as sankeyGetTooltipData } from '../shapes/sankey/get-tooltip-data';
-import { getTooltipData as scatterGetTooltipData } from '../shapes/scatter/get-tooltip-data';
-import { getTooltipData as treemapGetTooltipData } from '../shapes/treemap/get-tooltip-data';
-import { getTooltipData as waterfallGetTooltipData } from '../shapes/waterfall/get-tooltip-data';
-import { getTooltipData as xRangeGetTooltipData } from '../shapes/x-range/get-tooltip-data';
-import { getClosestPointsByXValue } from './tooltip-helpers';
-const tooltipFnByType = {
-    line: lineGetTooltipData,
-    area: areaGetTooltipData,
-    'bar-x': barXGetTooltipData,
-    'bar-y': barYGetTooltipData,
-    waterfall: waterfallGetTooltipData,
-    scatter: scatterGetTooltipData,
-    pie: pieGetTooltipData,
-    treemap: treemapGetTooltipData,
-    heatmap: heatmapGetTooltipData,
-    sankey: sankeyGetTooltipData,
-    radar: radarGetTooltipData,
-    funnel: funnelGetTooltipData,
-    'x-range': xRangeGetTooltipData,
-};
+import { getSeriesPlugin } from '../series/seriesRegistry';
+import { getClosestPointsByXValue, isPointTooltipEnabled } from './tooltip-helpers';
 function getSeriesType(shapeData) {
     return (get(shapeData, 'series.type') ||
         get(shapeData, 'point.series.type') ||
@@ -41,19 +14,26 @@ export function getClosestPoints(args) {
     const xLookupPoints = [];
     const groups = groupBy(shapesData, getSeriesType);
     for (const [seriesType, list] of Object.entries(groups)) {
-        const fn = tooltipFnByType[seriesType];
-        if (!fn) {
+        let plugin;
+        try {
+            plugin = getSeriesPlugin(seriesType);
+        }
+        catch (_a) {
             continue;
         }
-        const { chunks, xLookupPoints: seriesXLookupPoints } = fn({
+        const { chunks, xLookupPoints: seriesXLookupPoints } = plugin.getTooltipData({
             data: list,
             position,
             boundsWidth,
             boundsHeight,
         });
-        result.push(...chunks);
+        result.push(...chunks.filter((c) => isPointTooltipEnabled(c)));
         if (seriesXLookupPoints) {
-            xLookupPoints.push(...seriesXLookupPoints);
+            for (const p of seriesXLookupPoints) {
+                if (isPointTooltipEnabled(p)) {
+                    xLookupPoints.push(p);
+                }
+            }
         }
     }
     if (xLookupPoints.length) {

package/dist/cjs/core/utils/tooltip-helpers.d.ts

@@ -30,6 +30,22 @@ export declare function getClosestPointsByXValue(x: number, y: number, points: S
     subTotal?: number;
     sourceX?: number;
 }[];
+/**
+ * Resolves the effective tooltip visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export declare function isPointTooltipEnabled(args: {
+    data?: {
+        tooltip?: {
+            enabled?: boolean;
+        };
+    } | null;
+    series?: {
+        tooltip?: {
+            enabled?: boolean;
+        };
+    } | null;
+}): boolean;
 export declare function isInsidePath(args: {
     path: string;
     point: [number, number];

package/dist/cjs/core/utils/tooltip-helpers.js

@@ -50,6 +50,18 @@ export function getClosestPointsByXValue(x, y, points) {
     const closestYIndex = getClosestYIndex(closestPoints, y);
     return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
 }
+/**
+ * Resolves the effective tooltip visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export function isPointTooltipEnabled(args) {
+    var _a, _b, _c, _d, _e;
+    const pointEnabled = (_b = (_a = args.data) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.enabled;
+    if (pointEnabled !== undefined) {
+        return pointEnabled;
+    }
+    return (_e = (_d = (_c = args.series) === null || _c === void 0 ? void 0 : _c.tooltip) === null || _d === void 0 ? void 0 : _d.enabled) !== null && _e !== void 0 ? _e : true;
+}
 export function isInsidePath(args) {
     const { path, point, width, height, strokeWidth } = args;
     const canvas = document.createElement('canvas');

package/dist/cjs/hooks/useShapes/AnnotationLayer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { AnnotationAnchor } from '../../core/series/types';
+interface Props {
+    annotations: AnnotationAnchor[];
+    boundsWidth: number;
+    boundsHeight: number;
+}
+export declare const AnnotationLayer: ({ annotations, boundsWidth, boundsHeight }: Props) => React.JSX.Element;
+export {};

package/dist/cjs/hooks/useShapes/AnnotationLayer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderAnnotations } from '../../core/shapes/annotation';
+export const AnnotationLayer = ({ annotations, boundsWidth, boundsHeight }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        renderAnnotations({
+            anchors: annotations,
+            container: select(ref.current),
+            plotWidth: boundsWidth,
+            plotHeight: boundsHeight,
+        });
+    }, [annotations, boundsWidth, boundsHeight]);
+    return React.createElement("g", { ref: ref });
+};