Limit line on XYChart

[shockhs]

Is there any ways to add limit lines on XYChart?

[williaster]

Hey @EsaxCO 👋 thanks for checking out visx. Yes, there are a couple approaches for this. You can either use the Annotation/AnnotationLineSubject exported from @visx/xychart, or tap into the DataContext for access to the chart scales and roll your own. Here's a demo of both approaches, hope it helps!

[williaster]

Yep! Check out the docs for @visx/annotation which is what xychart exposes.

[shockhs]

@williaster, thank you!

[noyg123]

Hi, is there any way to add an onClick event on the Annotation element?
I tried to use onClick but it doesn’t seem to work:

Thanks!

[williaster]

Hey @noyg123, sorry for the delay I was on vacation 🍹

onClick should be passed to the rendered svg line element, however by default we set pointer-events: none on it (two lines up from the previous link) because typically you don't want annotations to interfere with pointer interactions. so you will also need to set pointerEvents="auto" or similar to make that work.

[noyg123]

@williaster Thank you for your response!
It seems that because of D3 order the element of the line is "below" the rect of the chart, then the click does not work.
Do I need to add something else to make it work?