Tick Mark to reflect current video time

[sepehr500]

I am trying to make a chart that shows data from a corresponding video on the page. When the user is watching the video, I would like it if there was some kind of line or indicator on the chart so that the user would know where in the chart they are in terms of time, and updated as the video played. It would be great if there was a single tick mark (besides the regular time tick marks on the x axis) that would show the user where they are in the video.

[ckifer]

Interesting!

While I don't think recharts should support this directly as it's out of scope of the project, you could also probably use SVG and some event handlers in recharts to achieve what you want. You would make something that looks similar to a tick, render it within a customized component, and as the video progresses (assuming you have an event for that) move the x position of the element across the page.

Not quite sure how this looks in practice but that's the idea.

[sepehr500]

Thanks for the response. Can you point me to any docs on rendering custom components inside of recharts? Is there a way for me to render a custom SVG line and somehow have recharge determined it's x position based on time?

[sepehr500]

I used <ReferenceLine /> for this and it worked perfectly.