@gravity-ui/charts 1.21.0 → 1.23.0

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

@@ -4,13 +4,26 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { value: (_a = p.value) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'skip':
+        default:
+            return data.filter((p) => p.value !== null);
+    }
+}
 export function preparePieSeries(args) {
     const { series, seriesOptions, legend, colors } = args;
-    const dataNames = series.data.map((d) => d.name);
+    const preparedData = prepareSeriesData(series);
+    const dataNames = preparedData.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, colors);
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
-    const preparedSeries = series.data.map((dataItem, i) => {
+    const preparedSeries = preparedData.map((dataItem, i) => {
         var _a, _b, _c, _d, _e, _f;
         const result = {
             type: 'pie',

package/dist/cjs/hooks/useSeries/prepare-scatter.js

@@ -20,6 +20,21 @@ function prepareMarker(series, seriesOptions, index) {
         },
     };
 }
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => {
+                var _a, _b;
+                return (Object.assign(Object.assign({}, p), { x: (_a = p.x) !== null && _a !== void 0 ? _a : 0, y: (_b = p.y) !== null && _b !== void 0 ? _b : 0 }));
+            });
+        case 'skip':
+        default:
+            return data.filter((p) => p.y !== null && p.x !== null);
+    }
+}
 export function prepareScatterSeries(args) {
     const { colorScale, series, seriesOptions, legend } = args;
     return series.map((s, index) => {
@@ -36,7 +51,7 @@ export function prepareScatterSeries(args) {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s, symbolType),
             },
-            data: s.data,
+            data: prepareSeriesData(s),
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
             yAxis: get(s, 'yAxis', 0),

package/dist/cjs/hooks/useSeries/prepare-waterfall.js

@@ -3,6 +3,21 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((d) => {
+                var _a;
+                return (Object.assign(Object.assign({}, d), { y: d.total ? d.y : ((_a = d.y) !== null && _a !== void 0 ? _a : 0) }));
+            });
+        case 'skip':
+        default:
+            return data.filter((d) => d.y !== null);
+    }
+}
 export function prepareWaterfallSeries(args) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colorScale, series: seriesList, legend, colors } = args;
@@ -33,14 +48,15 @@ export function prepareWaterfallSeries(args) {
     const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
     const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
     const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
-    series.data.forEach((d, index) => {
+    const preparedData = prepareSeriesData(series);
+    preparedData.forEach((d, index) => {
         var _a;
         const value = (_a = d === null || d === void 0 ? void 0 : d.y) !== null && _a !== void 0 ? _a : 0;
         const dataItem = Object.assign(Object.assign({}, d), { index });
         if (d === null || d === void 0 ? void 0 : d.total) {
             totals.data.push(dataItem);
         }
-        else if (value > 0) {
+        else if (value >= 0) {
             positive.data.push(dataItem);
         }
         else if (value < 0) {

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

@@ -22,6 +22,7 @@ export const AreaSeriesShapes = (args) => {
         const inactiveOptions = get(seriesOptions, 'area.states.inactive');
         const line = lineGenerator()
             .x((d) => d.x)
+            .defined((d) => d.y !== null)
             .y((d) => d.y);
         plotSvgElement.selectAll('*').remove();
         markersSvgElement.selectAll('*').remove();
@@ -41,6 +42,7 @@ export const AreaSeriesShapes = (args) => {
             .attr('stroke-linejoin', 'round')
             .attr('stroke-linecap', 'round');
         const area = areaGenerator()
+            .defined((d) => d.y !== null)
             .x((d) => d.x)
             .y0((d) => d.y0)
             .y1((d) => d.y);

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

@@ -35,8 +35,9 @@ function getXValues(series, xAxis, xScale) {
             const key = String(xAxis.type === 'category'
                 ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
                 : d.x);
-            if (!acc.has(key)) {
-                acc.set(key, getXValue({ point: d, points: s.data, xAxis, xScale }));
+            const xValue = getXValue({ point: d, points: s.data, xAxis, xScale });
+            if (!acc.has(key) && xValue !== null) {
+                acc.set(key, xValue);
             }
         });
         return acc;
@@ -53,6 +54,7 @@ function getXValues(series, xAxis, xScale) {
     return Array.from(xValues);
 }
 export const prepareAreaData = async (args) => {
+    var _a;
     const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, isOutsideBounds } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
@@ -74,12 +76,12 @@ export const prepareAreaData = async (args) => {
             if (!seriesYScale) {
                 continue;
             }
-            const yMin = getYValue({
+            const yMin = (_a = getYValue({
                 point: { y: 0 },
                 points: s.data,
                 yAxis: seriesYAxis,
                 yScale: seriesYScale,
-            });
+            })) !== null && _a !== void 0 ? _a : 0;
             const seriesData = s.data.reduce((m, d) => {
                 const key = String(xAxis.type === 'category'
                     ? getDataCategoryValue({
@@ -91,20 +93,21 @@ export const prepareAreaData = async (args) => {
                 return m.set(key, d);
             }, new Map());
             const points = xValues.reduce((pointsAcc, [x, xValue]) => {
+                var _a;
                 const accumulatedYValue = accumulatedYValues.get(x) || 0;
-                const d = seriesData.get(x) ||
-                    {
-                        x,
-                        // FIXME: think about how to break the series into separate areas(null Y values)
-                        y: 0,
-                    };
-                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }) -
-                    accumulatedYValue;
-                accumulatedYValues.set(x, yMin - yValue);
+                const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                    x,
+                    y: 0,
+                };
+                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+                const yPointValue = yValue === null ? null : yValue - accumulatedYValue;
+                if (yPointValue !== null) {
+                    accumulatedYValues.set(x, yMin - yPointValue);
+                }
                 pointsAcc.push({
                     y0: yMin - accumulatedYValue,
                     x: xValue,
-                    y: yValue,
+                    y: yPointValue,
                     data: d,
                     series: s,
                 });
@@ -113,7 +116,13 @@ export const prepareAreaData = async (args) => {
             let labels = [];
             const htmlElements = [];
             if (s.dataLabels.enabled) {
-                const labelItems = await Promise.all(points.map((p) => getLabelData(p, s, xMax)));
+                const labelItems = await Promise.all(points.reduce((labelItemsAcc, p) => {
+                    if (p.y === null) {
+                        return labelItemsAcc;
+                    }
+                    labelItemsAcc.push(getLabelData(p, s, xMax));
+                    return labelItemsAcc;
+                }, []));
                 if (s.dataLabels.html) {
                     const htmlLabels = await Promise.all(labelItems.map(async (l) => {
                         var _a;
@@ -142,12 +151,18 @@ export const prepareAreaData = async (args) => {
             }
             let markers = [];
             if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
-                markers = points.map((p) => ({
-                    point: p,
-                    active: true,
-                    hovered: false,
-                    clipped: isOutsideBounds(p.x, p.y),
-                }));
+                markers = points.reduce((markersAcc, p) => {
+                    if (p.y === null) {
+                        return markersAcc;
+                    }
+                    markersAcc.push({
+                        point: p,
+                        active: true,
+                        hovered: false,
+                        clipped: isOutsideBounds(p.x, p.y),
+                    });
+                    return markersAcc;
+                }, []);
             }
             seriesStackData.push({
                 points,
@@ -170,7 +185,7 @@ export const prepareAreaData = async (args) => {
                 const ratio = plotHeight / stackHeight;
                 seriesStackData.forEach((item) => {
                     const point = item.points[index];
-                    if (point) {
+                    if (point.y !== null && point.y !== undefined) {
                         const height = (point.y0 - point.y) * ratio;
                         point.y0 = plotHeight - height - acc;
                         point.y = point.y0 + height;

package/dist/cjs/hooks/useShapes/area/types.d.ts

@@ -3,13 +3,16 @@ import type { PreparedAreaSeries } from '../../useSeries/types';
 export type PointData = {
     y0: number;
     x: number;
-    y: number;
+    y: number | null;
     data: AreaSeriesData;
     series: PreparedAreaSeries;
     color?: string;
 };
+export type MarkerPointData = PointData & {
+    y: number;
+};
 export type MarkerData = {
-    point: PointData;
+    point: MarkerPointData;
     active: boolean;
     hovered: boolean;
     clipped: boolean;

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

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../constants';
+const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d) {
     if (!d.series.dataLabels.enabled) {
         return undefined;
@@ -30,7 +31,9 @@ async function getLabelData(d) {
         series: d.series,
     };
 }
+// eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
+    var _a;
     const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = get(xAxis, 'categories', []);
@@ -55,6 +58,9 @@ export const prepareBarXData = async (args) => {
     const data = {};
     series.forEach((s) => {
         s.data.forEach((d) => {
+            if (!isSeriesDataValid(d)) {
+                return;
+            }
             const xValue = xAxis.type === 'category'
                 ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
                 : d.x;
@@ -129,7 +135,7 @@ export const prepareBarXData = async (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const yDataValue = yValue.data.y;
+                const yDataValue = ((_a = yValue.data.y) !== null && _a !== void 0 ? _a : 0);
                 const y = seriesYScale(yDataValue);
                 const base = seriesYScale(0);
                 const isLastStackItem = yValueIndex === sortedData.length - 1;
@@ -138,7 +144,7 @@ export const prepareBarXData = async (args) => {
                 if (shapeHeight < 0) {
                     shapeHeight = height;
                 }
-                if (height <= 0) {
+                if (shapeHeight < 0) {
                     continue;
                 }
                 const barData = {

package/dist/cjs/hooks/useShapes/bar-y/index.d.ts

@@ -10,4 +10,4 @@ type Args = {
     htmlLayout: HTMLElement | null;
     clipPathId: string;
 };
-export declare const BarYSeriesShapes: (args: Args) => React.JSX.Element;
+export declare function BarYSeriesShapes(args: Args): React.JSX.Element;

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -3,10 +3,10 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getRectPath } from '../utils';
+import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
 export { prepareBarYData } from './prepare-data';
 const b = block('bar-y');
-export const BarYSeriesShapes = (args) => {
+export function BarYSeriesShapes(args) {
     const { dispatcher, preparedData: { shapes: preparedData, labels: dataLabels, htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
@@ -16,33 +16,29 @@ export const BarYSeriesShapes = (args) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('rect')
+        const segmentSelection = svgElement
+            .selectAll(`path.${b('segment')}`)
             .data(preparedData)
             .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: [0, borderRadius, borderRadius, 0],
-            });
-            return p.toString();
-        })
+            .attr('d', (d) => getAdjustedRectPath(d))
             .attr('class', b('segment'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.color)
-            .attr('stroke', (d) => d.borderColor)
-            .attr('stroke-width', (d) => d.borderWidth)
             .attr('opacity', (d) => d.data.opacity || null)
             .attr('cursor', (d) => d.series.cursor);
+        const borderSelection = svgElement
+            .selectAll(`path.${b('segment-border')}`)
+            .data(preparedData.filter((d) => d.borderWidth > 0))
+            .join('path')
+            .attr('d', (d) => getAdjustedRectBorderPath(d))
+            .attr('class', b('segment-border'))
+            .attr('fill', (d) => d.borderColor)
+            .attr('fill-rule', 'evenodd')
+            .attr('opacity', (d) => d.data.opacity || null)
+            .attr('pointer-events', 'none');
         const labelSelection = svgElement
             .selectAll('text')
             .data(dataLabels)
@@ -64,7 +60,7 @@ export const BarYSeriesShapes = (args) => {
                     acc.add(d.data.y);
                     return acc;
                 }, new Set());
-                rectSelection.attr('fill', (d) => {
+                segmentSelection.attr('fill', (d) => {
                     var _a;
                     const fillColor = d.color;
                     if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data.y)) {
@@ -82,7 +78,8 @@ export const BarYSeriesShapes = (args) => {
                     }
                     return null;
                 };
-                rectSelection.attr('opacity', newOpacity);
+                segmentSelection.attr('opacity', newOpacity);
+                borderSelection.attr('opacity', newOpacity);
                 labelSelection.attr('opacity', newOpacity);
             }
         }
@@ -97,4 +94,4 @@ export const BarYSeriesShapes = (args) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
-};
+}

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -10,6 +10,7 @@ export async function prepareBarYData(args) {
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
+    const [baseRangeValue] = xLinearScale.range();
     if (!yLinearScale) {
         return {
             shapes: [],
@@ -42,7 +43,6 @@ export async function prepareBarYData(args) {
         scale: yScale,
     });
     const result = [];
-    const baseRangeValue = xLinearScale.range()[0];
     Object.entries(groupedData).forEach(([yValue, val]) => {
         const stacks = Object.values(val);
         const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
@@ -64,6 +64,9 @@ export async function prepareBarYData(args) {
                 ratio = xLinearScale.range()[1] / sum;
             }
             sortedData.forEach(({ data, series: s }, xValueIndex) => {
+                if (data.x === null) {
+                    return;
+                }
                 let center;
                 if (yAxis[0].type === 'category') {
                     const bandScale = yScale;
@@ -79,24 +82,40 @@ export async function prepareBarYData(args) {
                 }
                 const y = center - currentBarHeight / 2 + (barSize + barGap) * groupItemIndex;
                 const xValue = Number(data.x);
-                const isLastStackItem = xValueIndex === sortedData.length - 1;
                 const width = Math.abs(xLinearScale(xValue) * ratio - base);
                 let shapeWidth = width - (stackItems.length ? stackGap : 0);
                 if (shapeWidth < 0) {
                     shapeWidth = width;
                 }
-                if (shapeWidth <= 0) {
+                if (shapeWidth < 0) {
                     return;
                 }
                 const itemStackGap = width - shapeWidth;
+                const borderWidth = barSize > s.borderWidth * 2 ? s.borderWidth : 0;
+                const isFirstInStack = xValueIndex === 0;
+                const isLastStackItem = xValueIndex === sortedData.length - 1;
+                // Calculate position with border compensation
+                // Border extends halfBorder outward from the shape, so we need to adjust position
+                let itemX = (xValue > baseRangeValue ? stackSum : stackSum - width) + itemStackGap;
+                const halfBorder = borderWidth / 2;
+                if (isFirstInStack && xValue > 0) {
+                    // Positive bar: border extends left, so shift position left by halfBorder
+                    // to keep the visual left edge at the zero line
+                    itemX -= halfBorder;
+                }
+                else if (isFirstInStack && xValue < 0) {
+                    // Negative bar: border extends right, so shift position right by halfBorder
+                    // to keep the visual right edge at the zero line
+                    itemX += halfBorder;
+                }
                 const item = {
-                    x: (xValue > baseRangeValue ? stackSum : stackSum - width) + itemStackGap,
+                    x: itemX,
                     y: y,
                     width: shapeWidth,
                     height: barSize,
                     color: data.color || s.color,
                     borderColor: s.borderColor,
-                    borderWidth: barSize > s.borderWidth * 2 ? s.borderWidth : 0,
+                    borderWidth,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,

package/dist/cjs/hooks/useShapes/bar-y/types.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { HtmlItem, LabelData, TooltipDataChunkBarY } from '../../../types';
 import type { PreparedBarYSeries } from '../../useSeries/types';
-export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
+export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
     x: number;
     y: number;
     width: number;

package/dist/cjs/hooks/useShapes/bar-y/utils.d.ts

@@ -0,0 +1,3 @@
+import type { PreparedBarYData } from './types';
+export declare function getAdjustedRectPath(d: PreparedBarYData): string;
+export declare function getAdjustedRectBorderPath(d: PreparedBarYData): string;

package/dist/cjs/hooks/useShapes/bar-y/utils.js

@@ -0,0 +1,44 @@
+import { getRectBorderPath, getRectPath } from '../utils';
+export function getAdjustedRectPath(d) {
+    const borderRadius = d.isLastStackItem
+        ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+        : 0;
+    // Fill should match the inner border dimensions to prevent color bleeding
+    const halfBorder = d.borderWidth / 2;
+    const innerBorderRadius = Math.max(borderRadius - halfBorder, 0);
+    // Adjust fill position and size based on border width
+    let fillX = d.x;
+    let fillY = d.y;
+    let fillWidth = d.width;
+    let fillHeight = d.height;
+    let fillBorderRadiusRight = borderRadius;
+    if (d.borderWidth > 0) {
+        // Inset fill by halfBorder on all sides
+        fillX = d.x + halfBorder;
+        fillY = d.y + halfBorder;
+        fillWidth = d.width - d.borderWidth;
+        fillHeight = d.height - d.borderWidth;
+        fillBorderRadiusRight = innerBorderRadius;
+    }
+    const p = getRectPath({
+        x: fillX,
+        y: fillY,
+        width: fillWidth,
+        height: fillHeight,
+        borderRadius: [0, fillBorderRadiusRight, fillBorderRadiusRight, 0],
+    });
+    return p.toString();
+}
+export function getAdjustedRectBorderPath(d) {
+    const borderRadius = d.isLastStackItem
+        ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+        : 0;
+    return getRectBorderPath({
+        x: d.x,
+        y: d.y,
+        width: d.width,
+        height: d.height,
+        borderWidth: d.borderWidth,
+        borderRadius: [0, borderRadius, borderRadius, 0],
+    });
+}

package/dist/cjs/hooks/useShapes/heatmap/prepare-data.js

@@ -8,8 +8,11 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
     const xDomainData = getDomainDataXBySeries([series]);
     const bandWidth = getBandSize({ domain: xDomainData, scale: xScale });
     const xAxisCategories = (_b = xAxis.categories) !== null && _b !== void 0 ? _b : [];
-    const heatmapItems = series.data.map((d) => {
+    const heatmapItems = series.data.reduce((items, d) => {
         var _a, _b, _c;
+        if (d.value === null) {
+            return items;
+        }
         let x = 0;
         if (isBandScale(xScale)) {
             x = (_a = xScale(xAxisCategories[d.x])) !== null && _a !== void 0 ? _a : 0;
@@ -36,8 +39,9 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
             borderWidth: series.borderWidth,
             data: d,
         };
-        return item;
-    });
+        items.push(item);
+        return items;
+    }, []);
     const svgDataLabels = [];
     const htmlDataLabels = [];
     if (series.dataLabels.enabled) {

package/dist/cjs/hooks/useShapes/line/index.js

@@ -21,6 +21,7 @@ export const LineSeriesShapes = (args) => {
         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)
             .x((d) => d.x)
             .y((d) => d.y);
         plotSvgElement.selectAll('*').remove();

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -53,33 +53,58 @@ export const prepareLineData = async (args) => {
         if (!seriesYScale) {
             continue;
         }
-        const points = s.data.map((d) => ({
-            x: getXValue({ point: d, points: s.data, xAxis, xScale }),
-            y: yAxisTop +
-                getYValue({ point: d, points: s.data, yAxis: seriesYAxis, yScale: seriesYScale }),
-            active: true,
-            data: d,
-            series: s,
-        }));
+        const points = s.data.map((d) => {
+            const yValue = getYValue({
+                point: d,
+                points: s.data,
+                yAxis: seriesYAxis,
+                yScale: seriesYScale,
+            });
+            return {
+                x: getXValue({ point: d, points: s.data, xAxis, xScale }),
+                y: yValue === null ? null : yAxisTop + yValue,
+                active: true,
+                data: d,
+                series: s,
+            };
+        });
         const htmlElements = [];
         let labels = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
-                const list = await Promise.all(points.map((p) => getHtmlLabel(p, s, xMax)));
+                const list = await Promise.all(points.reduce((result, p) => {
+                    if (p.y === null) {
+                        return result;
+                    }
+                    result.push(getHtmlLabel(p, s, xMax));
+                    return result;
+                }, []));
                 htmlElements.push(...list);
             }
             else {
-                labels = await Promise.all(points.map((p) => getLabelData(p, s, xMax)));
+                labels = await Promise.all(points.reduce((result, p) => {
+                    if (p.y === null) {
+                        return result;
+                    }
+                    result.push(getLabelData(p, s, xMax));
+                    return result;
+                }, []));
             }
         }
         let markers = [];
         if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
-            markers = points.map((p) => ({
-                point: p,
-                active: true,
-                hovered: false,
-                clipped: isOutsideBounds(p.x, p.y),
-            }));
+            markers = points.reduce((result, p) => {
+                if (p.y === null || p.x === null) {
+                    return result;
+                }
+                result.push({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                    clipped: isOutsideBounds(p.x, p.y),
+                });
+                return result;
+            }, []);
         }
         const result = {
             points,

package/dist/cjs/hooks/useShapes/line/types.d.ts

@@ -2,14 +2,18 @@ import type { DashStyle, LineCap } from '../../../constants';
 import type { HtmlItem, LabelData, LineSeriesData } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
-    x: number;
-    y: number;
+    x: number | null;
+    y: number | null;
     data: LineSeriesData;
     series: PreparedLineSeries;
     color?: string;
 };
+export type MarkerPointData = PointData & {
+    y: number;
+    x: number;
+};
 export type MarkerData = {
-    point: PointData;
+    point: MarkerPointData;
     active: boolean;
     hovered: boolean;
     clipped: boolean;