@gravity-ui/charts 1.43.1 → 1.44.0

package/dist/esm/core/i18n/keysets/en.json

@@ -21,7 +21,8 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
     "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}].",
     "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type.",
-    "label_inconsistent-y-axis-configuration": "It seems you have inconsistent Y-axis configuration. Possible reasons:\n1. Multiple Y axes with the same position and plot index.\n2. At the moment, 'category' axis is not supported in dual Y-axis configurations."
+    "label_inconsistent-y-axis-configuration": "It seems you have inconsistent Y-axis configuration. Possible reasons:\n1. Multiple Y axes with the same position and plot index.\n2. At the moment, 'category' axis is not supported in dual Y-axis configurations.",
+    "label_stacking-area-connect-null-mode": "It seems you are using \"nullMode: 'connect'\" with a stacking area series. The \"connect\" null mode is not supported in stacking mode. Use \"zero\" or \"skip\" instead."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/esm/core/i18n/keysets/ru.json

@@ -21,7 +21,8 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
     "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}].",
     "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом.",
-    "label_inconsistent-y-axis-configuration": "Похоже, что конфигурация осей Y неконсистентна. Возможные причины:\n1. Несколько осей Y имеют одинаковые значения position и plotIndex.\n2. На данный момент категорийные оси не поддерживаются в конфигурациях с двумя осями Y."
+    "label_inconsistent-y-axis-configuration": "Похоже, что конфигурация осей Y неконсистентна. Возможные причины:\n1. Несколько осей Y имеют одинаковые значения position и plotIndex.\n2. На данный момент категорийные оси не поддерживаются в конфигурациях с двумя осями Y.",
+    "label_stacking-area-connect-null-mode": "Похоже, что вы используете \"nullMode: 'connect'\" с серией area с накоплением. Режим null \"connect\" не поддерживается в режиме накопления. Используйте \"zero\" или \"skip\"."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",

package/dist/esm/core/series/prepare-legend.js

@@ -136,7 +136,7 @@ async function getGroupedLegendItems(args) {
         else {
             resultItem.textWidth = textWidth;
         }
-        textWidthsInLine.push(textWidth);
+        textWidthsInLine.push(resultItem.textWidth);
         const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
         if (!result[lineIndex]) {
             result[lineIndex] = [];
@@ -155,7 +155,7 @@ async function getGroupedLegendItems(args) {
         else if (isCurrentLineOverMaxWidth) {
             result[lineIndex].pop();
             lineIndex += 1;
-            textWidthsInLine = [textWidth];
+            textWidthsInLine = [resultItem.textWidth];
             const nextLineIndex = lineIndex;
             result[nextLineIndex] = [];
             result[nextLineIndex].push(resultItem);

package/dist/esm/core/series/prepare-x-range.d.ts

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

package/dist/esm/core/series/prepare-x-range.js

@@ -0,0 +1,41 @@
+import get from 'lodash/get';
+import { getUniqId } from '../utils';
+import { DASH_STYLE, DEFAULT_DATALABELS_STYLE } from '../constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareXRangeSeries(args) {
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
+    return seriesList.map((series) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getUniqId(),
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+                groupId: (_b = (_a = series.legend) === null || _a === void 0 ? void 0 : _a.groupId) !== null && _b !== void 0 ? _b : getUniqId(),
+                itemText: (_d = (_c = series.legend) === null || _c === void 0 ? void 0 : _c.itemText) !== null && _d !== void 0 ? _d : name,
+            },
+            data: series.data,
+            opacity: (_e = series.opacity) !== null && _e !== void 0 ? _e : null,
+            borderRadius: (_h = (_f = series.borderRadius) !== null && _f !== void 0 ? _f : (_g = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _g === void 0 ? void 0 : _g.borderRadius) !== null && _h !== void 0 ? _h : 0,
+            borderWidth: (_l = (_j = series.borderWidth) !== null && _j !== void 0 ? _j : (_k = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _k === void 0 ? void 0 : _k.borderWidth) !== null && _l !== void 0 ? _l : 0,
+            borderColor: (_p = (_m = series.borderColor) !== null && _m !== void 0 ? _m : (_o = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _o === void 0 ? void 0 : _o.borderColor) !== null && _p !== void 0 ? _p : 'var(--gcharts-shape-border-color)',
+            borderDashStyle: (_s = (_q = series.borderDashStyle) !== null && _q !== void 0 ? _q : (_r = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _r === void 0 ? void 0 : _r.borderDashStyle) !== null && _s !== void 0 ? _s : DASH_STYLE.Solid,
+            cursor: get(series, 'cursor', null),
+            tooltip: series.tooltip,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', false),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_t = series.dataLabels) === null || _t === void 0 ? void 0 : _t.style),
+                html: get(series, 'dataLabels.html', false),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                format: (_u = series.dataLabels) === null || _u === void 0 ? void 0 : _u.format,
+            },
+        };
+    });
+}

package/dist/esm/core/series/prepareSeries.js

@@ -11,6 +11,7 @@ import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
+import { prepareXRangeSeries } from './prepare-x-range';
 export async function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {
@@ -108,6 +109,14 @@ export async function prepareSeries(args) {
                 colors,
             });
         }
+        case 'x-range': {
+            return prepareXRangeSeries({
+                series: series,
+                seriesOptions,
+                legend,
+                colorScale,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

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

@@ -1,4 +1,4 @@
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData, XRangeSeries, XRangeSeriesData } from '../../types';
 import type { DashStyle, LayoutAlgorithm, LineCap, LineJoin, SeriesOptionsDefaults, SymbolType } from '../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -339,7 +339,23 @@ export type PreparedFunnelSeries = {
     };
     connectors: Required<FunnelSeries['connectors']>;
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries | PreparedFunnelSeries;
+export type PreparedXRangeSeries = {
+    type: XRangeSeries['type'];
+    data: XRangeSeriesData[];
+    borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
+    borderDashStyle: DashStyle;
+    opacity: number | null;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        html: boolean;
+        padding: number;
+        format?: ValueFormat;
+    };
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries | PreparedFunnelSeries | PreparedXRangeSeries;
 export type PreparedZoomableSeries = Extract<PreparedSeries, {
     data: Array<unknown>;
 }>;

package/dist/esm/core/types/chart/area.d.ts

@@ -76,9 +76,10 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     /**
      * Specifies how null or undefined values should be handled in the series.
      *
-     * - `'connect'`: Connect points across null values (skip nulls in rendering)
+     * - `'connect'`: Connect points across null values (skip nulls in rendering). **Not supported with `stacking`.**
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit the data point (creates gap in area)
+     *
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';

package/dist/esm/core/types/chart/series.d.ts

@@ -15,8 +15,9 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T>;
+import type { XRangeSeries, XRangeSeriesData } from './x-range';
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T> | XRangeSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T> | XRangeSeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -291,6 +292,32 @@ export interface ChartSeriesOptions {
             hover?: BasicHoverState;
         };
     };
+    'x-range'?: {
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
+        /**
+         * The width of the border surrounding each bar.
+         * @default 0
+         */
+        borderWidth?: number;
+        /**
+         * The color of the border surrounding each bar.
+         */
+        borderColor?: string;
+        /**
+         * The dash style of the border surrounding each bar.
+         * @default 'Solid'
+         */
+        borderDashStyle?: DashStyle;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 }
 export type ChartSeriesRangeSliderOptions = {
     /**

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

@@ -15,6 +15,7 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+import type { XRangeSeries, XRangeSeriesData } from './x-range';
 export interface TooltipDataChunkBarX<T = MeaningfulAny> {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -87,7 +88,11 @@ export interface TooltipDataChunkFunnel<T = MeaningfulAny> {
         name: string;
     };
 }
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T> | TooltipDataChunkHeatmap<T> | TooltipDataChunkFunnel<T>) & {
+export interface TooltipDataChunkXRange<T = MeaningfulAny> {
+    data: XRangeSeriesData<T>;
+    series: XRangeSeries<T>;
+}
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T> | TooltipDataChunkHeatmap<T> | TooltipDataChunkFunnel<T> | TooltipDataChunkXRange<T>) & {
     closest?: boolean;
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {

package/dist/esm/core/types/chart/x-range.d.ts

@@ -0,0 +1,59 @@
+import type { DashStyle, SERIES_TYPE } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
+export interface XRangeSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    /**
+     * The start value of the bar on the x-axis. Can be a numeric or timestamp value.
+     */
+    x0: number | string;
+    /**
+     * The end value of the bar on the x-axis. Can be a numeric or timestamp value.
+     */
+    x1: number | string;
+    /**
+     * The `y` value. Depending on the context it may represent:
+     * - a category value (for `category` y axis). If string, it is the category itself. If number, it is the index in `yAxis[0].categories`.
+     * - a numeric value (for `linear` y axis)
+     */
+    y?: string | number;
+    /** Individual color for the bar. Overrides the series color. */
+    color?: string;
+    /** Data label value. If not specified, the series name is used. */
+    label?: string | number;
+    /** Individual opacity for the bar. */
+    opacity?: number;
+}
+export interface XRangeSeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SERIES_TYPE.XRange;
+    data: XRangeSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Individual opacity for the entire series. */
+    opacity?: number | null;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
+    /**
+     * The width of the border surrounding each bar.
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * The color of the border surrounding each bar.
+     */
+    borderColor?: string;
+    /**
+     * The dash style of the border surrounding each bar.
+     * @default 'Solid'
+     */
+    borderDashStyle?: DashStyle;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: BaseSeriesLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+}

package/dist/esm/core/types/chart/x-range.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/types/chart/zoom.d.ts

@@ -18,7 +18,7 @@ export interface ChartZoom {
      *
      * Supported zoom types by series type:
      * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
-     * - `BarX`: `x`
+     * - `BarX`, `XRange`: `x`
      * - `BarY`: `y`
      *
      * Default zoom type by series type:

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

@@ -30,6 +30,7 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

package/dist/esm/core/types/index.js

@@ -22,3 +22,4 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';

package/dist/esm/core/utils/axis/x-axis.js

@@ -12,7 +12,15 @@ function getTicksCount(args) {
     if (series) {
         const xDataSet = new Set();
         series === null || series === void 0 ? void 0 : series.forEach((item) => {
-            if (isSeriesWithNumericalXValues(item)) {
+            if (item.type === 'x-range') {
+                item.data.forEach((d) => {
+                    if (d.x0 !== null && d.x1 !== null) {
+                        xDataSet.add(d.x0);
+                        xDataSet.add(d.x1);
+                    }
+                });
+            }
+            else if (isSeriesWithNumericalXValues(item)) {
                 item.data.forEach((data) => {
                     xDataSet.add(data.x);
                 });

package/dist/esm/core/utils/color.js

@@ -22,6 +22,12 @@ export function getDomainForContinuousColorScale(args) {
                 acc.push(...s.data.map((d) => Number(d.y)));
                 break;
             }
+            case 'x-range': {
+                // Use bar duration (x1 - x0) as the color domain value so that
+                // longer bars can be visually distinguished by color intensity.
+                acc.push(...s.data.map((d) => Math.abs(Number(d.x1) - Number(d.x0))));
+                break;
+            }
             default: {
                 throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
             }

package/dist/esm/core/utils/common.js

@@ -57,6 +57,16 @@ export const getDomainDataXBySeries = (series) => {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
                 break;
             }
+            case 'x-range': {
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        if (!isNil(d.x0) && !isNil(d.x1)) {
+                            acc.push(d.x0, d.x1);
+                        }
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalXValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.x));

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

@@ -288,6 +288,25 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'x-range': {
+                const data = list;
+                const pointsInXRange = data.filter((d) => pointerX >= d.x &&
+                    pointerX <= d.x + d.width &&
+                    pointerY >= d.y &&
+                    pointerY <= d.y + d.height);
+                if (pointsInXRange.length === 0) {
+                    break;
+                }
+                const closestByX = pointsInXRange.length === 1
+                    ? pointsInXRange[0]
+                    : sort(pointsInXRange, (d) => Math.abs(d.x + d.width / 2 - pointerX))[0];
+                result.push(...pointsInXRange.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    closest: d === closestByX,
+                })));
+                break;
+            }
         }
     });
     if (closestPointsByXValue.length) {

package/dist/esm/core/validation/index.js

@@ -265,6 +265,18 @@ function validateStacking({ series }) {
         });
     }
 }
+function validateStackingAreaNullMode({ series }) {
+    const availableStackingValues = ['normal', 'percent'];
+    const invalid = series.find((s) => s.type === 'area' &&
+        availableStackingValues.includes(s.stacking) &&
+        s.nullMode === 'connect');
+    if (invalid) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_stacking-area-connect-null-mode'),
+        });
+    }
+}
 function validateTreemapSeries({ series }) {
     const parentIds = {};
     series.data.forEach((d) => {
@@ -379,6 +391,7 @@ export function validateData(data) {
     }
     validateAxes({ xAxis: data.xAxis, yAxis: data.yAxis });
     validateTooltip({ tooltip: data.tooltip });
+    validateStackingAreaNullMode({ series: data.series.data });
     if (data.series.data.some((s) => isEmpty(s.data))) {
         throw new ChartError({
             code: CHART_ERROR_CODE.INVALID_DATA,

package/dist/esm/core/zoom/zoom.js

@@ -69,13 +69,30 @@ export function getZoomedSeriesData(args) {
             prevPointInRange = currentPointInRange;
             if (zoomState.x) {
                 const [xMin, xMax] = zoomState.x;
-                const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
-                inXRange = isValueInRange({
-                    axis: xAxis,
-                    value: x,
-                    min: xMin,
-                    max: xMax,
-                });
+                if ('x0' in point && 'x1' in point) {
+                    const isStartInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x0,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    const isEndInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x1,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    inXRange = isStartInRange || isEndInRange;
+                }
+                else {
+                    const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
+                    inXRange = isValueInRange({
+                        axis: xAxis,
+                        value: x,
+                        min: xMin,
+                        max: xMax,
+                    });
+                }
             }
             if (zoomState.y) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'

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

@@ -1,4 +1,4 @@
-import { group, min } from 'd3-array';
+import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
@@ -27,7 +27,7 @@ function getXValues(series, xAxis, xScale) {
             return acc;
         }, []);
     }
-    return Array.from(xValues);
+    return sort(Array.from(xValues), (d) => d[1]);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
@@ -166,13 +166,14 @@ export const prepareAreaData = async (args) => {
                     return m.set(key, d);
                 }, new Map());
                 const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    const rawData = seriesData.get(x);
+                    const d = rawData !== null && rawData !== void 0 ? rawData : {
                         x,
                         y: 0,
                     };
-                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
-                    if (s.nullMode === 'connect' && yDataValue === null) {
+                    let yDataValue = (_a = d.y) !== null && _a !== void 0 ? _a : null;
+                    if (s.nullMode === 'connect' && (yDataValue === null || !rawData)) {
                         return pointsAcc;
                     }
                     if (yDataValue && isPercentStacking) {
@@ -187,13 +188,13 @@ export const prepareAreaData = async (args) => {
                     });
                     if (typeof yDataValue === 'number' && yValue !== null) {
                         yValue = round(yValue, 2);
-                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
-                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const prevPoint = seriesData.get((_b = xValues[index - 1]) === null || _b === void 0 ? void 0 : _b[0]);
+                        const nextPoint = seriesData.get((_c = xValues[index + 1]) === null || _c === void 0 ? void 0 : _c[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
                             const positiveStackHeights = positiveStackValues.get(x);
-                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
-                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            let prevSectionStackHeight = (_d = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _d !== void 0 ? _d : 0;
+                            let nextSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _e !== void 0 ? _e : 0;
                             const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
@@ -219,11 +220,11 @@ export const prepareAreaData = async (args) => {
                                     point2.y = newYValue;
                                 }
                             }
-                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null || s.nullMode === 'zero') {
                                 prevSectionStackHeight =
                                     prevSectionStackHeight + currentPointStackHeight;
                             }
-                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null || s.nullMode === 'zero') {
                                 nextSectionStackHeight =
                                     nextSectionStackHeight + currentPointStackHeight;
                             }
@@ -234,8 +235,8 @@ export const prepareAreaData = async (args) => {
                         }
                         else {
                             const negativeStackHeights = negativeStackValues.get(x);
-                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
-                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
+                            let prevSectionStackHeight = (_f = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _f !== void 0 ? _f : 0;
+                            let nextSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _g !== void 0 ? _g : 0;
                             pointsAcc.push({
                                 y0: yAxisTop + yMin + prevSectionStackHeight,
                                 x: xValue,

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

@@ -110,8 +110,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let positiveStackHeight = 0;
-                let negativeStackHeight = 0;
+                let positiveStackSum = 0;
+                let negativeStackSum = 0;
                 const stackItems = [];
                 let sortedData = yValues;
                 if (sortKey) {
@@ -144,7 +144,6 @@ export const prepareBarXData = async (args) => {
                     }
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
-                    const y = seriesYScale(yDataValue);
                     let base = 0;
                     if (seriesYAxis.type === 'logarithmic') {
                         const domainData = seriesYScale.domain();
@@ -155,7 +154,22 @@ export const prepareBarXData = async (args) => {
                         base = seriesYScale(0);
                     }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
-                    const height = Math.abs(base - y);
+                    let height;
+                    let barPositionY;
+                    if (yDataValue > 0) {
+                        const newSum = positiveStackSum + yDataValue;
+                        const topPixel = seriesYScale(newSum);
+                        const bottomPixel = positiveStackSum === 0 ? base : seriesYScale(positiveStackSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + topPixel;
+                    }
+                    else {
+                        const newSum = negativeStackSum + yDataValue;
+                        const bottomPixel = negativeStackSum === 0 ? base : seriesYScale(negativeStackSum);
+                        const topPixel = seriesYScale(newSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + bottomPixel;
+                    }
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
                     if (shapeHeight < 0) {
                         shapeHeight = height;
@@ -165,9 +179,7 @@ export const prepareBarXData = async (args) => {
                     }
                     const barData = {
                         x,
-                        y: yDataValue > 0
-                            ? yAxisTop + y - positiveStackHeight
-                            : yAxisTop + base + negativeStackHeight,
+                        y: barPositionY,
                         width: rectWidth,
                         height: shapeHeight,
                         _height: height,
@@ -180,14 +192,15 @@ export const prepareBarXData = async (args) => {
                     };
                     stackItems.push(barData);
                     if (yDataValue > 0) {
-                        positiveStackHeight += height;
+                        positiveStackSum += yDataValue;
                     }
                     else {
-                        negativeStackHeight += height;
+                        negativeStackSum += yDataValue;
                     }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
+                    const positiveStackHeight = stackItems.reduce((sum, item) => sum + item._height, 0);
                     const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
                         item.height = item._height * ratio;

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

@@ -19,8 +19,9 @@ import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
+import type { PreparedXRangeData } from './x-range';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;