Feature Discussion: Timeline Overview Bar with Hover Detail

[pacmac0]

Feature Discussion: Timeline Overview Bar with Hover Detail

Hello everyone,
I'm looking for a very specific charting functionality for a project of mine. I am fairly new to chart.js and similar packages and not sure if this is currently possible with chart.js.
Therefore I hope for some pointers from the community here.

Current Need

I'm looking to implement a chart visualization feature similar to YouTube's video timeline preview:

• A main chart area (can be zoomed in to specific data)
• An overview bar below showing the full dataset (similar to the youtube progress bar)
• Interactive hover functionality that shows detailed preview at cursor position for increased readability and selection precision. One could also describe it as a pre-zooming effect. Therefore the zoom level should be adjustable somehow.

Questions

1. Is this functionality already possible with chart.js?

   • If yes, could someone point me to relevant documentation/examples?
   • If no, what would be the complexity of implementing this?

2. Technical Considerations:

   • Would this require custom plugins/extensions?
   • Are there any performance concerns with large datasets?
   • What would be the best approach for the hover preview mechanism?

3. Implementation:

   • Is anyone familiar with implementing similar functionality?
   • Looking for recommendations for developers experienced with this type of visualization

Thanks already to everyone helping out!