@gravity-ui/charts 1.23.0 → 1.24.1

package/dist/esm/hooks/useShapes/line/prepare-data.d.ts

@@ -1,13 +1,13 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedLineData } from './types';
 export declare const prepareLineData: (args: {
     series: PreparedLineSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;

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

@@ -1,32 +1,6 @@
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
-async function getLabelData(point, series, xMax) {
-    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
-    const style = series.dataLabels.style;
-    const size = await getLabelsSize({ labels: [text], style });
-    const labelData = {
-        text,
-        x: point.x,
-        y: point.y - series.dataLabels.padding,
-        style,
-        size: { width: size.maxWidth, height: size.maxHeight },
-        textAnchor: 'middle',
-        series: series,
-        active: true,
-    };
-    const left = getLeftPosition(labelData);
-    if (left < 0) {
-        labelData.x = labelData.x + Math.abs(left);
-    }
-    else {
-        const right = left + labelData.size.width;
-        if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
-        }
-    }
-    return labelData;
-}
 async function getHtmlLabel(point, series, xMax) {
     const content = String(point.data.label || point.data.y);
     const size = await getLabelsSize({ labels: [content], html: true });
@@ -69,7 +43,7 @@ export const prepareLineData = async (args) => {
             };
         });
         const htmlElements = [];
-        let labels = [];
+        const labels = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
@@ -82,13 +56,28 @@ export const prepareLineData = async (args) => {
                 htmlElements.push(...list);
             }
             else {
-                labels = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null) {
-                        return result;
+                const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
+                for (let index = 0; index < points.length; index++) {
+                    const point = points[index];
+                    if (point.y !== null && point.x !== null) {
+                        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
+                        const labelSize = await getTextSize(text);
+                        const style = s.dataLabels.style;
+                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
+                        const labelData = {
+                            text,
+                            x,
+                            y,
+                            style,
+                            size: labelSize,
+                            textAnchor: 'start',
+                            series: s,
+                            active: true,
+                        };
+                        labels.push(labelData);
                     }
-                    result.push(getLabelData(p, s, xMax));
-                    return result;
-                }, []));
+                }
             }
         }
         let markers = [];

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

@@ -3,10 +3,10 @@ import type { Dispatch, PieArcDatum } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;

package/dist/esm/hooks/useShapes/pie/index.js

@@ -112,7 +112,7 @@ export function PieSeriesShapes(args) {
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             var _a, _b;
             const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
@@ -162,7 +162,7 @@ export function PieSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedRadarData } from './types';
 type PrepareRadarSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     series: PreparedRadarData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function RadarSeriesShapes(args: PrepareRadarSeriesArgs): React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/radar/index.js

@@ -81,7 +81,7 @@ export function RadarSeriesShapes(args) {
         const eventName = `hover-shape.radar`;
         const hoverOptions = get(seriesOptions, 'radar.states.hover');
         const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
             const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
             const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
@@ -126,7 +126,7 @@ export function RadarSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedSankeyData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedSankeyData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const SankeySeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/sankey/index.js

@@ -56,9 +56,9 @@ export const SankeySeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -4,9 +4,10 @@ import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';
 type ScatterSeriesShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    clipPathId?: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/dist/esm/hooks/useShapes/scatter/index.js

@@ -8,7 +8,7 @@ import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const { clipPathId, dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -63,12 +63,12 @@ export function ScatterSeriesShape(props) {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.scatter', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.scatter', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

package/dist/esm/hooks/useShapes/scatter/prepare-data.d.ts

@@ -1,12 +1,12 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }): PreparedScatterData[];

package/dist/esm/hooks/useShapes/styles.css

@@ -1,3 +1,11 @@
+.gcharts-line__label,
+.gcharts-area__label,
+.gcharts-radar__label,
+.gcharts-heatmap__label,
+.gcharts-funnel__label {
+  dominant-baseline: text-before-edge;
+}
+
 .gcharts-scatter__point {
   stroke-width: 1px;
 }
@@ -12,10 +20,6 @@
   dominant-baseline: text-before-edge;
 }
 
-.gcharts-radar__label {
-  dominant-baseline: text-before-edge;
-}
-
 .gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
@@ -36,8 +40,4 @@
 
 .gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
-}
-
-.gcharts-heatmap__label {
-  dominant-baseline: text-before-edge;
 }

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedTreemapData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/treemap/index.js

@@ -92,9 +92,9 @@ export const TreemapSeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -1,7 +1,7 @@
 import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -9,7 +9,7 @@ export declare function getXValue(args: {
     points?: {
         x?: number | string | null;
     }[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
 }): number | null;
 export declare function getYValue(args: {
@@ -19,7 +19,7 @@ export declare function getYValue(args: {
     points?: {
         y?: number | string | null;
     }[];
-    yAxis: PreparedAxis;
+    yAxis: PreparedYAxis;
     yScale: ChartScale;
 }): number | null;
 export declare function shapeKey(d: unknown): string | -1;

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

@@ -5,10 +5,10 @@ import type { PreparedWaterfallData } from './types';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

package/dist/esm/hooks/useShapes/waterfall/index.js

@@ -121,9 +121,9 @@ export const WaterfallSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.waterfall', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.waterfall', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
         };
     }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -1,12 +1,12 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
 import type { PreparedWaterfallData } from './types';
 export declare const prepareWaterfallData: (args: {
     series: PreparedWaterfallSeries[];
     seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
 }) => Promise<PreparedWaterfallData[]>;

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

@@ -1,5 +1,6 @@
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis, PreparedZoom } from '../useChartOptions/types';
+import type { PreparedZoom } from '../useChartOptions/types';
 import type { PreparedSplit } from '../useSplit/types';
 import type { ZoomState } from './types';
 interface UseZoomProps {
@@ -9,9 +10,9 @@ interface UseZoomProps {
     plotContainerWidth: number;
     preparedSplit: PreparedSplit;
     preparedZoom: PreparedZoom | null;
-    xAxis: PreparedAxis | null;
+    xAxis: PreparedXAxis | null;
     xScale?: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale?: (ChartScale | undefined)[];
 }
 export declare function useZoom(props: UseZoomProps): void;

package/dist/esm/hooks/useZoom/utils.d.ts

@@ -1,13 +1,13 @@
 import type { BrushSelection } from 'd3';
 import type { ZoomType } from '../../constants';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
 import type { ZoomState } from './types';
 export declare function selectionToZoomBounds(args: {
     selection: BrushSelection;
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxes: PreparedAxis[];
+    yAxes: PreparedYAxis[];
     yScales: (ChartScale | undefined)[];
     zoomType: ZoomType;
 }): Partial<ZoomState>;

package/dist/esm/hooks/utils/bar-x.d.ts

@@ -1,7 +1,7 @@
 import type { BarXSeries, BarXSeriesData } from '../../types';
-import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedXAxis } from '../useAxis/types';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
-export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedAxis): Record<string | number, Record<string, {
+export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedXAxis): Record<string | number, Record<string, {
     data: BarXSeriesData;
     series: T;
 }[]>>;

package/dist/esm/hooks/utils/bar-y.d.ts

@@ -1,6 +1,6 @@
 import type { BarYSeries, BarYSeriesData } from '../../types';
+import type { PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
 /**
  * BarY always filters out data with null or replace null by zero.
@@ -8,7 +8,7 @@ import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/typ
 type PreparedBarYSeriesData = BarYSeriesData & {
     x?: number | string;
 };
-export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBarYSeries>(series: T[], yAxis: PreparedAxis[]): Record<string | number, Record<string, {
+export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBarYSeries>(series: T[], yAxis: PreparedYAxis[]): Record<string | number, Record<string, {
     data: PreparedBarYSeriesData;
     series: T;
 }[]>>;

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

@@ -1,8 +1,9 @@
-import type { SeriesType } from '../../constants';
+import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
+import type { ChartSeriesRangeSliderOptions } from './series';
 export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
@@ -41,7 +42,7 @@ export interface AreaMarkerOptions extends PointMarkerOptions {
     symbol?: AreaMarkerSymbol;
 }
 export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
-    type: typeof SeriesType.Area;
+    type: typeof SERIES_TYPE.Area;
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
@@ -83,4 +84,8 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';
+    /**
+     * Options to configure how this series appears and behaves in the Range Slider component.
+     */
+    rangeSlider?: ChartSeriesRangeSliderOptions;
 }

package/dist/esm/types/chart/axis.d.ts

@@ -1,6 +1,8 @@
+import type { DurationInput } from '@gravity-ui/date-utils';
 import type { AXIS_TYPE, DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
+import type { ChartBrush } from './brush';
 export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
 export interface ChartAxisLabels {
@@ -40,6 +42,40 @@ export interface ChartAxisLabels {
      * */
     maxWidth?: number | string;
 }
+export interface ChartAxisRangeSlider {
+    /**
+     * Range slider brush configuration.
+     */
+    brush?: ChartBrush;
+    /**
+     * Configuration for the range slider state after the initial chart render.
+     */
+    defaultRange?: {
+        /**
+         * Default size of the range slider.
+         *
+         * The value type depends on the axis scale:
+         * - For `datetime` axes: {@link https://github.com/gravity-ui/date-utils/blob/8d53ff16a4582831140e75f1305dc6a0112a5ad6/src/typings/duration.ts#L7 DurationInput}
+         * - For `linear` and `logarithmic` axes: numeric value
+         */
+        size?: DurationInput | number;
+    };
+    /**
+     * Enable or disable the display of range slider
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * The height of the range slider in pixels.
+     * @default 40
+     */
+    height?: number;
+    /**
+     * The pixel distance between the range slider and the the X axis or X axis labels.
+     * @default 10
+     */
+    margin?: number;
+}
 export interface ChartAxis {
     categories?: string[];
     /** Configure a crosshair that follows either the mouse pointer or the hovered point. */
@@ -124,6 +160,15 @@ export interface ChartAxis {
     order?: 'sortAsc' | 'sortDesc' | 'reverse';
 }
 export interface ChartXAxis extends ChartAxis {
+    /**
+     * Configuration options for the chart range slider component.
+     *
+     * The range slider allows users to select a specific range of data to display
+     * on the chart by adjusting the slider handles.
+     *
+     * Supported only for `linear`, `datetime`, and `logarithmic` axes.
+     */
+    rangeSlider?: ChartAxisRangeSlider;
 }
 export type PlotLayerPlacement = 'before' | 'after';
 export interface AxisPlot {

package/dist/esm/types/chart/bar-x.d.ts

@@ -1,8 +1,8 @@
-import type { SeriesType } from '../../constants';
+import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
-import type { ChartSeriesOptions } from './series';
+import type { ChartSeriesOptions, ChartSeriesRangeSliderOptions } from './series';
 export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
@@ -30,7 +30,7 @@ export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     opacity?: number;
 }
 export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
-    type: typeof SeriesType.BarX;
+    type: typeof SERIES_TYPE.BarX;
     data: BarXSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
@@ -78,4 +78,8 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';
+    /**
+     * Options to configure how this series appears and behaves in the Range Slider component.
+     */
+    rangeSlider?: ChartSeriesRangeSliderOptions;
 }

package/dist/esm/types/chart/bar-y.d.ts

@@ -1,4 +1,4 @@
-import type { SeriesType } from '../../constants';
+import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
@@ -23,7 +23,7 @@ export interface BarYSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     opacity?: number;
 }
 export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
-    type: typeof SeriesType.BarY;
+    type: typeof SERIES_TYPE.BarY;
     data: BarYSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/dist/esm/types/chart/base.d.ts

@@ -15,37 +15,38 @@ export type CustomFormat = {
     }) => string;
 };
 export type ValueFormat = NumberFormat | DateFormat;
+export interface BaseDataLabels {
+    /**
+     * Enable or disable the data labels
+     * @default true
+     */
+    enabled?: boolean;
+    style?: Partial<BaseTextStyle>;
+    /**
+     * @default 5
+     * */
+    padding?: number;
+    /**
+     * @default false
+     * */
+    allowOverlap?: boolean;
+    /**
+     * Allows to use any html-tags to display the content.
+     * The element will be displayed outside the box of the SVG element.
+     *
+     * @default false
+     * */
+    html?: boolean;
+    /** Formatting settings for labels. */
+    format?: ValueFormat;
+}
 export interface BaseSeries {
     /** Initial visibility of the series */
     visible?: boolean;
     /**
      * Options for the series data labels, appearing next to each data point.
      * */
-    dataLabels?: {
-        /**
-         * Enable or disable the data labels
-         * @default true
-         */
-        enabled?: boolean;
-        style?: Partial<BaseTextStyle>;
-        /**
-         * @default 5
-         * */
-        padding?: number;
-        /**
-         * @default false
-         * */
-        allowOverlap?: boolean;
-        /**
-         * Allows to use any html-tags to display the content.
-         * The element will be displayed outside the box of the SVG element.
-         *
-         * @default false
-         * */
-        html?: boolean;
-        /** Formatting settings for labels. */
-        format?: ValueFormat;
-    };
+    dataLabels?: BaseDataLabels;
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;
     /**