@gravity-ui/charts 1.8.0 → 1.9.0

package/dist/cjs/components/Axis/AxisX.js

@@ -50,11 +50,11 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const plotClassName = b('plot-x');
+        const plotDataAttr = 'data-plot-x';
         let plotContainer = null;
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (!axis.visible) {
             return;
@@ -116,12 +116,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot bands
         if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandClassName = b('plot-x-band');
+            const plotBandDataAttr = 'plot-x-band';
             const plotBandsSelection = plotContainer
-                .selectAll(`.${plotBandClassName}-x`)
+                .selectAll(`[${plotBandDataAttr}]`)
                 .data(axis.plotBands)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+                .attr(plotDataAttr, 1)
+                .attr(plotBandDataAttr, 1);
             plotBandsSelection
                 .append('rect')
                 .attr('x', (band) => {
@@ -153,12 +154,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot lines
         if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plot-x-line');
+            const plotLineDataAttr = 'plot-x-line';
             const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}`)
+                .selectAll(`[${plotLineDataAttr}]`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}`);
+                .attr(plotDataAttr, 1)
+                .attr(plotLineDataAttr, 1);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')

package/dist/cjs/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
@@ -97,39 +97,17 @@ export const AxisY = (props) => {
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotContainer = null;
-        const plotClassName = b('plot-y');
+        const plotDataAttr = 'data-plot-y';
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        const getAxisPosition = (axis) => {
-            var _a;
-            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (axis.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        };
-        const plotLines = axes.reduce((acc, axis) => {
-            if (axis.plotLines.length) {
-                acc.push(...axis.plotLines.map((plotLine) => {
-                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
-                }));
-            }
-            return acc;
-        }, []);
-        const plotBands = axes.reduce((acc, axis) => {
-            if (axis.plotBands.length) {
-                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
-            }
-            return acc;
-        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => getAxisPosition(d));
+            .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
@@ -197,13 +175,14 @@ export const AxisY = (props) => {
                     .remove();
             }
             if (plotContainer && d.plotBands.length > 0) {
-                const plotBandClassName = b('plot-y-band');
+                const plotBandDataAttr = `data-plot-y-band-${index}`;
                 const plotBandsSelection = plotContainer
-                    .selectAll(`.${plotBandClassName}`)
-                    .data(plotBands)
+                    .selectAll(`[${plotBandDataAttr}]`)
+                    .data(d.plotBands)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotBandClassName}`)
-                    .style('transform', (plotBand) => plotBand.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotBandDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotBandsSelection
                     .append('rect')
                     .attr('x', 0)
@@ -234,13 +213,14 @@ export const AxisY = (props) => {
                 });
             }
             if (plotContainer && d.plotLines.length > 0) {
-                const plotLineClassName = b('plot-y-line');
+                const plotLineDataAttr = `data-plot-y-line-${index}`;
                 const plotLinesSelection = plotContainer
-                    .selectAll(`.${plotLineClassName}`)
-                    .data(plotLines)
+                    .selectAll(`[${plotLineDataAttr}]`)
+                    .data(d.plotLines)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotLineClassName}`)
-                    .style('transform', (plotLine) => plotLine.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotLineDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotLinesSelection
                     .append('path')
                     .attr('d', (plotLine) => {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -39,6 +40,19 @@ export const ChartInner = (props) => {
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
+    useCrosshair({
+        split: preparedSplit,
+        plotElement: plotRef.current,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        width: boundsWidth,
+        height: boundsHeight,
+        xAxis,
+        yAxes: yAxis,
+        yScale,
+        xScale,
+        dispatcher,
+    });
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on(EventType.CLICK_CHART, clickHandler);

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

@@ -56,9 +56,12 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We need to calculate the width of each axis because the first axis can be hidden
+    // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
+            if (axis.position !== 'left') {
+                return acc;
+            }
             const axisWidth = getYAxisWidth(axis);
             if (acc < axisWidth) {
                 acc = axisWidth;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
@@ -198,6 +198,9 @@ export const Legend = (props) => {
                     })
                         .style('font-size', legend.itemStyle.fontSize)
                         .style('position', 'absolute')
+                        .style('max-width', function (d) {
+                        return `${d.textWidth}px`;
+                    })
                         .style('left', function (d, i) {
                         return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
                     })
@@ -230,7 +233,12 @@ export const Legend = (props) => {
                         .html(function (d) {
                         return ('name' in d && d.name);
                     })
-                        .style('font-size', legend.itemStyle.fontSize);
+                        .style('font-size', legend.itemStyle.fontSize)
+                        .each((d, index, nodes) => {
+                        if (d.overflowed) {
+                            handleOverflowingText(nodes[index], d.textWidth);
+                        }
+                    });
                 }
                 const contentWidth = (legend.html
                     ? getXPosition(line.length) - legend.itemDistance

package/dist/cjs/components/Legend/styles.css

@@ -28,9 +28,11 @@
   fill: var(--g-color-text-complementary);
 }
 .gcharts-legend__item-text-html {
+  overflow: hidden;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .gcharts-legend__item-text-html_unselected {
   color: var(--g-color-text-hint);

package/dist/cjs/constants/chart-types.d.ts

@@ -0,0 +1,12 @@
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+    readonly Treemap: "treemap";
+    readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
+    readonly Radar: "radar";
+};

package/dist/cjs/constants/chart-types.js

@@ -0,0 +1,12 @@
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+    Treemap: 'treemap',
+    Waterfall: 'waterfall',
+    Sankey: 'sankey',
+    Radar: 'radar',
+};

package/dist/cjs/constants/defaults/axis.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
+import type { AxisCrosshair, BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
 export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
@@ -8,6 +8,8 @@ export declare const axisLabelsDefaults: {
 type AxisTitleDefaults = Required<ChartAxis['title']> & {
     style: BaseTextStyle;
 };
+type AxisCrosshairDefaults = Required<AxisCrosshair>;
+export declare const axisCrosshairDefaults: AxisCrosshairDefaults;
 export declare const xAxisTitleDefaults: AxisTitleDefaults;
 export declare const yAxisTitleDefaults: AxisTitleDefaults;
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;

package/dist/cjs/constants/defaults/axis.js

@@ -1,3 +1,4 @@
+import { DASH_STYLE } from '../line-styles';
 export const axisLabelsDefaults = {
     margin: 10,
     padding: 10,
@@ -13,6 +14,15 @@ const axisTitleDefaults = {
     align: 'center',
     maxRowCount: 1,
 };
+export const axisCrosshairDefaults = {
+    enabled: false,
+    color: 'var(--g-color-line-generic)',
+    width: 1,
+    snap: true,
+    dashStyle: DASH_STYLE.Solid,
+    opacity: 1,
+    layerPlacement: 'after',
+};
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
 export const DEFAULT_AXIS_TYPE = 'linear';

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

@@ -1,49 +1,8 @@
 export * from './defaults';
 export * from './misc';
-export declare const SeriesType: {
-    readonly Area: "area";
-    readonly BarX: "bar-x";
-    readonly BarY: "bar-y";
-    readonly Line: "line";
-    readonly Pie: "pie";
-    readonly Scatter: "scatter";
-    readonly Treemap: "treemap";
-    readonly Waterfall: "waterfall";
-    readonly Sankey: "sankey";
-    readonly Radar: "radar";
-};
-export declare enum DashStyle {
-    Dash = "Dash",
-    DashDot = "DashDot",
-    Dot = "Dot",
-    LongDash = "LongDash",
-    LongDashDot = "LongDashDot",
-    LongDashDotDot = "LongDashDotDot",
-    ShortDash = "ShortDash",
-    ShortDashDot = "ShortDashDot",
-    ShortDashDotDot = "ShortDashDotDot",
-    ShortDot = "ShortDot",
-    Solid = "Solid"
-}
-export declare enum SymbolType {
-    Circle = "circle",
-    Diamond = "diamond",
-    Square = "square",
-    Triangle = "triangle",
-    TriangleDown = "triangle-down"
-}
-export declare enum LineCap {
-    Butt = "butt",
-    Round = "round",
-    Square = "square",
-    None = "none"
-}
-export declare enum LayoutAlgorithm {
-    Binary = "binary",
-    Dice = "dice",
-    Slice = "slice",
-    SliceDice = "slice-dice",
-    Squarify = "squarify"
-}
-export declare const DEFAULT_PALETTE: string[];
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';

package/dist/cjs/constants/index.js

@@ -1,74 +1,8 @@
 export * from './defaults';
 export * from './misc';
-export const SeriesType = {
-    Area: 'area',
-    BarX: 'bar-x',
-    BarY: 'bar-y',
-    Line: 'line',
-    Pie: 'pie',
-    Scatter: 'scatter',
-    Treemap: 'treemap',
-    Waterfall: 'waterfall',
-    Sankey: 'sankey',
-    Radar: 'radar',
-};
-export var DashStyle;
-(function (DashStyle) {
-    DashStyle["Dash"] = "Dash";
-    DashStyle["DashDot"] = "DashDot";
-    DashStyle["Dot"] = "Dot";
-    DashStyle["LongDash"] = "LongDash";
-    DashStyle["LongDashDot"] = "LongDashDot";
-    DashStyle["LongDashDotDot"] = "LongDashDotDot";
-    DashStyle["ShortDash"] = "ShortDash";
-    DashStyle["ShortDashDot"] = "ShortDashDot";
-    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
-    DashStyle["ShortDot"] = "ShortDot";
-    DashStyle["Solid"] = "Solid";
-})(DashStyle || (DashStyle = {}));
-export var SymbolType;
-(function (SymbolType) {
-    SymbolType["Circle"] = "circle";
-    SymbolType["Diamond"] = "diamond";
-    SymbolType["Square"] = "square";
-    SymbolType["Triangle"] = "triangle";
-    SymbolType["TriangleDown"] = "triangle-down";
-})(SymbolType || (SymbolType = {}));
-export var LineCap;
-(function (LineCap) {
-    LineCap["Butt"] = "butt";
-    LineCap["Round"] = "round";
-    LineCap["Square"] = "square";
-    LineCap["None"] = "none";
-})(LineCap || (LineCap = {}));
-export var LayoutAlgorithm;
-(function (LayoutAlgorithm) {
-    LayoutAlgorithm["Binary"] = "binary";
-    LayoutAlgorithm["Dice"] = "dice";
-    LayoutAlgorithm["Slice"] = "slice";
-    LayoutAlgorithm["SliceDice"] = "slice-dice";
-    LayoutAlgorithm["Squarify"] = "squarify";
-})(LayoutAlgorithm || (LayoutAlgorithm = {}));
-export const DEFAULT_PALETTE = [
-    '#4DA2F1',
-    '#FF3D64',
-    '#8AD554',
-    '#FFC636',
-    '#FFB9DD',
-    '#84D1EE',
-    '#FF91A1',
-    '#54A520',
-    '#DB9100',
-    '#BA74B3',
-    '#1F68A9',
-    '#ED65A9',
-    '#0FA08D',
-    '#FF7E00',
-    '#E8B0A4',
-    '#52A6C5',
-    '#BE2443',
-    '#70C1AF',
-    '#FFB46C',
-    '#DCA3D7',
-];
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';

package/dist/cjs/constants/layout-algorithms.d.ts

@@ -0,0 +1,7 @@
+export declare enum LayoutAlgorithm {
+    Binary = "binary",
+    Dice = "dice",
+    Slice = "slice",
+    SliceDice = "slice-dice",
+    Squarify = "squarify"
+}

package/dist/cjs/constants/layout-algorithms.js

@@ -0,0 +1,8 @@
+export var LayoutAlgorithm;
+(function (LayoutAlgorithm) {
+    LayoutAlgorithm["Binary"] = "binary";
+    LayoutAlgorithm["Dice"] = "dice";
+    LayoutAlgorithm["Slice"] = "slice";
+    LayoutAlgorithm["SliceDice"] = "slice-dice";
+    LayoutAlgorithm["Squarify"] = "squarify";
+})(LayoutAlgorithm || (LayoutAlgorithm = {}));

package/dist/cjs/constants/line-styles.d.ts

@@ -0,0 +1,20 @@
+export declare const DASH_STYLE: {
+    readonly Dash: "Dash";
+    readonly DashDot: "DashDot";
+    readonly Dot: "Dot";
+    readonly LongDash: "LongDash";
+    readonly LongDashDot: "LongDashDot";
+    readonly LongDashDotDot: "LongDashDotDot";
+    readonly ShortDash: "ShortDash";
+    readonly ShortDashDot: "ShortDashDot";
+    readonly ShortDashDotDot: "ShortDashDotDot";
+    readonly ShortDot: "ShortDot";
+    readonly Solid: "Solid";
+};
+export type DashStyle = keyof typeof DASH_STYLE;
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}

package/dist/cjs/constants/line-styles.js

@@ -0,0 +1,20 @@
+export const DASH_STYLE = {
+    Dash: 'Dash',
+    DashDot: 'DashDot',
+    Dot: 'Dot',
+    LongDash: 'LongDash',
+    LongDashDot: 'LongDashDot',
+    LongDashDotDot: 'LongDashDotDot',
+    ShortDash: 'ShortDash',
+    ShortDashDot: 'ShortDashDot',
+    ShortDashDotDot: 'ShortDashDotDot',
+    ShortDot: 'ShortDot',
+    Solid: 'Solid',
+};
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));

package/dist/cjs/constants/palette.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PALETTE: string[];

package/dist/cjs/constants/palette.js

@@ -0,0 +1,22 @@
+export const DEFAULT_PALETTE = [
+    '#4DA2F1',
+    '#FF3D64',
+    '#8AD554',
+    '#FFC636',
+    '#FFB9DD',
+    '#84D1EE',
+    '#FF91A1',
+    '#54A520',
+    '#DB9100',
+    '#BA74B3',
+    '#1F68A9',
+    '#ED65A9',
+    '#0FA08D',
+    '#FF7E00',
+    '#E8B0A4',
+    '#52A6C5',
+    '#BE2443',
+    '#70C1AF',
+    '#FFB46C',
+    '#DCA3D7',
+];

package/dist/cjs/constants/symbol-types.d.ts

@@ -0,0 +1,7 @@
+export declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}

package/dist/cjs/constants/symbol-types.js

@@ -0,0 +1,8 @@
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));

package/dist/cjs/constants/typography.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";

package/dist/cjs/constants/typography.js

@@ -0,0 +1 @@
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';

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

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';

package/dist/cjs/hooks/index.js

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';

package/dist/cjs/hooks/useChartOptions/types.d.ts

@@ -1,5 +1,5 @@
-import type { DashStyle } from 'src/constants';
-import type { AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
+import type { DashStyle } from '../../constants';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -12,6 +12,7 @@ export type PreparedChart = {
     margin: ChartMargin;
 };
 export type PreparedAxisPlotBand = Required<AxisPlotBand>;
+export type PreparedAxisCrosshair = Required<AxisCrosshair>;
 export type PreparedAxisPlotLine = {
     value: number;
     color: string;
@@ -44,6 +45,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'pl
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
     plotBands: PreparedAxisPlotBand[];
+    crosshair: PreparedAxisCrosshair;
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DashStyle, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
@@ -106,7 +106,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             value: get(d, 'value', 0),
             color: get(d, 'color', 'var(--g-color-base-brand)'),
             width: get(d, 'width', 1),
-            dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+            dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
@@ -117,6 +117,15 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
+        crosshair: {
+            enabled: get(xAxis, 'crosshair.enabled', axisCrosshairDefaults.enabled),
+            color: get(xAxis, 'crosshair.color', axisCrosshairDefaults.color),
+            layerPlacement: get(xAxis, 'crosshair.layerPlacement', axisCrosshairDefaults.layerPlacement),
+            snap: get(xAxis, 'crosshair.snap', axisCrosshairDefaults.snap),
+            dashStyle: get(xAxis, 'crosshair.dashStyle', axisCrosshairDefaults.dashStyle),
+            width: get(xAxis, 'crosshair.width', axisCrosshairDefaults.width),
+            opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
+        },
         visible: get(xAxis, 'visible', true),
     };
     const { height, rotation } = getLabelSettings({