Creating Grafana-Style Time-Series Chart in Plotly

plotly.js
1

Hi Plotly Team and Community,

We’re evaluating Plotly for a proof of concept and would love guidance on implementing a time-series chart that closely mirrors Grafana in usability and features. Specifically, we’re looking for insights on whether the following requirements are achievable:

  1. Legend with Last, Max, and Min values displayed as a table (similar to Grafana).
  • The individual time series should still be selectable within the legend, even with the table-style integration.

Screenshot 2025-03-15 101038
Screenshot 2025-03-15 1010381624×564 156 KB

  1. Click-and-zoom behavior should only highlight the selected area, rather than dimming the outside regions (similar to Grafana’s zoom behavior).

  2. Dynamic right Y-axis units that update based on the zoom level to maintain readability.

Would you be able to provide boilerplate code or guidance on how to implement these features efficiently? This would help us quickly compare Plotly with other solutions. :folded_hands:

2

Hey hey @Saratoga,

I noticed you’re a Trusted Contributor in the Plotly community and have helped many people here. Just following up to see if you have any insights on whether the above requirements can be met with Plotly.js. Would love to hear your thoughts when you have a moment!

Thanks!

3

Check this out, I couldn’t revert the color of the zoombox but I did remove the outer color.

https://codepen.io/saratoga01/pen/MYWVOjW?editors=0010

And an extra with code to sort columns in case you want to implement it

https://codepen.io/saratoga01/pen/vEYROxy