# Tips for making Observable Plot graphics responsive

**URL:** <https://talk.observablehq.com/t/tips-for-making-observable-plot-graphics-responsive/5736>\
**Category:** Help\
**Created:** [October 21, 2021, 3:35pm UTC](https://talk.observablehq.com/t/tips-for-making-observable-plot-graphics-responsive/5736 "2021-10-21T15:35:55Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [October 25, 2021, 8:59pm UTC](https://talk.observablehq.com/t/tips-for-making-observable-plot-graphics-responsive/5736/3 "2021-10-25T20:59:48Z")

</div>

Zan and I have sometimes noticed that when the width becomes very small, using the top-level _width_ option doesn’t work, since text doesn’t scale down and might start to get out of the viewBox (and of course, we don’t want to micromanage every dimension of every mark).

Our solution was to set a minimum width, e.g.  
`Plot.plot({ width: Math.max(width, 550), … })`

When the screen’s width gets below this threshold of 550px, the browser starts to scale down everything (including text) in a “fixed-proportions” svg, if I may say.

This technique can be seen on some of the charts in [What’s different? Analyzing Time-Series Forecast Performance / Observable / Observable](https://observablehq.com/@observablehq/whats-different-timeseries-forecast-performance) (the third and fourth from the top, for example).

---

_[View the full topic](https://talk.observablehq.com/t/tips-for-making-observable-plot-graphics-responsive/5736)._