fix(interactions): stop axis line from cutting off cursor line on hover

packages/charts/src/chart_types/xy_chart/renderer/dom/crosshair.tsx

@@ -30,7 +30,6 @@ interface CrosshairProps {
   cursorCrossLinePosition?: Line;
   tooltipType: TooltipType;
   fromExternalEvent?: boolean;
-  zIndex: number;
 }
 
 function canRenderBand(type: TooltipType, visible: boolean, fromExternalEvent?: boolean) {
@@ -46,7 +45,6 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
 
   renderCursor() {
     const {
-      zIndex,
       theme: {
         crosshair: { band, line },
       },
@@ -64,12 +62,7 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
     const { fill } = band;
     const strokeDasharray = (dash ?? []).join(' ');
     return (
-      <svg
-        className="echCrosshair__cursor"
-        width="100%"
-        height="100%"
-        style={{ zIndex: cursorPosition && isLine ? zIndex : undefined }}
-      >
+      <svg className="echCrosshair__cursor" width="100%" height="100%">
         {isLine && <line {...{ x1: x, x2: x + width, y1: y, y2: y + height, strokeWidth, stroke, strokeDasharray }} />}
         {!isLine && <rect {...{ x, y, width, height, fill }} />}
       </svg>
@@ -78,7 +71,6 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
 
   renderCrossLine() {
     const {
-      zIndex,
       theme: {
         crosshair: { crossLine },
       },
@@ -98,7 +90,7 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
     };
 
     return (
-      <svg className="echCrosshair__crossLine" width="100%" height="100%" style={{ zIndex }}>
+      <svg className="echCrosshair__crossLine" width="100%" height="100%">
         <line {...cursorCrossLinePosition} {...style} />
       </svg>
     );
@@ -120,7 +112,6 @@ const mapStateToProps = (state: GlobalChartState): CrosshairProps => {
       theme: LIGHT_THEME,
       chartRotation: 0,
       tooltipType: TooltipType.None,
-      zIndex: 0,
     };
   }
   const settings = getSettingsSpecSelector(state);
@@ -135,7 +126,6 @@ const mapStateToProps = (state: GlobalChartState): CrosshairProps => {
     cursorCrossLinePosition: getCursorLinePositionSelector(state),
     tooltipType,
     fromExternalEvent,
-    zIndex: state.zIndex,
   };
 };
 

packages/charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`Chart should render the legend name test 1`] = `
             <ChartContainer getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}} status=\\"Initialized\\" initialized={true} isChartEmpty={false} pointerCursor=\\"default\\" isBrushingAvailable={false} isBrushing={false} internalChartRenderer={[Function (anonymous)]} settings={{...}} onPointerMove={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onKeyPress={[Function (anonymous)]}>
               <div className=\\"echChartPointerContainer\\" style={{...}} onMouseMove={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseUp={[Function (anonymous)]}>
                 <Connect(Crosshair)>
-                  <Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]} />
+                  <Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} dispatch={[Function: dispatch]} />
                 </Connect(Crosshair)>
                 <Connect(XYChart) forwardCanvasRef={{...}}>
                   <XYChart forwardCanvasRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>

packages/charts/src/components/portal/utils.ts

@@ -63,7 +63,7 @@ export function isHTMLElement(value: any): value is HTMLElement {
 export function getElementZIndex(element: HTMLElement, cousin: HTMLElement): number {
   /**
    * finding the z-index of `element` is not the full story
-   * its the CSS stacking context that is important
+   * it's the CSS stacking context that is important
    * take this DOM for example:
    * body
    *   section[z-index: 1000]

storybook/stories/grids/4_axis_overlap.story.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import {
+  Chart,
+  Axis,
+  LineSeries,
+  Position,
+  ScaleType,
+  PartialTheme,
+  Settings,
+  LIGHT_THEME,
+  TooltipType,
+} from '@elastic/charts';
+
+export const Example = () => {
+  const theme1: PartialTheme = {
+    crosshair: {
+      line: {
+        stroke: 'red',
+        dash: [2, 2],
+      },
+      crossLine: { stroke: 'blue', dash: [4, 4] },
+    },
+  };
+
+  return (
+    <Chart>
+      <Settings
+        theme={[theme1]}
+        baseTheme={LIGHT_THEME}
+        tooltip={TooltipType.Crosshairs}
+        //xDomain={{ min: 0, max: 5 }}
+      />
+      <Axis id="count" title="count" position={Position.Left} showGridLines />
+      <Axis id="x" title="goods" position={Position.Bottom} showGridLines />
+      <LineSeries
+        id="bars"
+        name="amount"
+        xScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
+        data={[
+          { x: 1, y: 390, val: 1222 },
+          { x: 2, y: 23, val: 1222 },
+          { x: 3, y: 750, val: 1222 },
+          { x: 4, y: 854, val: 1222 },
+        ]}
+      />
+    </Chart>
+  );
+};

storybook/stories/grids/grids.stories.tsx

@@ -13,3 +13,4 @@ export default {
 export { Example as basic } from './1_basic.story';
 export { Example as multipleAxesWithTheSamePosition } from './2_multiple_axes.story';
 export { Example as lines } from './3_lines.story';
+export { Example as testAxisOverlapCursor } from './4_axis_overlap.story';