React Vis Horizontal Crosshair

Question

Is there a way to display the crosshair so that it is horizontal instead of vertical? By default, given a list of points it will snap a vertical crosshair to the x values of the nearest point.

doesn't seem possible https://github.com/uber/react-vis/blob/master/packages/react-vis/src/plot/crosshair.js#L181 — diedu, Apr 16 '21 at 04:24
Unless you create your own crosshair component, I believe it is feasible. I'll try tomorrow, just leaving the idea as a comment if someone else wants to give it a try — diedu, Apr 16 '21 at 04:33

score 0 · Answer 1 · answered Apr 17 '21 at 04:58

I was able to create a custom Crosshair component, the solution is a little hackish, since I'm using a utility that is not exposed by the library you'll need to be wary if you upgrade the version. you can check it out here https://codesandbox.io/s/react-vis-forked-t8hvz?file=/src/HorizontalCrosshair.js

the important differences from the original component are these:

get the imports from the lib

    import { ScaleUtils } from "react-vis";
    import { transformValueToString } from "react-vis/dist/utils/data-utils"; // hackish

change the props types to get the right margin and change the orientation values

      marginRight: PropTypes.number,
      orientation: PropTypes.oneOf(["top", "bottom"]),

change calculations to find the top position instead of left

    const y = ScaleUtils.getAttributeFunctor(this.props, "y");
    const innerTop = y(value);

    const {
      orientation = innerTop > innerHeight / 2 ? "top" : "bottom"
    } = this.props;
    const right = marginRight;
    const top = marginTop + innerTop;
    const innerClassName = `rv-crosshair__inner rv-crosshair__inner--${orientation}`;

and finally set the top and width instead of left and height

      <div
        className={"rv-crosshair horizontal"}
        style={{
          top: `${top}px`,
          right: `${right}px`
        }}
      >
        <div
          className="rv-crosshair__line"
          style={{ width: `${innerWidth}px`, ...style.line }}
        />

and add some CSS classes to position the component correctly

styles.css

.rv-crosshair.horizontal .rv-crosshair__line {
  height: 1px;
}

.rv-crosshair__inner {
  right: 0;
}

.rv-crosshair__inner--bottom {
  top: 4px !important;
}

.rv-crosshair__inner--top {
  bottom: 4px !important;
  top: unset;
}

React Vis Horizontal Crosshair

1 Answers1