XYChart highlight specific x-value ranges

[denStrigo]

Hi guys.
First I would like to say great thanks for your work.

I am using xychart in my project and I need to highlight some part by x axis like in an example below. Could you please help me, what should I do ?

[williaster]

Hey @denStrigo 👋 thanks for checking out visx. I'm converting this to a discussion since it's not an issue.

I think by far the easiest way to implement this with @visx/xychart is to tap into its react context which is an advanced but key API decision we made. Essentially you can create a custom react component which can easily access the chart scales + pixel dimensions using context (as long as it's a child of XYChart). Here's a demo where I made a <BackgroundAnnotations /> that does this https://codesandbox.io/s/background-annotation-dce2br?file=/Example.tsx

Hope that helps!