Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

PSA: Scaling Graphs in Dash

Hello everyone,

I just wanted to share a quick tip on something I found quite useful and was unable to find any reference to in the docs (could definitely be missing it!).

There are plenty of good posts and docs when it comes to sizing your plotly graphs. However, I was at a loss how to handle this for smaller, mobile oriented layouts.

By default, your graphs (and entire layout) will be scaled for mobile layouts by rendering content according to a larger, virtual viewport then shrinking the content down. However, when trying to set the meta tags for a purpose built mobile layout, I was at a loss for how to emulate this scaling for just the graphs. If you’re unsure what I’m talking about, this post is highly informative.

It turns out to be relatively simple! Just modify the “.dash-graph” class’s “zoom” property. The following css code improved my mobile layout dramatically as shown below:

.dash-graph {
  zoom: 0.45;
}

@media (min-width: 475px) {
  .dash-graph {
    zoom: 0.6;
  }
}

@media (min-width: 768px) {
  .dash-graph {
    zoom: 0.85;
  }
}

@media (min-width: 1024px) {
  .dash-graph {
    zoom: 1;
  }
}

Before zoom css:

After zoom css:

Hopefully someone else finds this useful!

5 Likes

nice one cheers for sharing this, css is so much fun!

1 Like