@gravity-ui/charts 1.46.1 → 1.47.0

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

@@ -55,6 +55,7 @@ export const ChartInner = (props) => {
     const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, preparedTitle, preparedChart, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, rangeSliderState,
+        updateRangeSliderState,
         updateZoomState,
         zoomState }));
     const prevWidth = usePrevious(width);

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -9,6 +9,7 @@ type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
+    updateRangeSliderState: (nextState?: RangeSliderState) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;

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

@@ -38,7 +38,7 @@ function getBoundsOffsetLeft(args) {
 }
 export function useChartInnerProps(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateRangeSliderState, updateZoomState, zoomState, } = props;
     const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
     const [chartState, setState] = React.useState(null);
     const prevStateValue = React.useRef(chartState);
@@ -48,20 +48,26 @@ export function useChartInnerProps(props) {
         currentRunRef.current++;
         const currentRun = currentRunRef.current;
         (async function () {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const axisTypeChanged = ((_b = (_a = previousChartData.current) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.type) !== undefined &&
+                previousChartData.current.xAxis.type !== ((_c = data.xAxis) === null || _c === void 0 ? void 0 : _c.type);
+            if (axisTypeChanged && rangeSliderState !== undefined) {
+                updateRangeSliderState(undefined);
+                return;
+            }
             const preparedTitle = await getPreparedTitle({
                 title: data.title,
                 chartWidth: width,
                 chartHeight: height,
-                chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
+                chartMargin: (_d = data.chart) === null || _d === void 0 ? void 0 : _d.margin,
             });
             const preparedChart = getPreparedChart({
                 chart: data.chart,
                 seriesData: data.series.data,
                 preparedTitle,
             });
-            const colors = (_b = data.colors) !== null && _b !== void 0 ? _b : DEFAULT_PALETTE;
+            const colors = (_e = data.colors) !== null && _e !== void 0 ? _e : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
                 xAxis: data.xAxis,
@@ -84,7 +90,7 @@ export function useChartInnerProps(props) {
                 });
             }
             else {
-                allPreparedSeries = (_d = (_c = prevStateValue.current) === null || _c === void 0 ? void 0 : _c.allPreparedSeries) !== null && _d !== void 0 ? _d : [];
+                allPreparedSeries = (_g = (_f = prevStateValue.current) === null || _f === void 0 ? void 0 : _f.allPreparedSeries) !== null && _g !== void 0 ? _g : [];
             }
             const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
             const visiblePreparedSeries = getVisibleSeries({
@@ -243,6 +249,7 @@ export function useChartInnerProps(props) {
         rangeSliderState,
         dispatcher,
         htmlLayout,
+        updateRangeSliderState,
         clipPathId,
     ]);
     // additional start

package/dist/cjs/core/brush/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/cjs/core/brush/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/cjs/{hooks/useBrush → core/brush}/types.d.ts

@@ -1,6 +1,6 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ZoomType } from '../../core/constants';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ZoomType } from '../constants';
+import type { ChartBrush, DeepRequired } from '../types';
 export type BrushSelection = [number, number] | [[number, number], [number, number]];
 export interface BrushArea {
     /**

package/dist/{esm/hooks/useBrush → cjs/core/brush}/utils.d.ts

@@ -1,5 +1,5 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ChartBrush, DeepRequired } from '../types';
 import type { BrushSelection } from './types';
 export declare function isOneDimensionalSelection(selection?: BrushSelection | null): selection is [number, number];
 export declare function setBrushBorder(this: SVGGElement, _brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null, options: {

package/dist/cjs/core/chart/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

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

@@ -0,0 +1 @@
+export * from './types';

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

@@ -0,0 +1,8 @@
+import type { ChartBrush, ChartMargin, ChartZoom, DeepRequired } from '../types';
+export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
+    brush: ChartBrush;
+}>;
+export type PreparedChart = {
+    margin: ChartMargin;
+    zoom: PreparedZoom | null;
+};

package/dist/cjs/core/index.d.ts

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/cjs/core/index.js

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/cjs/core/layout/chart-dimensions.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartMargin, LegendConfig } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
+import type { PreparedChart } from '../chart/types';
 import type { PreparedLegend, PreparedSeries } from '../series';
 export declare const getBoundsWidth: (args: {
     chartWidth: number;

package/dist/cjs/core/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/cjs/core/range-slider/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/cjs/core/range-slider/types.d.ts

@@ -0,0 +1,4 @@
+export type RangeSliderState = {
+    max: number;
+    min: number;
+};

package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.d.ts

@@ -1,8 +1,8 @@
-import type { ChartScale } from '../../core/scales/types';
-import type { PreparedLegend } from '../../core/series/types';
-import type { PreparedChart } from '../types';
-import type { PreparedRangeSlider } from '../useAxis/types';
-import type { BrushSelection } from '../useBrush/types';
+import type { PreparedRangeSlider } from '../axes/types';
+import type { BrushSelection } from '../brush/types';
+import type { PreparedChart } from '../chart/types';
+import type { ChartScale } from '../scales/types';
+import type { PreparedLegend } from '../series/types';
 import type { RangeSliderState } from './types';
 export declare function getRangeSliderOffsetTop(args: {
     height: number;

package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.js

@@ -1,4 +1,4 @@
-import { isBandScale } from '../../core/utils';
+import { isBandScale } from '../utils';
 export function getRangeSliderOffsetTop(args) {
     var _a, _b;
     const { height, preparedChart, preparedLegend, preparedRangeSlider } = args;

package/dist/cjs/core/scales/x-scale.d.ts

@@ -1,7 +1,7 @@
-import type { RangeSliderState } from '../../hooks';
-import type { ChartAxis, ChartSeries } from '../../types';
 import type { PreparedAxis } from '../axes/types';
+import type { RangeSliderState } from '../range-slider/types';
 import type { PreparedSeries } from '../series';
+import type { ChartAxis, ChartSeries } from '../types';
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;

package/dist/cjs/core/scales/y-scale.js

@@ -218,6 +218,27 @@ export function createYScale(args) {
                 else {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
+                // When the user pins only one of min/max on the wrong side of all data,
+                // d3 produces either an inverted scale (yMax<yMin, silently flips the
+                // axis) or a degenerate one (yMax===yMin, maps everything to the range
+                // midpoint); both leave phantom hover targets inside an empty plot.
+                // Expand the auto-computed side so the scale stays sane. Only applies
+                // when the opposite bound is auto-derived — if the user supplied both
+                // bounds, trust the explicit range and let point filtering hide the
+                // rest. Comparison uses the raw data extent because upstream coercions
+                // like volume-series `yMax = Math.max(yMaxDomain, 0)` can make the
+                // post-coerced yMin/yMax lie about where data actually sits.
+                // Logarithmic has its own guard.
+                if (axis.type === 'linear') {
+                    const minIsUserSet = typeof yMinPropsOrState === 'number';
+                    const maxIsUserSet = typeof yMaxPropsOrState === 'number';
+                    if (minIsUserSet && !maxIsUserSet && yMaxDomain < yMin) {
+                        yMax = yMin + Math.max(Math.abs(yMin), 1);
+                    }
+                    else if (maxIsUserSet && !minIsUserSet && yMinDomain > yMax) {
+                        yMin = yMax - Math.max(Math.abs(yMax), 1);
+                    }
+                }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 let scale = scaleFn().domain([yMin, yMax]).range(range);
                 let offsetMin = 0;

package/dist/cjs/core/series/prepare-legend.d.ts

@@ -1,5 +1,5 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartData } from '../../types';
+import type { PreparedChart } from '../chart/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];

package/dist/cjs/core/shapes/area/prepare-data.js

@@ -2,7 +2,7 @@ import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { prepareAnnotation } from '../../series/prepare-annotation';
-import { getXValue, getYValue } from '../../shapes/utils';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
 function getXValues(series, xAxis, xScale) {
@@ -315,6 +315,11 @@ export const prepareAreaData = async (args) => {
                     }
                     return result;
                 }, []);
+                markHiddenPointsOutOfYRange({
+                    points,
+                    yScale: seriesYScale,
+                    yAxisTop,
+                });
                 seriesStackData.push({
                     annotations,
                     points,

package/dist/cjs/core/shapes/area/renderer.js

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } 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('area');
@@ -17,7 +18,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     const inactiveOptions = get(seriesOptions, 'area.states.inactive');
     const line = lineGenerator()
         .x((d) => d.x)
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
     markersSvgElement.selectAll('*').remove();
@@ -37,7 +38,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
         .attr('stroke-linejoin', 'round')
         .attr('stroke-linecap', 'round');
     const area = areaGenerator()
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y0((d) => d.y0)
         .y1((d) => d.y);
@@ -53,18 +54,11 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelsSelection = plotSvgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelsSelection = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
     const markerSelection = markersSvgElement
         .selectAll('marker')

package/dist/cjs/core/shapes/area/types.d.ts

@@ -1,13 +1,14 @@
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
 export type PointData = {
-    y0: number;
-    x: number;
-    y: number | null;
-    data: AreaSeriesData;
-    series: PreparedAreaSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: AreaSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedAreaSeries;
+    x: number;
+    y: number | null;
+    y0: number;
 };
 export type MarkerPointData = PointData & {
     y: number;

package/dist/cjs/core/shapes/bar-x/renderer.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
 import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
 import { getRectPath } from '../utils';
 const b = block('bar-x');
 export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
@@ -37,18 +38,11 @@ export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelSelection = svgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const annotationAnchors = [];
     for (const d of preparedData) {
         if (d.annotation) {

package/dist/cjs/core/shapes/bar-y/renderer.js

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
 const b = block('bar-y');
 export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
@@ -31,18 +32,11 @@ export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
         .attr('fill-rule', 'evenodd')
         .attr('opacity', (d) => d.data.opacity || null)
         .attr('pointer-events', 'none');
-    const labelSelection = svgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
     const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
     function handleShapeHover(data) {

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

@@ -0,0 +1,15 @@
+import type { Selection } from 'd3-selection';
+import type { BaseTextStyle } from '../types/chart/base';
+type RenderableLabelData = {
+    text: string;
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'end' | 'middle';
+    style: BaseTextStyle;
+};
+export declare function renderDataLabels<T extends RenderableLabelData>(args: {
+    container: Selection<SVGGElement, unknown, null, undefined>;
+    data: T[];
+    className: string;
+}): Selection<SVGTextElement, T, SVGGElement, unknown>;
+export {};

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

@@ -0,0 +1,15 @@
+export function renderDataLabels(args) {
+    const { container, data, className } = args;
+    return container
+        .selectAll('text')
+        .data(data)
+        .join('text')
+        .html((d) => d.text)
+        .attr('class', className)
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .attr('text-anchor', (d) => d.textAnchor)
+        .style('font-size', (d) => d.style.fontSize)
+        .style('font-weight', (d) => d.style.fontWeight || null)
+        .style('fill', (d) => d.style.fontColor || null);
+}

package/dist/cjs/core/shapes/funnel/renderer.js

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('funnel');
 export function renderFunnel(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -44,17 +45,11 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     connectorLines.append('path').attr('d', (d) => d.linePath[0].toString());
     connectorLines.append('path').attr('d', (d) => d.linePath[1].toString());
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.svgLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.svgLabels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

package/dist/cjs/core/shapes/heatmap/prepare-data.js

@@ -84,6 +84,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                             x: item.x + item.width / 2 - size.width / 2,
                             y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
+                            textAnchor: 'start',
                             style: series.dataLabels.style,
                         });
                     }

package/dist/cjs/core/shapes/heatmap/renderer.js

@@ -1,6 +1,7 @@
 import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('heatmap');
 export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -20,17 +21,11 @@ export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.labels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

package/dist/cjs/core/shapes/heatmap/types.d.ts

@@ -14,6 +14,7 @@ export type HeatmapLabel = {
     x: number;
     y: number;
     text: string;
+    textAnchor: 'start' | 'end' | 'middle';
     style: BaseTextStyle;
 };
 export type PreparedHeatmapData = {

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

@@ -1,7 +1,7 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../utils';
 import { getFormattedValue } from '../../utils/format';
-import { getXValue, getYValue } from '../utils';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
     var _a;
     const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
@@ -129,6 +129,14 @@ export const prepareLineData = async (args) => {
             }
             return result;
         }, []);
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
         const result = {
             annotations,
             points,

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

@@ -5,6 +5,7 @@ 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');
@@ -17,7 +18,7 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const hoverOptions = get(seriesOptions, 'line.states.hover');
     const inactiveOptions = get(seriesOptions, 'line.states.inactive');
     const line = lineGenerator()
-        .defined((d) => d.y !== null && d.x !== null)
+        .defined((d) => d.y !== null && d.x !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
@@ -38,18 +39,11 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const dataLabels = preparedData.reduce((acc, d) => {
         return acc.concat(d.svgLabels);
     }, []);
-    const labelsSelection = plotSvgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelsSelection = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
     const markerSelection = markersSvgElement
         .selectAll('marker')

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

@@ -2,12 +2,13 @@ import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } fro
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
 export type PointData = {
-    x: number | null;
-    y: number | null;
-    data: LineSeriesData;
-    series: PreparedLineSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: LineSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedLineSeries;
+    x: number | null;
+    y: number | null;
 };
 export type MarkerPointData = PointData & {
     y: number;

package/dist/cjs/core/shapes/radar/renderer.js

@@ -3,6 +3,7 @@ import { select } from 'd3-selection';
 import { line } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../../shapes/data-labels';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
 import { setActiveState } from '../../shapes/utils';
 const b = block('radar');
@@ -59,18 +60,13 @@ export function renderRadar(elements, preparedData, seriesOptions, dispatcher) {
         .join('g')
         .call(renderMarker);
     // Render labels
-    radarSelection
-        .selectAll('text')
-        .data((radarData) => radarData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    radarSelection.each(function (radarData) {
+        renderDataLabels({
+            container: select(this),
+            data: radarData.labels,
+            className: b('label'),
+        });
+    });
     // Handle hover events
     const eventName = `hover-shape.radar`;
     const hoverOptions = get(seriesOptions, 'radar.states.hover');