LineSegment y2 prop ignored for cursorComponent

[andy-root]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

^36.6.11

Code Sandbox link

https://codesandbox.io/p/sandbox/victory-starter-forked-mrhzwg?file=%2Fsrc%2FApp.tsx

Bug report

I need a way to extend the cursor into the Y Axis, when setting the cursorComponent prop for <VictoryCursorContainer/> to <LineSegment/> the y2 prop is not being used. The y2 prop is listed as a prop in https://commerce.nearform.com/open-source/victory/docs/victory-primitives/#linesegment.

For example the y2 value is being set to 250 by Victory but I want an additional 25 so I set it to 275.

<VictoryCursorContainer cursorComponent={ <LineSegment y2={275} /> } />

https://codesandbox.io/p/sandbox/victory-starter-forked-mrhzwg?file=%2Fsrc%2FApp.tsx%3A12%2C9-22%2C11

If I set the y2 attribute on the rendered element using the browser inspector I get the desired behavior.

Steps to reproduce

1. Open https://codesandbox.io/p/sandbox/victory-starter-forked-mrhzwg?file=%2Fsrc%2FApp.tsx%3A12%2C9-22%2C11
2. See the cursor does not extend into the Y axis
3. Use the browser inspector find the <line/> element for the cursor
4. Change the y2 attribute to 275, see the cursor extends into the Y axis

Expected behavior

Expect the y2 prop value for <LineSegment/> to be honored.

Actual behavior

The y2 prop value for <LineSegment/> is being ignored.

Environment

- Device: desktop
- OS: macOS 13
- Browser: Chrome
- Version: 36

[carbonrobot]

Hi @andy-root, can you make that codesandbox link public?

[andy-root]

Its public now

[carbonrobot]

This feature is by design. The VictoryCursorContainer provides those values for its child components.

From the documentation
https://commerce.nearform.com/open-source/victory/docs/victory-cursor-container#cursorcomponent

The cursorComponent prop takes a component instance which will be used to render a cursor element. The new element created will be supplied with x1, y1, x2 and y2 positioning props.

However, you can achieve what you are looking for by creating a simple passthrough component to capture the y2 property.

function CustomCursor(props) {
  const { y2, ...rest } = props;
  return <LineSegment y2={400} {...rest} />;
}

export default function App() {
  return (
    <VictoryChart
      containerComponent={
        <VictoryCursorContainer
          cursorDimension="x"
          cursorComponent={
            <CustomCursor style={{ stroke: "grey", strokeDasharray: 2 }} />
          }
          defaultCursorValue={0.4}
          disable={true}
        />
      }
    >
      <VictoryLine />
    </VictoryChart>
  );
}

[andy-root]

thanks