Sunday, August 1, 2021

Published August 01, 2021 by with 1 comment

How to Add a Vertical Scrollbar to Plotly

Plotly doesn't have the built-in ability to scroll vertically with a fixed x axis unfortunately, but you can mimic that fairly easily...

First, here's the demo:

See the Pen vertical scroll plotly by Robert Hamner (@rhamner) on CodePen.


The basic model here is two stack two plots directly on top of each other where top is in a scrollable div and bottom is not.

  • Make two divs
    • plot div
      • scrollable
      • width = plot width + scroll width
    • xaxis div
      • not scrollable
      • width = plot width
  • Make two plots
    • plot
      • goes in plot div
      • y-axis zeroline is hidden
      • bottom margin is 0
    • xaxis
      • 0 top margin
      • hide the modebar
  • Make the plot xaxis ranges equal
You can then get as complicated as you need to here. I added really crude layout event linking to the demo...I'm hitting a weird double-click bug (should autoscale but isn't) but this works pretty easily/cleanly as the basic concept.



      edit

1 comment:

  1. 💥 DAILY JACKPOT IPRO356 แจกหนัก

    🎰 เกมสล็อต เริ่มต้น 1บาท
    ✨ ฟรีสปินง่าย แตกง่ายทุกเกม อัตราการจ่ายสูง
    💸 สุ่มแจกเงินรางวัล มากกว่า x10,000+ เท่า
    💖 มีสิทธิ์ลุ้นรับเงิน 10,000 กันทุกUSER

    ReplyDelete